/*------------------------------------------------------------------
[Master Stylesheet]

THEME:    SPEC DASHBOARD
Version:    9.0.1
Last change:    03/29/2026 [Last Release]
Author:    DotJs
Primary use:    Web App

---------------------------------------------------------------------

1. Form Wizar
2. According Menu 
3. Form Wizar With Validations
4. Modal
5. Progress Bars
6. Badges & Check Box
7. Warnings
8. Spinners
9. Vertical Timeline
10. Dropdown Menu
11. Spec Buttons
12. Spec Panel
13. CHAT
14. TO DO LIST
15. Alerts
16. loading button
17. Conatcts
18. Pricing Table
19. Timeline Board
20. Timeline 2
21. Profile
22. Form
23. Invoice
24. Weather Widget
25. Timeline Widget
-------------------------------------------------------------------*/

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

/* 1. Form Wizard */

body {
    opacity: 1 !important;
}

.wizard {
    margin: 20px auto;
    background: transparent;
}

    .wizard .nav-tabs {
        position: relative;
        margin: 40px auto;
        margin-bottom: 0;
        border-bottom-color: #e0e0e0;
    }

    .wizard > div.wizard-inner {
        position: relative;
    }

.connecting-line {
    height: 2px;
    background: #e0e0e0;
    position: absolute;
    width: 80%;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 1;
}

.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
    color: #555555;
    cursor: default;
    border: 0;
    border-bottom-color: transparent;
}

span.round-tab {
    width: 70px;
    height: 70px;
    line-height: 70px;
    display: inline-block;
    border-radius: 100px;
    background: #fff;
    border: 2px solid #e0e0e0;
    z-index: 2;
    position: absolute;
    left: 0;
    text-align: center;
    font-size: 25px;
}
span.round-tab i{
    color:#555555;
}
.wizard li.active span.round-tab {
    background: #fff;
    border: 2px solid #5bc0de;
    
}
.wizard li.active span.round-tab i{
    color: #5bc0de;
}

span.round-tab:hover {
    color: #333;
    border: 2px solid #333;
}

.wizard .nav-tabs > li {
    width: 25%;
}

.wizard li:after {
    content: " ";
    position: absolute;
    left: 46%;
    opacity: 0;
    margin: 0 auto;
    bottom: 0px;
    border: 5px solid transparent;
    border-bottom-color: #5bc0de;
    transition: 0.1s ease-in-out;
}

.wizard li.active:after {
    content: " ";
    position: absolute;
    left: 46%;
    opacity: 1;
    margin: 0 auto;
    bottom: 0px;
    border: 10px solid transparent;
    border-bottom-color: #5bc0de;
}

.wizard .nav-tabs > li a {
    width: 70px;
    height: 70px;
    margin: 20px auto;
    border-radius: 100%;
    padding: 0;
}

    .wizard .nav-tabs > li a:hover {
        background: transparent;
    }

.wizard .tab-pane {
    position: relative;
    padding-top: 50px;
}

.wizard h3 {
    margin-top: 0;
}
.step1 .row {
    margin-bottom:10px;
}
.step_21 {
    border :1px solid #eee;
    border-radius:5px;
    padding:10px;
}
.step33 {
    border:1px solid #ccc;
    border-radius:5px;
    padding-left:10px;
    margin-bottom:10px;
}
.dropselectsec {
    width: 68%;
    padding: 6px 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #333;
    margin-left: 10px;
    outline: none;
    font-weight: normal;
}
.dropselectsec1 {
    width: 74%;
    padding: 6px 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #333;
    margin-left: 10px;
    outline: none;
    font-weight: normal;
}
.mar_ned {
    margin-bottom:10px;
}
.wdth {
    width:25%;
}
.birthdrop {
    padding: 6px 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #333;
    margin-left: 10px;
    width: 16%;
    outline: 0;
    font-weight: normal;
}


/* 2. according menu */
#accordion-container {
    font-size:13px
}
.accordion-header {
    font-size:13px;
    background:#ebebeb;
    margin:5px 0 0;
    padding:7px 20px;
    cursor:pointer;
    color:#fff;
    font-weight:400;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px
}
.unselect_img{
    width:18px;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none; 
}
.active-header {
    -moz-border-radius:5px 5px 0 0;
    -webkit-border-radius:5px 5px 0 0;
    border-radius:5px 5px 0 0;
    background:#F53B27;
}
.active-header:after {
    content:"\f068";
    font-family:'FontAwesome';
    float:right;
    margin:5px;
    font-weight:400
}
.inactive-header {
    background:#333;
}
.inactive-header:after {
    content:"\f067";
    font-family:'FontAwesome';
    float:right;
    margin:4px 5px;
    font-weight:400
}
.accordion-content {
    display:none;
    padding:20px;
    background:#fff;
    border:1px solid #ccc;
    border-top:0;
    -moz-border-radius:0 0 5px 5px;
    -webkit-border-radius:0 0 5px 5px;
    border-radius:0 0 5px 5px
}
.accordion-content a{
    text-decoration:none;
    color:#333;
}
.accordion-content td{
    border-bottom:1px solid #dcdcdc;
}



@media( max-width : 585px ) {

    .wizard {
        width: 90%;
        height: auto !important;
    }

    span.round-tab {
        font-size: 16px;
        width: 50px;
        height: 50px;
        line-height: 50px;
    }

    .wizard .nav-tabs > li a {
        width: 50px;
        height: 50px;
        line-height: 50px;
    }

    .wizard li.active:after {
        content: " ";
        position: absolute;
        left: 35%;
    }
}

/* 3. Form Wizar With Validations */

.stepwizard-step p {
    margin-top: 10px;
}

.stepwizard-row {
    display: table-row;
}

.stepwizard {
    display: table;
    width: 100%;
    position: relative;
}

.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-order: 0;

}

.stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}

/* 4. Modals */
.h-modal-icon {
    font-size: 66px
}
.inmodal .color-line {
    border-radius: 4px 4px 0 0
}
.modal-content {
    border-radius: 5px;
    border: 0;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2)
}
.modal-backdrop.in {
    opacity: .4
}
.modal-backdrop {
    position: fixed;
    bottom: 0
}
.modal-dialog {
    margin-top: 80px
}
.modal-title {
    font-size: 30px;
    font-weight: 300
}
.modal-header {
    padding: 40px 30px;
    background: #f7f9fa
}
.modal-body {
    padding: 20px 30px
}
.modal-header small {
    color: #9d9fa2
}
.modal-footer {
    background: #f7f9fa
}
.hmodal-info .color-line {
    background: #3498db
}
.hmodal-warning .color-line {
    background: #ffb606
}
.hmodal-success .color-line {
    background: #1ab394
}
.hmodal-danger .color-line {
    background: #c0392b
}
.hmodal-info h4.modal-title {
    color: #3498db
}
.hmodal-warning h4.modal-title {
    color: #ffb606
}
.hmodal-success h4.modal-title {
    color: #1ab394
}
.hmodal-danger h4.modal-title {
    color: #c0392b
}

/* 5. Progress Bars */
.progress {
    border-radius: 2px;
    margin-bottom: 10px
}
.progress-bar {
    background-color: #f1f3f6;
    text-align: right;
    padding-right: 10px;
    color: #6a6c6f
}
.progress-small,
.progress-small .progress-bar {
    height: 10px
}
.progress-bar-success {
    border-right: 4px solid #58b62c
}
.progress-bar-info {
    border-right: 4px solid #258cd1
}
.progress-bar-warning {
    border-right: 4px solid #eba600
}
.progress-bar-danger {
    border-right: 4px solid #e43725
}
.full .progress-bar-success {
    background-color: #1ab394;
    border-right: 4px solid #58b62c
}
.full .progress-bar-info {
    background-color: #3498db;
    border-right: 4px solid #258cd1
}
.full .progress-bar-warning {
    background-color: #ffb606;
    border-right: 4px solid #eba600
}
.full .progress-bar-danger {
    background-color: #e74c3c;
    border-right: 4px solid #e43725
}
.full .progress-bar {
    color: #fff
}

/* 6. Badges & Check Box */
.badge.badge-success {
    background-color: #1ab394
}
.badge.badge-info {
    background-color: #3498db
}
.badge.badge-danger {
    background-color: #e74c3c
}
.badge.badge-warning {
    background-color: #ffb606
}
.badge.badge-primary {
    background-color: #34495e
}
.checkbox-primary input[type="checkbox"]:checked+label::before {
    background-color: #34495e;
    border-color: #34495e
}
.checkbox-primary input[type="checkbox"]:checked+label::after {
    color: #fff
}
.checkbox-danger input[type="checkbox"]:checked+label::before {
    background-color: #e74c3c;
    border-color: #e74c3c
}
.checkbox-danger input[type="checkbox"]:checked+label::after {
    color: #fff
}
.checkbox-info input[type="checkbox"]:checked+label::before {
    background-color: #3498db;
    border-color: #3498db
}
.checkbox-info input[type="checkbox"]:checked+label::after {
    color: #fff
}
.checkbox-warning input[type="checkbox"]:checked+label::before {
    background-color: #ffb606;
    border-color: #ffb606
}
.checkbox-warning input[type="checkbox"]:checked+label::after {
    color: #fff
}
.checkbox-success input[type="checkbox"]:checked+label::before {
    background-color: #1ab394;
    border-color: #1ab394
}
.checkbox-success input[type="checkbox"]:checked+label::after {
    color: #fff
}
.finecharts-content {
  min-height: calc(100% - 48px);
}
.iconmargin {
    margin: 3px;
}
.radio-primary input[type="radio"]+label::after {
    background-color: #34495e
}
.radio-primary input[type="radio"]:checked+label::before {
    border-color: #34495e
}
.radio-primary input[type="radio"]:checked+label::after {
    background-color: #34495e
}
.radio-danger input[type="radio"]+label::after {
    background-color: #e74c3c
}
.radio-danger input[type="radio"]:checked+label::before {
    border-color: #e74c3c
}
.radio-danger input[type="radio"]:checked+label::after {
    background-color: #e74c3c
}
.radio-info input[type="radio"]+label::after {
    background-color: #3498db
}
.radio-info input[type="radio"]:checked+label::before {
    border-color: #3498db
}
.radio-info input[type="radio"]:checked+label::after {
    background-color: #3498db
}
.radio-warning input[type="radio"]+label::after {
    background-color: #ffb606
}
.radio-warning input[type="radio"]:checked+label::before {
    border-color: #ffb606
}
.radio-warning input[type="radio"]:checked+label::after {
    background-color: #ffb606
}
.radio-success input[type="radio"]+label::after {
    background-color: #1ab394
}
.radio-success input[type="radio"]:checked+label::before {
    border-color: #1ab394
}
.radio-success input[type="radio"]:checked+label::after {
    background-color: #1ab394
}
.checkbox input:hover,
.radio input:hover {
    cursor: pointer
}

/* 7. Warnings */
.has-warning .form-control,
.has-error .form-control,
.has-success .form-control {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none
}
.has-error .form-control {
    border-color: #d62c1a!important
}
.has-warning .form-control {
    border-color: #d29400!important
}
.has-success .form-control {
    border-color: #4ea227!important
}
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
    color: #d62c1a
}
.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline,
.has-warning.radio label,
.has-warning.checkbox label,
.has-warning.radio-inline label,
.has-warning.checkbox-inline label {
    color: #d29400
}
.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline,
.has-success.radio label,
.has-success.checkbox label,
.has-success.radio-inline label,
.has-success.checkbox-inline label {
    color: #4ea227
}

/* 8. Spinners */
.spinner {
    margin: 20px auto;
    width: 60px;
    height: 50px;
    text-align: center;
    font-size: 15px
}
.spinner>div {
    background-color: #1ab394;
    height: 100%;
    width: 8px;
    display: inline-block;
    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out
}
.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s
}
.spinner .rect3 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s
}
.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s
}
.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s
}
@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4)
    }
    20% {
        -webkit-transform: scaleY(1)
    }
}
@keyframes sk-stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4)
    }
    20% {
        transform: scaleY(1);
        -webkit-transform: scaleY(1)
    }
}
.splash {
    position: fixed;
    z-index: 2000;
    background: white;
    color: gray;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none
}
.splash-title {
    text-align: center;
    max-width: 500px;
    margin: 15% auto;
    padding: 20px
}
.splash-title h1 {
    font-size: 26px
}
.vertical-container {
    width: 98%;
    margin: 0 auto
}
.vertical-container::after {
    content: '';
    display: table;
    clear: both
}

/* 9. Vertical Timeline */

.v-timeline {
    position: relative;
    padding: 0;
    margin-top: 2em;
    margin-bottom: 2em
}
.v-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 18px;
    height: 100%;
    width: 4px;
    background: #e8ebf0
}
.vertical-timeline-content .btn {
    float: right
}
.vertical-timeline-block {
    position: relative;
    margin: 2em 0
}
.vertical-timeline-block:after {
    content: "";
    display: table;
    clear: both
}
.vertical-timeline-block:first-child {
    margin-top: 0
}
.vertical-timeline-block:last-child {
    margin-bottom: 0
}
.vertical-timeline-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 16px;
    border: 1px solid #eaeaea;
    text-align: center;
    background: #fff
}
.vertical-timeline-icon i {
    display: block;
    width: 24px;
    height: 24px;
    position: relative;
    left: 50%;
    top: 50%;
    margin-left: -12px;
    margin-top: -9px
}
.vertical-timeline-content {
    position: relative;
    margin-left: 60px;
    background: white;
    border-radius: .25em;
    border: 1px solid #eaeaea
}
.vertical-timeline-content:after {
    content: "";
    display: table;
    clear: both
}
.vertical-timeline-content h2 {
    font-weight: 400;
    margin-top: 4px
}
.vertical-timeline-content p {
    margin: 1em 0 0 0;
    line-height: 1.6
}
.vertical-timeline-content .vertical-date {
    font-weight: 500;
    text-align: right;
    font-size: 13px
}
.vertical-date small {
    color: #1ab394;
    font-weight: 400
}
.vertical-timeline-content:after,
.vertical-timeline-content:before {
    right: 100%;
    top: 20px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}
.vertical-timeline-content:after {
    border-color: transparent;
    border-right-color: #fff;
    border-width: 10px;
    margin-top: -10px
}
.vertical-timeline-content:before {
    border-color: transparent;
    border-right-color: #eaeaea;
    border-width: 11px;
    margin-top: -11px
}
@media only screen and (min-width: 768px) {
    .vertical-timeline-content h2 {
        font-size: 18px
    }
    .vertical-timeline-content p {
        font-size: 13px
    }
}
/* 10. Dropdown Menu */
.dropdown-menu.hdropdown {
    padding: 0;
    z-index: 1060
}
.dropdown-menu.hdropdown .title {
    padding: 12px 12px;
    text-align: center;
    border-bottom: 1px solid #eaeaea
}
.dropdown-menu.hdropdown li {
    padding: 6px 12px;
    text-align: left;
    background: #fafbfc;
    border-bottom: 1px solid #eaeaea
}
.dropdown-menu.filedropdown li {
    padding: 6px 6px;
    text-align: left;
    background: #fafbfc;
    border-bottom: 1px solid #eaeaea
}
.dropdown-menu.filedropdown li i {
    margin-right: 10px
}
.dropdown-menu.hdropdown.notification li {
    padding: 12px 12px
}
.dropdown-menu.hdropdown.notification li .label,
.dropdown-menu.hdropdown.notification li .badge {
    margin-right: 10px
}
.dropdown-menu.hdropdown li>a:hover,
.dropdown-menu.filedropdown li>a:hover {
    background: inherit
}
.dropdown-menu.hdropdown li:hover,
.dropdown-menu.filedropdown li:hover {
    background: #f1f3f6
}
.dropdown-menu.hdropdown li.summary {
    padding: 6px 12px;
    text-align: center;
    background: #fff
}
.navbar-nav>li>a:hover,
.navbar-nav>li>a:focus,
.navbar-nav .dropdown.show>a,
.navbar-nav .dropdown.show>a:hover,
.navbar-nav .dropdown.show>a:focus {
    color: inherit;
    background: #f7f8fa;
    border-bottom: 1px solid #eaeaea
}
.color-demo .header-line {
    height: 118px
}
.color-demo .header-line:after {
    display: block;
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.2);
    content: '';
    height: 10px;
    width: 100%
}
.header-line.extreme-color {
    width: 20%
}
.header-line {
    height: 6px;
    width: 10%;
    float: left;
    margin: 0;
    position: relative
}
.header-line div {
    position: absolute;
    top: 70px;
    left: 15px;
    font-weight: 600;
    color: #fff
}
.header-line div span {
    font-weight: 400;
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6)
}

/* 11. Spec Buttons */
.btn {
    border-radius: 3px
}
.float-e-margins .btn {
    margin-bottom: 5px
}
.btn-primary.btn-outline {
    color: #34495e
}
.btn-primary2.btn-outline {
    color: #9b59b6
}
.btn-success.btn-outline {
    color: #1ab394
}
.btn-info.btn-outline {
    color: #3498db
}
.btn-warning.btn-outline {
    color: #ffb606
}
.btn-warning2.btn-outline {
    color: #e67e22
}
.btn-danger.btn-outline {
    color: #e74c3c
}
.btn-danger2.btn-outline {
    color: #c0392b
}
.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
    color: #fff
}
.btn-primary {
    background-color: #34495e;
    border-color: #34495e;
    color: #fff
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.dropdown.show .dropdown-toggle.btn-primary {
    background-color: #3f5872;
    border-color: #3f5872;
    color: #fff
}
.btn-primary:active,
.btn-primary.active,
.dropdown.show .dropdown-toggle.btn-primary {
    background-image: none
}
.btn-primary.disabled,
.btn-primary.disabled:hover,
.btn-primary.disabled:focus,
.btn-primary.disabled:active,
.btn-primary.disabled.active,
.btn-primary[disabled],
.btn-primary[disabled]:hover,
.btn-primary[disabled]:focus,
.btn-primary[disabled]:active,
.btn-primary.active[disabled],
fieldset[disabled] .btn-primary,
fieldset[disabled] .btn-primary:hover,
fieldset[disabled] .btn-primary:focus,
fieldset[disabled] .btn-primary:active,
fieldset[disabled] .btn-primary.active {
    background-color: #293a4a;
    border-color: #293a4a
}
.btn-primary2 {
    background-color: #9b59b6;
    border-color: #9b59b6;
    color: #fff
}
.btn-primary2:hover,
.btn-primary2:focus,
.btn-primary2:active,
.btn-primary2.active,
.dropdown.show .dropdown-toggle.btn-primary2 {
    background-color: #a86ebf;
    border-color: #a86ebf;
    color: #fff
}
.btn-primary2:active,
.btn-primary2.active,
.dropdown.show .dropdown-toggle.btn-primary2 {
    background-image: none
}
.btn-primary2.disabled,
.btn-primary2.disabled:hover,
.btn-primary2.disabled:focus,
.btn-primary2.disabled:active,
.btn-primary2.disabled.active,
.btn-primary2[disabled],
.btn-primary2[disabled]:hover,
.btn-primary2[disabled]:focus,
.btn-primary2[disabled]:active,
.btn-primary2.active[disabled],
fieldset[disabled] .btn-primary2,
fieldset[disabled] .btn-primary2:hover,
fieldset[disabled] .btn-primary2:focus,
fieldset[disabled] .btn-primary2:active,
fieldset[disabled] .btn-primary2.active {
    background-color: #8c49a7;
    border-color: #8c49a7
}
.btn-success {
    background-color: #1ab394;
    border-color: #1ab394;
    color: #fff
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.dropdown.show .dropdown-toggle.btn-success {
    background-color: #1ab349;
    border-color: #1ab394;
    color: #fff;
}
.btn-success:active,
.btn-success.active,
.dropdown.show .dropdown-toggle.btn-success {
    background-image: none
}
.btn-success.disabled,
.btn-success.disabled:hover,
.btn-success.disabled:focus,
.btn-success.disabled:active,
.btn-success.disabled.active,
.btn-success[disabled],
.btn-success[disabled]:hover,
.btn-success[disabled]:focus,
.btn-success[disabled]:active,
.btn-success.active[disabled],
fieldset[disabled] .btn-success,
fieldset[disabled] .btn-success:hover,
fieldset[disabled] .btn-success:focus,
fieldset[disabled] .btn-success:active,
fieldset[disabled] .btn-success.active {
    background-color: #56b22b;
    border-color: #56b22b
}
.btn-info {
    background-color: #3498db;
    border-color: #3498db;
    color: #fff
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.dropdown.show .dropdown-toggle.btn-info {
    background-color: #4ea5e0;
    border-color: #4ea5e0;
    color: #fff
}
.btn-info:active,
.btn-info.active,
.dropdown.show .dropdown-toggle.btn-info {
    background-image: none
}
.btn-info.disabled,
.btn-info.disabled:hover,
.btn-info.disabled:focus,
.btn-info.disabled:active,
.btn-info.disabled.active,
.btn-info[disabled],
.btn-info[disabled]:hover,
.btn-info[disabled]:focus,
.btn-info[disabled]:active,
.btn-info.active[disabled],
fieldset[disabled] .btn-info,
fieldset[disabled] .btn-info:hover,
fieldset[disabled] .btn-info:focus,
fieldset[disabled] .btn-info:active,
fieldset[disabled] .btn-info.active {
    background-color: #2489cc;
    border-color: #2489cc
}
.btn-secondary {
    background-color: #fff;
    border-color: #eaeaea;
    color: #6a6c6f
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.dropdown.show .dropdown-toggle.btn-secondary {
    background-color: #fff;
    border-color: #e0e0e0;
    color: #606265
}
.btn-secondary:active,
.btn-secondary.active,
.dropdown.show .dropdown-toggle.btn-secondary {
    background-image: none
}
.btn-secondary.disabled,
.btn-secondary.disabled:hover,
.btn-secondary.disabled:focus,
.btn-secondary.disabled:active,
.btn-secondary.disabled.active,
.btn-secondary[disabled],
.btn-secondary[disabled]:hover,
.btn-secondary[disabled]:focus,
.btn-secondary[disabled]:active,
.btn-secondary.active[disabled],
fieldset[disabled] .btn-secondary,
fieldset[disabled] .btn-secondary:hover,
fieldset[disabled] .btn-secondary:focus,
fieldset[disabled] .btn-secondary:active,
fieldset[disabled] .btn-secondary.active {
    background-color: #e4ebee;
    border-color: #e4ebee
}
.btn-warning {
    background-color: #ffb606;
    border-color: #ffb606;
    color: #fff
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.dropdown.show .dropdown-toggle.btn-warning {
    background-color: #ffbf25;
    border-color: #ffbf25;
    color: #fff
}
.btn-warning:active,
.btn-warning.active,
.dropdown.show .dropdown-toggle.btn-warning {
    background-image: none
}
.btn-warning.disabled,
.btn-warning.disabled:hover,
.btn-warning.disabled:focus,
.btn-warning.disabled:active,
.btn-warning.disabled.active,
.btn-warning[disabled],
.btn-warning[disabled]:hover,
.btn-warning[disabled]:focus,
.btn-warning[disabled]:active,
.btn-warning.active[disabled],
fieldset[disabled] .btn-warning,
fieldset[disabled] .btn-warning:hover,
fieldset[disabled] .btn-warning:focus,
fieldset[disabled] .btn-warning:active,
fieldset[disabled] .btn-warning.active {
    background-color: #e6a300;
    border-color: #e6a300
}
.btn-warning2 {
    background-color: #e67e22;
    border-color: #e67e22;
    color: #fff
}
.btn-warning2:hover,
.btn-warning2:focus,
.btn-warning2:active,
.btn-warning2.active,
.dropdown.show .dropdown-toggle.btn-warning2 {
    background-color: #e98e3d;
    border-color: #e98e3d;
    color: #fff
}
.btn-warning2:active,
.btn-warning2.active,
.dropdown.show .dropdown-toggle.btn-warning2 {
    background-image: none
}
.btn-warning2.disabled,
.btn-warning2.disabled:hover,
.btn-warning2.disabled:focus,
.btn-warning2.disabled:active,
.btn-warning2.disabled.active,
.btn-warning2[disabled],
.btn-warning2[disabled]:hover,
.btn-warning2[disabled]:focus,
.btn-warning2[disabled]:active,
.btn-warning2.active[disabled],
fieldset[disabled] .btn-warning2,
fieldset[disabled] .btn-warning2:hover,
fieldset[disabled] .btn-warning2:focus,
fieldset[disabled] .btn-warning2:active,
fieldset[disabled] .btn-warning2.active {
    background-color: #d26f18;
    border-color: #d26f18
}
.btn-danger {
    background-color: #e74c3c;
    border-color: #e74c3c;
    color: #fff
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.dropdown.show .dropdown-toggle.btn-danger {
    background-color: #ea6557;
    border-color: #ea6557;
    color: #fff
}
.btn-danger:active,
.btn-danger.active,
.dropdown.show .dropdown-toggle.btn-danger {
    background-image: none
}
.btn-danger.disabled,
.btn-danger.disabled:hover,
.btn-danger.disabled:focus,
.btn-danger.disabled:active,
.btn-danger.disabled.active,
.btn-danger[disabled],
.btn-danger[disabled]:hover,
.btn-danger[disabled]:focus,
.btn-danger[disabled]:active,
.btn-danger.active[disabled],
fieldset[disabled] .btn-danger,
fieldset[disabled] .btn-danger:hover,
fieldset[disabled] .btn-danger:focus,
fieldset[disabled] .btn-danger:active,
fieldset[disabled] .btn-danger.active {
    background-color: #e43321;
    border-color: #e43321
}
.btn-danger2 {
    background-color: #c0392b;
    border-color: #c0392b;
    color: #fff
}
.btn-danger2:hover,
.btn-danger2:focus,
.btn-danger2:active,
.btn-danger2.active,
.dropdown.show .dropdown-toggle.btn-danger2 {
    background-color: #d24637;
    border-color: #d24637;
    color: #fff
}
.btn-danger2:active,
.btn-danger2.active,
.dropdown.show .dropdown-toggle.btn-danger2 {
    background-image: none
}
.btn-danger2.disabled,
.btn-danger2.disabled:hover,
.btn-danger2.disabled:focus,
.btn-danger2.disabled:active,
.btn-danger2.disabled.active,
.btn-danger2[disabled],
.btn-danger2[disabled]:hover,
.btn-danger2[disabled]:focus,
.btn-danger2[disabled]:active,
.btn-danger2.active[disabled],
fieldset[disabled] .btn-danger2,
fieldset[disabled] .btn-danger2:hover,
fieldset[disabled] .btn-danger2:focus,
fieldset[disabled] .btn-danger2:active,
fieldset[disabled] .btn-danger2.active {
    background-color: #a73225;
    border-color: #a73225
}
.btn-link {
    color: inherit
}
.btn-link:hover,
.btn-link:focus,
.btn-link:active,
.btn-link.active,
.dropdown.show .dropdown-toggle.btn-link {
    color: #6a6c6f
}
.btn-link:active,
.btn-link.active,
.dropdown.show .dropdown-toggle.btn-link {
    background-image: none
}
.btn-link.disabled,
.btn-link.disabled:hover,
.btn-link.disabled:focus,
.btn-link.disabled:active,
.btn-link.disabled.active,
.btn-link[disabled],
.btn-link[disabled]:hover,
.btn-link[disabled]:focus,
.btn-link[disabled]:active,
.btn-link.active[disabled],
fieldset[disabled] .btn-link,
fieldset[disabled] .btn-link:hover,
fieldset[disabled] .btn-link:focus,
fieldset[disabled] .btn-link:active,
fieldset[disabled] .btn-link.active {
    color: #9d9fa2
}
.btn-outline {
    color: inherit;
    background-color: transparent;
    transition: all .5s
}
.btn-xs {
    border-radius: 3px;
    font-size: 11px;
    line-height: 1.5;
    padding: 1px 7px
}
.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.428571429
}
.btn-circle.btn-xs {
    width: 20px;
    height: 20px;
    padding: 4px 8px;
    border-radius: 25px;
    font-size: 10px;
    line-height: 1
}
.btn-circle.btn-lg {
    width: 50px;
    height: 50px;
    padding: 10px 16px;
    border-radius: 25px;
    font-size: 18px;
    line-height: 1.33
}
.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 24px;
    line-height: 1.33
}
.list .list-item-container {
    float: left
}
.list-item-container div:first-child {
    border-top: 0
}
.list .list-item .list-item-content p {
    margin-bottom: 3px;
    margin-top: 0
}
.list .list-item-date {
    color: #aaa;
    font-size: 10px;
    text-align: center
}
.list .list-item {
    float: left;
    overflow-x: hidden;
    position: relative;
    width: 100%;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid #eaeaea
}
.list .list-item-container-small {
    min-width: 80px;
    text-align: center
}
.list .list-item .list-item-content .list-item-right {
    height: 100%;
    padding: 0 10px;
    position: absolute;
    right: 0;
    top: 0
}
.list .list-item .list-item-content h1,
.list .list-item .list-item-content h2,
.list .list-item .list-item-content h3,
.list .list-item .list-item-content h4,
.list .list-item .list-item-content h5,
.list .list-item .list-item-content h6,
.list .list-item .list-item-content .list-item-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    margin: 0
}
a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
    background-color: #1ab394;
    border-color: #1ab394;
    color: #fff!important;
}
.noradiusbt {
    border-radius: 0 !important;
}
.btn-rounded {
    border-radius: 50px;
}
.btn-mint-basic, .btn-mint, .btn-mint:focus, .btn-mint.disabled:hover, .btn-mint:disabled:hover, .btn-hover-mint:hover, .btn-hover-mint:active, .btn-hover-mint.active, .btn.btn-active-mint:active, .btn.btn-active-mint.active, .dropdown.show>.btn.btn-active-mint, .btn-group.dropdown.show .dropdown-toggle.btn.btn-active-mint {
    background-color: #249e92;
    border-color: #26a69a;
    color: #fff;
}
.btn-mint:hover, .btn-mint:active, .btn-mint.active, .dropdown.show>.dropdown-toggle.btn-mint {
    background-color: #1d8177;
    border-color: #1f897f;
    color: #fff;
}
.btn-pink-basic, .btn-pink, .btn-pink:focus, .btn-pink.disabled:hover, .btn-pink:disabled:hover, .btn-hover-pink:hover, .btn-hover-pink:active, .btn-hover-pink.active, .btn.btn-active-pink:active, .btn.btn-active-pink.active, .dropdown.show>.btn.btn-active-pink, .btn-group.dropdown.show .dropdown-toggle.btn.btn-active-pink {
    background-color: #eb3774;
    border-color: #ec407a;
    color: #fff;
}
.btn-pink:hover, .btn-pink:active, .btn-pink.active, .dropdown.show>.dropdown-toggle.btn-pink {
    background-color: #e7175d;
    border-color: #e92063;
    color: #fff;
}
.btn-purple-basic, .btn-purple, .btn-purple:focus, .btn-purple.disabled:hover, .btn-purple:disabled:hover, .btn-hover-purple:hover, .btn-hover-purple:active, .btn-hover-purple.active, .btn.btn-active-purple:active, .btn.btn-active-purple.active, .dropdown.show>.btn.btn-active-purple, .btn-group.dropdown.show .dropdown-toggle.btn.btn-active-purple {
    background-color: #b761c5;
    border-color: #ba68c8;
    color: #fff;
}
.btn-dark-basic, .btn-dark, .btn-dark:focus, .btn-dark.disabled:hover, .btn-dark:disabled:hover, .btn-hover-dark:hover, .btn-hover-dark:active, .btn-hover-dark.active, .btn.btn-active-dark:active, .btn.btn-active-dark.active, .dropdown.show>.btn.btn-active-dark, .btn-group.dropdown.show .dropdown-toggle.btn.btn-active-dark {
    background-color: #222d32;
    border-color: #263238;
    color: #fff;
}

.btn-dark:hover, .btn-dark:active, .btn-dark.active, .dropdown.show>.dropdown-toggle.btn-dark {
    background-color: #131a1d;
    border-color: #181f23;
    color: #fff;
}
.progress-bar-purple {
    background-color: #ba68c8;
}
.progress-bar-pink {
    background-color: #ec407a;
}
.progress-bar-dark {
    background-color: #263238;
}
.progress-bar-primary {
    background-color: #42a5f5;
}
.progress-bar-mint {
    background-color: #26a69a;
}
.carousel-control.left {
    background: transparent !important;
}
.carousel-control.right {
    background: transparent !important;
}
.text-main {
    
}
.btn-purple:hover, .btn-purple:active, .btn-purple.active, .dropdown.show>.dropdown-toggle.btn-purple {
    background-color: #ab46bc;
    border-color: #ae4ebe;
    color: #fff;
}
.list-group-item-heading {
    margin-top: 10px
}
.list-group-item-text {
    margin: 0 0 10px;
    color: inherit;
    line-height: inherit
}
.list-group-item {
    background-color: inherit;
    border: 1px solid #f1f3f6;
    display: block;
    margin-bottom: -1px;
    padding: 10px 15px;
    position: relative
}
.colorplate1 {
    background-color: #34495e !important;
    color: #fff !important;
}
.colorplate1 .small,
.colorplate1 small,
.colorplate1 .text-muted {
    color: rgba(255, 255, 255, 0.88) !important;
}
.colorplate1 .text-success,
.colorplate1 .fa.text-success {
    color: #86efac !important;
}
.colorplate2 {
    background-color: #00bcd4 !important;
    color: #fff !important;
}
.colorplate2 .small,
.colorplate2 small,
.colorplate2 .text-muted {
    color: rgba(255, 255, 255, 0.9) !important;
}
.colorplate2 .text-success,
.colorplate2 .fa.text-success {
    color: #ecfdf5 !important;
}
.colorplate3 {
    background-color: #ba68c8 !important;
    color: #fff !important;
}
.colorplate3 .small,
.colorplate3 small,
.colorplate3 .text-muted {
    color: rgba(255, 255, 255, 0.9) !important;
}
.colorplate3 .text-success,
.colorplate3 .fa.text-success {
    color: #d9f99d !important;
}
.colorplate4 {
    background-color: #337ab7 !important;
    color: #fff !important;
}
.colorplate4 .small,
.colorplate4 small,
.colorplate4 .text-muted {
    color: rgba(255, 255, 255, 0.9) !important;
}
.colorplate4 .text-success,
.colorplate4 .fa.text-success {
    color: #bbf7d0 !important;
}
.colorplate1 strong,
.colorplate2 strong,
.colorplate3 strong,
.colorplate4 strong {
    color: #fff !important;
}
.listitemactivty {
    padding: 15px 15px !important;
    border-bottom-width: 6px;
    border-top: 0 solid !important;
    border-left: 0 solid !important;
    border-right: 0 solid !important;
}
.no-padding .list-group-item {
    border-left: none;
    border-right: 0;
    border-bottom: 0
}
.no-padding .list-group-item:first-child {
    border-left: none;
    border-right: 0;
    border-bottom: 0;
    border-top: 0
}
.no-padding .list-group {
    margin-bottom: 0
}

/* 12. Spec Panel */
.specpanel>.card-header {
    color: inherit;
    font-weight: 600;
    padding: 10px 4px;
    transition: all .3s;
    border: 1px solid transparent
}
.specpanel .hbuilt.card-header {
    border-bottom: 0
}
.specpanel>.card-footer,
.specpanel>.panel-section {
    color: inherit;
    border: 1px solid var(--spec-panel-card-border, #eaeaea);
    border-top: 0;
    font-size: 90%;
    background: #f7f9fa;
    padding: 10px 15px
}
.specpanel.panel-collapse>.card-header,
.specpanel .hbuilt {
    background: #fff;
    border-color: #eaeaea;
    border: 1px solid #eaeaea;
    padding: 10px 10px;
    border-radius: 2px
}
/* Panel body: only direct children get the solid surface; nested bodies (e.g. tabs) stay on panel canvas */
.specpanel .card-body {
    border-radius: 2px;
    padding: 20px;
    position: relative;
}
.specpanel > .card-body {
    background: #fff;
    border: 1px solid var(--spec-panel-card-border, #eaeaea);
}
.specpanel .tab-content .card-body {
    background: transparent;
    border: none;
    box-shadow: none;
}
.specpanel.panel-group .card-body:first-child {
    border-top: 1px solid var(--spec-panel-card-border, #eaeaea)
}
.specpanel.panel-group .card-body {
    border-top: 0
}
.panel-collapse .card-body {
    border: 0
}
.stat-data {
    border-bottom: 1px solid #dadada;
}
.specpanel {
    border: 0;
    box-shadow: none;
    margin-bottom: 25px
}
.graph2under {
    background: #f1f3f6;
    padding: 20px;
    margin-top: 20px;
}
.graph1under {
    background: #f7f9fa;
    padding: 20px;
    margin-top: 20px;
}
.panel-tools {
    display: inline-block;
    float: right;
    margin-top: 0;
    padding: 0;
    position: relative
}
.specpanel .alert {
    margin-bottom: 0;
    border-radius: 0;
    border: 1px solid #eaeaea;
    border-bottom: 0
}
.panel-tools a {
    margin-left: 5px;
    color: #9d9fa2;
    cursor: pointer
}
.specpanel.hgreen .card-body {
    border-top: 2px solid #1ab394
}
.specpanel.hblue .card-body {
    border-top: 2px solid #3498db
}
.specpanel.hyellow .card-body {
    border-top: 2px solid #ffb606
}
.specpanel.hviolet .card-body {
    border-top: 2px solid #9b59b6
}
.specpanel.horange .card-body {
    border-top: 2px solid #e67e22
}
.specpanel.hred .card-body {
    border-top: 2px solid #e74c3c
}
.specpanel.hreddeep .card-body {
    border-top: 2px solid #c0392b
}
.specpanel.hnavyblue .card-body {
    border-top: 2px solid #34495e
}
.specpanel.hbggreen .card-body {
    background: #1ab394;
    color: #fff;
    border: 0
}
.specpanel.hbgblue .card-body {
    background: #3498db;
    color: #fff;
    border: 0
}
.specpanel.hbgyellow .card-body {
    background: #ffb606;
    color: #fff;
    border: 0
}
.specpanel.hbgviolet .card-body {
    background: #9b59b6;
    color: #fff;
    border: 0
}
.specpanel.hbgorange .card-body {
    background: #e67e22;
    color: #fff;
    border: 0
}
.specpanel.hbgred .card-body {
    background: #e74c3c;
    color: #fff;
    border: 0
}
.specpanel.hbgreddeep .card-body {
    background: #c0392b;
    color: #fff;
    border: 0
}
.specpanel.hbgnavyblue .card-body {
    background: #34495e;
    color: #fff;
    border: 0
}
.panel-group .card-header {
    background-color: #f7f9fa
}
.small-header .specpanel {
    margin-bottom: 0
}
.small-header {
    padding: 0!important
}
.small-header .card-body {
    padding: 15px 25px;
    border-right: 0;
    border-left: none;
    border-top: 0;
    border-radius: 0
}
.card-body h5,
.card-body h4 {
    font-weight: 600
}
.small-header .card-body h2 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0
}
.small-header .card-body small {
    color: #838589
}
.hbreadcrumb {
    padding: 2px 0;
    margin-top: 6px;
    margin-bottom: 0;
    list-style: none;
    background-color: #fff;
    font-size: 11px
}
.hbreadcrumb>li {
    display: inline-block
}
.hbreadcrumb>li+li:before {
    content: "/";
    padding: 0 0.35em;
    color: #34495e
}
.hbreadcrumb>.active {
    color: #9d9fa2
}
.wrapper {
    padding: 10px 20px
}
.specpanel.collapsed .card-body,
.specpanel.collapsed .card-footer {
    display: none
}
.specpanel.collapsed .fa.fa-chevron-up:before {
    content: "\f078"
}
.specpanel.collapsed .fa.fa-chevron-down:before {
    content: "\f077"
}
.specpanel.collapsed.panel-collapse .card-body {
    border-width: 0 1px 1px 1px;
    border-color: #eaeaea;
    border-style: solid
}
.specpanel.collapsed .hbuilt.card-header {
    border-bottom: 1px solid #eaeaea
}
body.fullscreen-panel-mode {
    overflow-y: hidden
}
.specpanel.fullscreen {
    z-index: 2030;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    margin-bottom: 0
}
.specpanel.fullscreen .showhide {
    display: none
}
.specpanel.fullscreen .card-body {
    min-height: calc(100% - 77px)
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
    border: 1px solid #eaeaea;
    border-bottom-color: transparent
}
.nav-tabs {
    border-bottom: 1px solid #eaeaea
}
.tab-pane .card-body {
    border-top: 0
}
.tabs-left .tab-pane .card-body,
.tabs-right .tab-pane .card-body {
    border-top: 1px solid #eaeaea
}
.nav-tabs>li a:hover {
    background: transparent;
    border-color: transparent
}
.tabs-below>.nav-tabs,
.tabs-right>.nav-tabs,
.tabs-left>.nav-tabs {
    border-bottom: 0
}
.tabs-left .card-body {
    position: static
}
.tabs-left>.nav-tabs,
.tabs-right>.nav-tabs {
    width: 20%
}
.tabs-left .card-body {
    width: 80%;
    margin-left: 20%
}
.tabs-right .card-body {
    width: 80%;
    margin-right: 20%
}
.tab-content>.tab-pane,
.pill-content>.pill-pane {
    display: none
}
.tab-content>.active,
.pill-content>.active {
    display: block
}
.tabs-below>.nav-tabs {
    border-top: 1px solid #eaeaea
}
.tabs-below>.nav-tabs>li {
    margin-top: -1px;
    margin-bottom: 0
}
.tabs-below>.nav-tabs>li>a {
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px
}
.tabs-below>.nav-tabs>li>a:hover,
.tabs-below>.nav-tabs>li>a:focus {
    border-top-color: #eaeaea;
    border-bottom-color: transparent
}
.tabs-left>.nav-tabs>li,
.tabs-right>.nav-tabs>li {
    float: none
}
.tabs-left>.nav-tabs>li>a,
.tabs-right>.nav-tabs>li>a {
    min-width: 74px;
    margin-right: 0;
    margin-bottom: 3px
}
.tabs-left>.nav-tabs {
    float: left;
    margin-right: 19px
}
.tabs-left>.nav-tabs>li>a {
    margin-right: -1px;
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px
}
.tabs-left>.nav-tabs .active>a,
.tabs-left>.nav-tabs .active>a:hover,
.tabs-left>.nav-tabs .active>a:focus {
    border-color: #eaeaea transparent #eaeaea #eaeaea;
    *border-right-color: #fff
}
.tabs-right>.nav-tabs {
    float: right;
    margin-left: 19px
}
.tabs-right>.nav-tabs>li>a {
    margin-left: -1px;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0
}
.tabs-right>.nav-tabs>li>a:hover,
.tabs-right>.nav-tabs>li>a:focus {
    border-color: #eee #eee #eee #ddd
}
.tabs-right>.nav-tabs .active>a,
.tabs-right>.nav-tabs .active>a:hover,
.tabs-right>.nav-tabs .active>a:focus {
    border-color: #eaeaea #eaeaea #eaeaea transparent;
    *border-left-color: #fff;
    z-index: 1
}
.tooltip-inner {
    background-color: #34495e
}
.tooltip.top .tooltip-arrow {
    border-top-color: #34495e
}
.tooltip.right .tooltip-arrow {
    border-right-color: #34495e
}
.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #34495e
}
.tooltip.left .tooltip-arrow {
    border-left-color: #34495e
}
.stats h4,
h5,
h6 {
    margin: 5px 0
}
.stats-title h4 {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600
}
.stats-box div {
    display: inline-block;
    vertical-align: middle
}
.stats-label {
    line-height: 1.2
}
.stats-label small {
    font-size: 80%;
    line-height: .6
}
.stats-box-value {
    background: #fff
}
.stats-box-detail {
    background: #34495e;
    color: #fff;
    position: relative
}
.plan-box {
    -ms-transform: scale(0.85);
    -webkit-transform: scale(0.85);
    transform: scale(0.85);
    opacity: .7;
    transition: all .2s ease 0s
}
.plan-box.active,
.plan-box:hover {
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
}
.chat-avatar {
    width: 36px;
    height: 36px;
    float: left;
    margin-right: 10px;
    border-radius: 50%
}
.chat-user-name {
    padding: 10px
}
.chat-user {
    padding: 8px 10px;
    border-bottom: 1px solid #e7eaec
}
.chat-user a {
    color: inherit
}
.chat-view {
    z-index: 1070
}
.chat-users,
.chat-statistic {
    margin-left: -30px
}
@media(max-width:992px) {
    .chat-users, .chat-statistic {
        margin-left: 0
    }
}
.chat-view .ibox-content {
    padding: 0
}
.chat-message {
    padding: 10px 20px
}
.message-avatar {
    height: 36px;
    width: 36px;
    border-radius: 50%;
    margin-top: 1px
}
.chat-discussion .chat-message .message-avatar {
    float: left;
    margin-right: 10px
}
.chat-discussion .message {
    background-color: #f7f8fa;
    text-align: left;
    display: block;
    padding: 10px 20px;
    position: relative;
    border-radius: 4px
}
.chat-discussion .chat-message .message-date {
    float: right
}
.chat-discussion .chat-message .message {
    text-align: left;
    margin-left: 55px
}
.message-date {
    font-size: 10px;
    color: #888
}
.message-content {
    display: block
}
.chat-users,
.chat-discussion {
    overflow-y: auto;
    height: 500px
}
.chat-discussion .chat-message.left .message-date {
    float: right
}
.chat-discussion .chat-message.right .message-date {
    float: left
}
.chat-discussion .chat-message.left .message {
    text-align: left;
    margin-left: 55px
}
.chat-discussion .chat-message.right .message {
    text-align: right;
    margin-right: 55px
}
.chat-discussion .chat-message.left .message-avatar {
    float: left;
    margin-right: 10px
}
.chat-discussion .chat-message.right .message-avatar {
    float: right;
    margin-left: 10px
}
.chat-discussion {
    padding: 15px 10px
}
.projects .project-label {
    font-weight: 600
}
.projects .specpanel .card-body {
    border-bottom: 0
}
.projects .specpanel:last-child .card-body {
    border-bottom: 1px solid #eaeaea
}
.projects .specpanel:last-child .card-body {
    border-bottom: 1px solid #eaeaea
}
.projects .specpanel h4 a {
    color: #6a6c6f
}
.projects .project-people img {
    width: 28px;
    height: 28px;
    margin-left: 2px;
    margin-bottom: 4px
}
.projects .project-info {
    text-align: right
}
@media(max-width:768px) {
    .projects .project-info {
        text-align: left
    }
}
.social-board .social-profile img {
    height: 42px;
    width: 42px;
    border-radius: 50%
}
.social-board .social-profile h5 {
    margin-top: 5px;
    margin-bottom: 0
}
.social-board .social-form {
    margin: 10px 0
}
.social-board .social-form input {
    font-size: 12px;
    padding: 2px 12px;
    height: 28px
}
.social-talk .social-profile img {
    height: 32px;
    width: 32px;
    border-radius: 50%
}
.social-talk .text-muted {
    color: #aaacae
}
.social-talk {
    margin-bottom: 10px
}
.social-talk .social-content {
    margin-top: 2px
}
.blog-box p {
    font-size: 12px
}
.blog-box h4 {
    font-weight: bold;
    margin-top: 0
}
.blog-box .card-header {
    background: #fff;
    border-top: 1px solid #eaeaea;
    border-left: 1px solid #eaeaea;
    border-right: 1px solid #eaeaea;
    border-radius: 2px;
    padding: 10px 20px;
    position: relative;
    font-weight: 500
}
.blog-box .card-footer {
    color: #909295
}
.blog-box .card-header .media-body {
    line-height: 16px
}
.blog-box .card-header .media img {
    width: 32px;
    height: 32px;
    border-radius: 50%
}
.blog-box .card-header .media-body h5 {
    margin-top: 0
}
.blog-box .panel-image {
    border-left: 1px solid #eaeaea;
    border-right: 1px solid #eaeaea;
    position: relative
}
.blog-box .panel-image .title {
    position: absolute;
    bottom: 10px;
    padding: 0 20px;
    color: #fff
}
.blog-box .panel-image .title h4 {
    margin-bottom: 0
}
.blog-box .panel-image .title a {
    color: #fff!important
}
.blog-article-box .card-header {
    background: #fff;
    border-top: 1px solid #eaeaea;
    border-left: 1px solid #eaeaea;
    border-right: 1px solid #eaeaea;
    border-radius: 2px;
    padding: 80px 10px;
    position: relative;
    font-weight: 500;
    text-align: center
}
.blog-article-box .card-header h4 {
    font-size: 32px;
    font-weight: 700;
    color: #515355
}
.blog-article-box .card-body {
    padding: 50px 70px
}
.blog-article-box .card-body p {
    font-family: "Times New Roman", Georgia, Serif;
    font-size: 20px;
    line-height: 32px;
    color: #515355
}
@media(max-width:768px) {
    .blog-article-box .card-body {
        padding: 10px 20px
    }
    .blog-article-box .card-body p {
        font-family: "Times New Roman", Georgia, Serif;
        font-size: 16px;
        line-height: 28px
    }
    .blog-article-box .card-header {
        padding: 20px 20px
    }
}
.forum-box .card-body {
    border-bottom: 0
}
.forum-box .card-body:last-child {
    border-bottom: 1px solid #eaeaea
}
.forum-box .forum-heading h4 {
    margin-bottom: 3px;
    font-weight: 600;
    margin-top: 5px;
    display: inline
}
.forum-box .forum-heading .label {
    margin-right: 5px
}
.forum-box .forum-heading .desc {
    color: #909295;
    font-size: 12px
}
.forum-box .card-header {
    border: 1px solid #eaeaea;
    border-bottom: 0;
    font-size: 90%;
    background: #f7f9fa;
    padding: 10px 20px
}
.forum-box .forum-info {
    text-align: right;
    line-height: 20px
}
.forum-box .forum-info .number {
    display: block;
    font-weight: 600;
    font-size: 22px;
    margin-top: 5px
}
.forum-box .forum-info span {
    font-size: 12px
}
.forum-box .card-body .media-image {
    text-align: center;
    margin-right: 10px;
    min-width: 100px
}
.forum-box .card-body .media img {
    margin-top: 10px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    margin-bottom: 10px
}
.forum-box .author-info {
    font-size: 12px
}
.forum-box .forum-comments {
    border: 1px solid #eaeaea;
    border-left: none;
    border-right: 0;
    background: #f7f9fa;
    margin-top: 20px;
    padding: 10px 15px
}
.forum-box .forum-comments .media img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-top: 0;
    margin-bottom: 10px
}
.forum-box .forum-comments form {
    margin-top: 10px
}
@media(max-width:768px) {
    .forum-box .forum-info {
        text-align: left
    }
}
ul.mailbox-list,
ul.h-list {
    list-style: none;
    padding: 0
}
ul.mailbox-list li a,
ul.h-list li a {
    padding: 10px 15px;
    display: block
}
ul.mailbox-list li a i,
ul.h-list li a i {
    margin-right: 6px;
    display: inline-block
}
ul.mailbox-list li.active a,
ul.h-list li.active a {
    background: #f7f9fa;
    border: 1px solid #e4e5e7;
    font-weight: 600;
    border-radius: 1px
}
ul.mailbox-list li:hover a,
ul.h-list li:hover a {
    font-weight: 600
}
.table-mailbox .radio,
.table-mailbox .checkbox {
    margin: 0
}
.table-mailbox .radio label,
.table-mailbox .checkbox label {
    cursor: default
}
.table-mailbox tr.unread td a {
    font-weight: 600
}
.table-mailbox tr td span.label {
    margin-left: 10px
}
.table-mailbox tr:first-child td {
    border-top: 0
}
.table-mailbox tr td:first-child {
    width: 33px;
    padding-right: 0
}
.mailbox-pagination {
    text-align: right
}
@media(max-width:768px) {
    .mailbox-pagination {
        text-align: left
    }
}
.email-compose .note-editor {
    border: 0
}
.email-compose .note-editor .note-editable {
    padding: 15px 25px
}
.email-compose .note-toolbar {
    padding: 5px 15px
}
.note-popover .popover .popover-content>.btn-group,
.note-toolbar>.btn-group {
    margin-bottom: 5px
}
.note-editor .note-toolbar {
    background-color: #f7f9fa
}
.contact-panel h3 {
    margin-bottom: 2px
}
.contact-panel h3 a {
    color: inherit
}
.contact-panel p {
    font-size: 11px;
    line-height: 16px;
    margin-bottom: 0
}
.contact-panel img {
    width: 76px;
    height: 76px
}
.contact-footer {
    padding: 0 15px
}
.contact-stat span {
    font-size: 10px;
    font-weight: 500;
    display: block;
    color: #9d9fa2;
    text-transform: uppercase
}
.contact-stat {
    padding: 8px 0;
    text-align: center
}
.contact-panel:hover .card-body {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: pulse;
    -webkit-animation-name: pulse;
    z-index: 1
}
.specpanel .card-body.file-body {
    padding: 30px 0;
    text-align: center
}
.file-body i.fa {
    font-size: 56px
}
body.blank {
    background-color: #f1f3f6
}
.login-container {
    max-width: 420px;
    margin: auto;
    padding-top: 6%
}
.register-container {
    max-width: 720px;
    margin: auto;
    padding-top: 6%
}
.lock-container {
    max-width: 420px;
    margin: auto;
    padding-top: 6%
}
.error-container {
    max-width: 620px;
    margin: auto;
    padding-top: 6%
}
.big-icon {
    font-size: 120px
}
.error-container h1 {
    font-size: 44px
}
.back-link {
    float: left;
    width: 100%;
    margin: 10px
}
@media(max-width:420px) {
    .login-container, .lock-container {
        margin: auto 10px
    }
}
@media(max-width:720px) {
    .register-container {
        margin: auto 10px
    }
    .lock-container {
        padding-top: 15%
    }
}
@media(max-width:620px) {
    .error-container {
        margin: auto 10px
    }
}
@media(min-width:991px) {
    #notes {
        display: block;
        height: auto!important;
        visibility: visible
    }
}
#notes .card-body:first-child {
    border-top: 0
}
.note-content textarea {
    border: 0;
    width: 100%;
    padding: 0;
    min-height: 360px
}
.note-link h5 {
    margin-top: 0
}
.note-link:hover {
    background: #f7f9fa
}
.filter-item {
    margin-bottom: 0
}
.filter-item .card-body {
    padding: 10px 20px;
    border-bottom: 0
}
.filter-item a {
    color: #6a6c6f
}
.filter-item:last-child {
    border-bottom: 1px solid #eaeaea
}
.filter-item:hover .card-body,
.filter-item.active .card-body {
    background: #fafcfd;
    z-index: 100;
    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.175);
    -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.175);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.175)
}
.filter-item::selection .card-body {
    background: #fafcfd
}
.filter-item h4 {
    margin-bottom: 5px
}
.sweet-alert button {
    background-color: #34495e;
    color: white;
    border: 0;
    box-shadow: none;
    font-size: 17px;
    font-weight: 500;
    border-radius: 5px;
    padding: 10px 32px;
    margin: 26px 5px 0 5px;
    cursor: pointer
}
.sweet-alert button:focus {
    outline: 0;
    box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05)
}
.sweet-alert button:hover {
    background-color: #a1d9f2
}
.sweet-alert button:active {
    background-color: #81ccee
}
.sweet-alert button.cancel {
    background-color: #d0d0d0
}
.sweet-alert button.cancel:hover {
    background-color: #c8c8c8
}
.sweet-alert button.cancel:active {
    background-color: #b6b6b6
}
.sweet-alert p {
    font-size: 14px;
    font-weight: 400
}
.sweet-alert h2 {
    font-size: 26px
}
.sweet-alert {
    padding: 25px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 1 px rgba(0, 0, 0, 0.1), 0 2 px 4 px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 1 px rgba(0, 0, 0, 0.1), 0 2 px 4 px rgba(0, 0, 0, 0.2)
}
.cg-notify-message.spec-notify {
    background: #fff;
    padding: 0;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 1 px rgba(0, 0, 0, 0.1), 0 2 px 4 px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 1 px rgba(0, 0, 0, 0.1), 0 2 px 4 px rgba(0, 0, 0, 0.2);
    border: 0;
    margin-top: 30px;
    color: inherit
}
.spec-notify.alert-warning {
    border-left: 6px solid #ffb606
}
.spec-notify.alert-success {
    border-left: 6px solid #1ab394
}
.spec-notify.alert-danger {
    border-left: 6px solid #c0392b
}
.spec-notify.alert-info {
    border-left: 6px solid #3498db
}
#toast-container.toast-bottom-center>div,
#toast-container.toast-top-center>div {
    margin: 10px auto 0
}
#toast-container>.toast-info,
#toast-container>.toast-error,
#toast-container>.toast-warning,
#toast-container>.toast-success {
    background-image: none
}
#toast-container>div {
    background: #fff;
    padding: 20px;
    color: #6a6c6f;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
    opacity: 1
}
#toast-container>div:hover {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2)
}
.toast-close-button {
    color: #000;
    opacity: .2
}
.toast-info {
    background: #fff;
    border-left: 6px solid #3498db
}
.toast-success {
    background: #fff;
    border-left: 6px solid #1ab394
}
.toast-warning {
    background: #fff;
    border-left: 6px solid #ffb606
}
.toast-error {
    background: #fff;
    border-left: 6px solid #e74c3c
}
.toast-progress {
    opacity: .6
}
.toast-info .toast-progress {
    background-color: #3498db
}
.toast-success .toast-progress {
    background-color: #1ab394
}
.toast-warning .toast-progress {
    background-color: #ffb606
}
.toast-error .toast-progress {
    background-color: #e74c3c
}
.tour-backdrop {
    opacity: .5
}
.fc-state-default {
    background-color: #fff;
    background-image: none;
    background-repeat: repeat-x;
    box-shadow: none;
    color: inherit;
    text-shadow: none
}
.fc-state-default {
    border: 1px solid
}
.fc-button {
    color: inherit;
    border: 1px solid #eaeaea;
    cursor: pointer;
    display: inline-block;
    height: 1.9em;
    line-height: 1.9em;
    overflow: hidden;
    padding: 0 .6em;
    position: relative;
    white-space: nowrap
}
.fc-state-active {
    background-color: #34495e;
    border-color: #34495e;
    color: #fff
}
.fc-header-title h2 {
    font-size: 16px;
    font-weight: 600;
    color: inherit
}
.fc-content .fc-widget-header,
.fc-content .fc-widget-content {
    border-color: #eaeaea;
    font-weight: normal
}
.fc-border-separate tbody {
    background-color: #f8f8f8
}
.fc-state-highlight {
    background: none repeat scroll 0 0 #f1f3f6
}
.external-event {
    padding: 5px 10px;
    border-radius: 2px;
    cursor: pointer;
    margin-bottom: 5px
}
.fc-ltr .fc-event-hori.fc-event-end,
.fc-rtl .fc-event-hori.fc-event-start {
    border-radius: 2px
}
.fc-event,
.fc-agenda .fc-event-time,
.fc-event a {
    padding: 4px 6px;
    background-color: #34495e;
    border-color: #34495e
}
.fc-event-time,
.fc-event-title {
    color: #717171;
    padding: 0 1px
}
.ui-calendar .fc-event-time,
.ui-calendar .fc-event-title {
    color: #fff
}
.fc-view-container .fc-widget-header {
    background: #f7f8fa
}
.fc-widget-header .fc-day-header {
    padding: 12px 0
}
.fc-ltr .fc-basic-view .fc-day-number {
    text-align: center
}
.fc-basic-view td.fc-day-number,
.fc-basic-view td.fc-week-number span {
    padding: 6px
}
.fc-day-grid-event {
    margin: 2px 6px 0
}
.CodeMirror {
    border: 1px solid #eee;
    height: auto
}
.CodeMirror-scroll {
    overflow-y: hidden;
    overflow-x: auto
}
.flot-chart {
    display: block;
    height: 300px;
    position: relative
}
.flot-chart-content {
    width: 100%;
    height: 100%
}
.stats .flot-chart {
    height: 60px
}
.note-editor,
.note-editor.note-frame {
    border: 1px solid #eaeaea
}
.note-editor .note-toolbar {
    border-bottom: 1px solid #eaeaea
}
.note-editor .btn-secondary {
    border-color: #eaeaea
}
.note-editor .card-header {
    padding: 5px 10px
}
.airmode .note-editor {
    border: 0
}
.dd {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 20px
}
.dd-list {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none
}
.dd-list .dd-list {
    padding-left: 30px
}
.dd-collapsed .dd-list {
    display: none
}
.dd-item,
.dd-empty,
.dd-placeholder {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 20px;
    font-size: 13px;
    line-height: 20px
}
.tour-step-background {
    background: transparent;
    border: 3px dashed #1ab394;
}

/* Driver.js tour popover — light / dark (driver.css loads after style.css; body… beats .driver-popover) */
body.spec-dashboard-home:not(.spec-dashboard-dark) .driver-popover {
    color: #0f172a;
    background-color: #fff;
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.14);
    border-radius: 8px;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .driver-popover-title {
    color: #0f172a;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .driver-popover-description {
    color: #475569;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .driver-popover-close-btn {
    color: #94a3b8;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .driver-popover-close-btn:hover,
body.spec-dashboard-home:not(.spec-dashboard-dark) .driver-popover-close-btn:focus {
    color: #0f172a;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .driver-popover-progress-text {
    color: #64748b;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .driver-popover-footer button {
    background-color: #fff;
    color: #0f172a;
    border-color: var(--spec-panel-card-border);
    text-shadow: none;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .driver-popover-footer button:hover,
body.spec-dashboard-home:not(.spec-dashboard-dark) .driver-popover-footer button:focus {
    background-color: #f8fafc;
    border-color: rgba(148, 163, 184, 0.45);
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .driver-popover-arrow {
    border-color: #fff;
}

body.spec-dashboard-home.spec-dashboard-dark .driver-popover {
    color: var(--spec-dd-text);
    background-color: var(--spec-dd-elevated);
    border: 1px solid var(--spec-panel-card-border);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
    border-radius: 8px;
}
body.spec-dashboard-home.spec-dashboard-dark .driver-popover-title {
    color: #f8fafc;
}
body.spec-dashboard-home.spec-dashboard-dark .driver-popover-description {
    color: var(--spec-dd-muted);
}
body.spec-dashboard-home.spec-dashboard-dark .driver-popover-close-btn {
    color: var(--spec-dd-muted);
}
body.spec-dashboard-home.spec-dashboard-dark .driver-popover-close-btn:hover,
body.spec-dashboard-home.spec-dashboard-dark .driver-popover-close-btn:focus {
    color: #fff;
}
body.spec-dashboard-home.spec-dashboard-dark .driver-popover-progress-text {
    color: var(--spec-dd-muted);
}
body.spec-dashboard-home.spec-dashboard-dark .driver-popover-footer button {
    background-color: var(--spec-dd-surface);
    color: var(--spec-dd-text);
    border-color: var(--spec-panel-card-border);
    text-shadow: none;
}
body.spec-dashboard-home.spec-dashboard-dark .driver-popover-footer button:hover,
body.spec-dashboard-home.spec-dashboard-dark .driver-popover-footer button:focus {
    background-color: rgba(148, 163, 184, 0.12);
    border-color: rgba(167, 139, 250, 0.35);
    color: #fff;
}
body.spec-dashboard-home.spec-dashboard-dark .driver-popover-arrow {
    border-color: var(--spec-dd-elevated);
}

.dd-handle {
    display: block;
    margin: 5px 0;
    padding: 5px 10px;
    color: #eee;
    text-decoration: none;
    border-bottom: 5px solid #337ab7;
    background: #3498db;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.dd-handle span {
    font-weight: bold
}
.dd-handle:hover {
    background: #3498db;
    cursor: pointer;
    font-weight: bold;
}
.dd-handle:active {
    background: #337ab7;
    cursor: pointer;
    font-weight: bold;
}

.dd-item>button {
    display: block;
    position: relative;
    cursor: pointer;
    float: left;
    width: 25px;
    height: 20px;
    margin: 5px 0;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    border: 0;
    background: transparent;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    font-weight: bold
}
.dd-item>button:before {
    content: '+';
    display: block;
    position: absolute;
    width: 100%;
    text-align: center;
    text-indent: 0
}
.dd-item>button[data-action="collapse"]:before {
    content: '-'
}
#nestable2 .dd-item>button {
    font-family: FontAwesome;
    height: 34px;
    width: 33px;
    color: #c1c1c1
}
#nestable2 .dd-item>button:before {
    content: "\f067"
}
#nestable2 .dd-item>button[data-action="collapse"]:before {
    content: "\f068"
}
.dd-placeholder,
.dd-empty {
    margin: 5px 0;
    padding: 0;
    min-height: 30px;
    background: #f2fbff;
    border: 1px dashed #e4e5e7;
    box-sizing: border-box;
    -moz-box-sizing: border-box
}
.dd-empty {
    border: 1px dashed #bbb;
    min-height: 100px;
    background-color: #e5e5e5;
    background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px
}
.dd-dragel {
    position: absolute;
    z-index: 9999;
    pointer-events: none
}
.dd-dragel>.dd-item .dd-handle {
    margin-top: 0
}
.dd-dragel .dd-handle {
    -webkit-box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1)
}
.nestable-lists {
    display: block;
    clear: both;
    padding: 30px 0;
    width: 100%;
    border: 0;
    border-top: 2px solid #e4e5e7;
    border-bottom: 2px solid #e4e5e7
}
#nestable-menu {
    padding: 0;
    margin: 10px 0 20px 0
}
#nestable-output,
#nestable2-output {
    width: 100%;
    font-size: .75em;
    line-height: 1.333333em;
    font-family: open sans, lucida grande, lucida sans unicode, helvetica, arial, sans-serif;
    padding: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box
}
#nestable2 .dd-handle {
    border-bottom: 5px solid #168c74;
    background: #1ab394;
    padding: 10px;
    color: #fff;
}
#nestable2 span.label {
    margin-right: 10px
}
#nestable-output,
#nestable2-output {
    font-size: 12px;
    padding: 25px;
    box-sizing: border-box;
    -moz-box-sizing: border-box
}
.angular-ui-tree-handle {
    background: none repeat scroll 0 0 #f7f9fa;
    border: 1px dashed #eaeaea;
    color: inherit;
    padding: 10px;
    font-weight: normal
}
.angular-ui-tree-handle:hover {
    font-weight: bold;
    cursor: pointer
}
.angular-ui-tree-placeholder {
    background: #f0f9ff;
    border: 1px dashed #eaeaea;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
.group-title {
    background-color: #687074!important;
    color: #FFF!important
}
.tree-node {
    background: none repeat scroll 0 0 #f7f9fa;
    border: 1px dashed #eaeaea;
    color: inherit;
    padding: 10px;
    border-radius: 3px
}
.tree-node .btn {
    min-width: 22px;
    margin-right: 4px
}
.tree-node-content {
    margin: 5px 5px 5px 0
}
.tree-handle {
    background: none repeat scroll 0 0 #f7f9fa;
    border: 1px dashed #eaeaea;
    color: inherit;
    padding: 10px
}
.angular-ui-tree-placeholder {
    background: #f0f9ff;
    border: 1px dashed #eaeaea;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
.icheckbox_square-green,
.iradio_square-green {
    display: inline-block;
    *display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 22px;
    height: 22px;
    background: url("img/green.png") no-repeat;
    border: 0;
    cursor: pointer
}
.icheckbox_square-green {
    background-position: 0 0
}
.icheckbox_square-green.hover {
    background-position: -24px 0
}
.icheckbox_square-green.checked {
    background-position: -48px 0
}
.icheckbox_square-green.disabled {
    background-position: -72px 0;
    cursor: default
}
.icheckbox_square-green.checked.disabled {
    background-position: -96px 0
}
.iradio_square-green {
    background-position: -120px 0
}
.iradio_square-green.hover {
    background-position: -144px 0
}
.iradio_square-green.checked {
    background-position: -168px 0
}
.iradio_square-green.disabled {
    background-position: -192px 0;
    cursor: default
}
.iradio_square-green.checked.disabled {
    background-position: -216px 0
}
@media(-o-min-device-pixel-ratio:5/4),
(-webkit-min-device-pixel-ratio:1.25),
(min-resolution:120dpi) {
    .icheckbox_square-green, .iradio_square-green {
        background-image: url("img/green%402x.png");
        -webkit-background-size: 240px 24px;
        background-size: 240px 24px
    }
}
.ui-sortable .card-body {
    cursor: move
}
.ui-sortable-placeholder {
    border: 1px dashed #cecece!important;
    visibility: visible!important;
    background: #f7f9fa
}
.ibox.ui-sortable-placeholder {
    margin: 0 0 23px!important
}
.bg-white {
    background-color: #fff
}
.bg-light-soft {
    background-color: #f1f3f6
}
.bg-light {
    background-color: #f7f9fa
}
.border-top {
    border-top: 1px solid #eaeaea
}
.border-bottom {
    border-bottom: 1px solid #eaeaea
}
.border-right {
    border-right: 1px solid #eaeaea
}
.border-left {
    border-left: 1px solid #eaeaea
}
.h-bg-navy-blue {
    background: #34495e
}
.h-bg-violet {
    background: #9b59b6
}
.h-bg-blue {
    background: #3498db
}
.h-bg-green {
    background: #1ab394
}
.h-bg-yellow {
    background: #ffb606
}
.h-bg-orange {
    background: #e67e22
}
.h-bg-red {
    background: #e74c3c
}
.h-bg-red-deep {
    background: #c0392b
}
.text-primary {
    color: #34495e
}
.text-primary-2 {
    color: #9b59b6
}
.text-info {
    color: #3498db
}
.text-success {
    color: #1ab394
}
.text-warning {
    color: #ffb606
}
.text-danger {
    color: #e74c3c
}
.text-white {
    color: #fff
}
.p-xxs {
    padding: 5px!important
}
.p-xs {
    padding: 10px!important
}
.p-sm {
    padding: 15px!important
}
.p-m {
    padding: 20px!important
}
.p-md {
    padding: 25px!important
}
.p-lg {
    padding: 30px!important
}
.p-xl {
    padding: 40px!important
}
.m-xxs {
    margin: 2px 4px
}
.m-xs {
    margin: 5px
}
.m-sm {
    margin: 10px
}
.m {
    margin: 15px
}
.m-md {
    margin: 20px
}
.m-lg {
    margin: 30px
}
.m-xl {
    margin: 50px
}
.m-n {
    margin: 0!important
}
.m-l-none {
    margin-left: 0
}
.m-l-xs {
    margin-left: 5px
}
.m-l-sm {
    margin-left: 10px
}
.m-l {
    margin-left: 15px
}
.m-l-md {
    margin-left: 20px
}
.m-l-lg {
    margin-left: 30px
}
.m-l-xl {
    margin-left: 40px
}
.m-l-n-xxs {
    margin-left: -1px
}
.m-l-n-xs {
    margin-left: -5px
}
.m-l-n-sm {
    margin-left: -10px
}
.m-l-n {
    margin-left: -15px
}
.m-l-n-md {
    margin-left: -20px
}
.m-l-n-lg {
    margin-left: -30px
}
.m-l-n-xl {
    margin-left: -40px
}
.m-t-none {
    margin-top: 0
}
.m-t-xxs {
    margin-top: 1px
}
.m-t-xs {
    margin-top: 5px
}
.m-t-sm {
    margin-top: 10px
}
.m-t {
    margin-top: 15px
}
.m-t-md {
    margin-top: 20px
}
.m-t-lg {
    margin-top: 30px
}
.m-t-xl {
    margin-top: 40px
}
.m-t-xxl {
    margin-top: 50px
}
.m-t-xxxl {
    margin-top: 60px
}
.m-t-n-xxs {
    margin-top: -1px
}
.m-t-n-xs {
    margin-top: -5px
}
.m-t-n-sm {
    margin-top: -10px
}
.m-t-n {
    margin-top: -15px
}
.m-t-n-md {
    margin-top: -20px
}
.m-t-n-lg {
    margin-top: -30px
}
.m-t-n-xl {
    margin-top: -40px
}
.m-r-none {
    margin-right: 0
}
.m-r-xxs {
    margin-right: 1px
}
.m-r-xs {
    margin-right: 5px
}
.m-r-sm {
    margin-right: 10px
}
.m-r {
    margin-right: 15px
}
.m-r-md {
    margin-right: 20px
}
.m-r-lg {
    margin-right: 30px
}
.m-r-xl {
    margin-right: 40px
}
.m-r-n-xxs {
    margin-right: -1px
}
.m-r-n-xs {
    margin-right: -5px
}
.m-r-n-sm {
    margin-right: -10px
}
.m-r-n {
    margin-right: -15px
}
.m-r-n-md {
    margin-right: -20px
}
.m-r-n-lg {
    margin-right: -30px
}
.m-r-n-xl {
    margin-right: -40px
}
.m-b-none {
    margin-bottom: 0
}
.m-b-xxs {
    margin-bottom: 1px
}
.m-b-xs {
    margin-bottom: 5px
}
.m-b-sm {
    margin-bottom: 10px
}
.m-b {
    margin-bottom: 15px
}
.m-b-md {
    margin-bottom: 20px
}
.m-b-lg {
    margin-bottom: 30px
}
.m-b-xl {
    margin-bottom: 40px
}
.m-b-n-xxs {
    margin-bottom: -1px
}
.m-b-n-xs {
    margin-bottom: -5px
}
.m-b-n-sm {
    margin-bottom: -10px
}
.m-b-n {
    margin-bottom: -15px
}
.m-b-n-md {
    margin-bottom: -20px
}
.m-b-n-lg {
    margin-bottom: -30px
}
.m-b-n-xl {
    margin-bottom: -40px
}
.space-15 {
    margin: 15px 0
}
.space-20 {
    margin: 20px 0
}
.space-25 {
    margin: 25px 0
}
.space-30 {
    margin: 30px 0
}
html {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    font-family: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #6a6c6f;
    margin: 0;
    padding: 0;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#header {
    background: linear-gradient(180deg, #ffffff 0%, #f4f6f9 100%);
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    min-height: 62px;
    margin: 0;
    padding: 0;
    position: relative;
    border-bottom: 1px solid rgba(169, 120, 209, 0.14);
    box-sizing: border-box;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.045);
    overflow: visible;
}
#menu {
    width: 180px;
    bottom: 0;
    float: left;
    left: 0;
    position: absolute;
    top: 62px;
    transition: margin .4s ease 0s
}
#wrapper {
    padding: 0;
    background: #f1f3f6;
    border-left: 1px solid #eaeaea;
    transition: margin .4s ease 0s;
    position: relative;
    min-height: 100%
}

.content {
    padding: 25px 40px 40px 40px;
    min-width: 320px
}
.footer {
    padding: 40px 28px;
    background: #fff;
    border-top: 1px solid #eaeaea;
    transition: margin .4s ease 0s;
    bottom: 0;
    left: 0;
    right: 0
}
@media(max-width:768px) {
    .content {
        padding: 15px 15px 15px 15px;
        min-width: 320px
    }
}
.content-boxed {
    max-width: 1100px;
    margin: auto;
    padding-top: 60px
}
#page-header {
    padding: 20px 40px
}
.fixed-navbar #header {
    width: 100%;
    position: relative;
    z-index: 1000;
    overflow: visible;
}
.fixed-navbar #wrapper {
    margin-top: 0;
}
.fixed-sidebar #menu {
    position: fixed;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 197px
}
.fixed-sidebar.show-sidebar #menu {
    width: 180px
}
.sidebar-scroll #menu {
    position: fixed
}
.fixed-footer .footer {
    position: fixed;
    z-index: 1001;
    bottom: 0;
    left: 181px;
    right: 0
}
.fixed-footer.hide-sidebar .footer {
    left: 0
}
@media(max-width:768px) {
    .fixed-footer .footer {
        left: 0
    }
    .fixed-footer.show-sidebar .footer {
        left: 181px
    }
}
#left-sidebar {
    background-color: #fff;
    border-left: 1px solid #eaeaea;
    position: fixed;
    top: 0;
    width: 260px!important;
    z-index: 1009;
    bottom: 0;
    left: 0;
    display: none;
    overflow: hidden
}
#tablescroll::-webkit-scrollbar {
    width: 12px;
}
 
#tablescroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
#tablescroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
.feed-element {
    border-top: 1px solid #f1f3f6;
    padding-top: 15px;
    padding-bottom: 15px;
}


.scroll 
    {
     unicode-bidi:bidi-override;
     direction: rtl;
     overflow: scroll;
     overflow-x: hidden!important;
}
#aside-container {
    direction: ltr;
    overflow-x:hidden;
}
.margin-sm-charts {
    margin-bottom: 40px;
}
#left-sidebar::-webkit-scrollbar {
    width: 8px;
}
#left-sidebar::-webkit-scrollbar-track {
    background: rgba(148, 163, 184, 0.12);
    border-radius: 10px;
}
#left-sidebar::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(169, 120, 209, 0.45) 0%, rgba(63, 182, 139, 0.4) 100%);
    border: 2px solid transparent;
    background-clip: padding-box;
}
#left-sidebar.sidebar-open {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0
}
.img-circle {
	width: 40px;
	height: 40px;
}
.pad-hor {
	padding: 10px;
}
.pad-all {
	padding: 10px;
}
.pad-top {
	padding: 10px;
}
.list-header {
	padding-left: 10px;
}
#right-sidebar {
    background-color: #fff;
    border-left: 1px solid #eaeaea;
    position: fixed;
    top: 62px;
    width: 280px !important;
    z-index: 1009;
    bottom: 0;
    right: 0;
    display: none;
    overflow: hidden;
    min-height: 0;
}
#right-sidebar.sidebar-open {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.fixed-small-header .small-header {
    position: fixed;
    top: 62px;
    left: 0;
    right: 0;
    margin-left: 181px;
    z-index: 100
}
.fixed-small-header .content {
    padding-top: 80px
}
.fixed-small-header.hide-sidebar .small-header {
    margin-left: 0
}
.fixed-small-header.page-small .small-header {
    margin-left: 0
}
.fixed-small-header.page-small .content {
    padding-top: 120px
}
.fixed-small-header.page-small.show-sidebar .small-header {
    margin-left: 181px;
    overflow: hidden
}
.boxed {
    background-color: #fff
}
.boxed .profile-picture {
    background-color: white
}
.boxed .boxed-wrapper {
    display: block;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.55);
    -moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.55);
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.55)
}
.ngHeaderCell {
    border-right: 0;
    border-bottom: 1px solid #eaeaea
}
.ngCell {
    border-right: 0
}
.ngTopPanel {
    background: #fff
}
.ngRow.even {
    background: #f9f9f9
}
.ngRow.selected {
    background: #e5e8ee
}
.ngRow {
    border-bottom: 1px solid #eaeaea
}
.ngCell {
    background-color: transparent
}
.ngHeaderCell {
    border-right: 0
}
.gridStyle {
    border: 1px solid #eaeaea;
    height: 400px
}
.show-grid [class^="col-"] {
    background-color: #f1f3f6!important;
    border: 1px solid #ddd;
    padding-bottom: 10px;
    padding-top: 10px
}
.show-grid {
    margin: 15px 0
}
.h-100 {
    min-height: 100px
}
.h-150 {
    min-height: 150px
}
.h-200 {
    min-height: 200px
}
.h-300 {
    min-height: 300px
}
.h-400 {
    min-height: 400px
}
.h-500 {
    min-height: 500px
}
.h-600 {
    min-height: 600px
}
.w-xs {
    min-width: 100px
}
.w-sm {
    min-width: 120px
}
.w-m {
    min-width: 140px
}
.w-lg {
    min-width: 160px
}
.w-xl {
    min-width: 180px
}
.w-xxl {
    min-width: 200px
}
.font-light {
    font-weight: 300
}
.font-normal {
    font-weight: 400
}
.font-bold {
    font-weight: 600
}
.font-extra-bold {
    font-weight: 700
}
.font-uppercase {
    text-transform: uppercase
}
.font-trans {
    opacity: .5!important
}
.text-big {
    font-size: 60px
}
h1,
.h1,
h2,
.h2,
h3,
.h3 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: 200
}

.opacity-0 {
    opacity: 0
}
.opacity-1 {
    opacity: 1
}
body.modal-open {
    left: 0;
    right: 0;
    padding-right: 0!important;
    position: absolute;
    height: initial
}
.google-map {
    height: 300px
}
.hr-line-dashed {
    background-color: transparent;
    border-top: 1px dotted #f1f3f6;
    color: transparent;
    height: 1px;
    margin: 20px 0
}
.animated-panel {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
.jqstooltip {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}
#logo {
    float: none;
    flex: 0 0 180px;
    width: 180px;
    max-width: 180px;
    background-color: #34495e;
    padding: 18px 10px 18px 18px;
    min-height: 62px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
#logo span {
    font-weight: 600;
    color: #fff;
    font-size: 14px
}
#logo.light-version {
    background-color: #f7f9fa;
    border-bottom: 1px solid #eaeaea;
    text-align: center
}
#logo.light-version span {
    font-weight: 600;
    color: #34495e;
    font-size: 14px
}
.profile-picture {
    padding: 20px 20px;
    text-align: center
}
.label-menu-corner .label,
.label-menu-corner .badge {
    font-size: 10px;
    line-height: 12px;
    padding: 2px 5px;
    position: absolute;
    right: 18px;
    top: 12px
}
#side-menu {
    background: #f7f9fa
}
#side-menu li a {
    color: #888;
    text-transform: uppercase;
    font-weight: 600;
    padding: 15px 20px;
}
#side-menu li {
    border-bottom: 1px solid #eaeaea;
    list-style: none;
}
#side-menu li:first-child {
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}
.left-sidebar-menu{
	list-style: none;
	font-size: 25px;
}
#side-menu li .nav-second-level li a {
    padding: 10px 10px 10px 30px;
    color: #6a6c6f;
    text-transform: none;
    font-weight: 600
}
#side-menu li .nav-second-level li.active a {
    background-color: #f7f9fa
}
#side-menu li .nav-third-level li a {
    padding: 10px 10px 10px 40px;
    color: #6a6c6f;
    text-transform: none;
    font-weight: 600
}
#side-menu.nav>li>a:hover,
#side-menu.nav>li>a:focus {
    background: #fff
}
/* Top-level section only — nested .nav-second-level > li.active must not get a sheet of #fff (breaks dark drawer) */
#side-menu > li.active {
    background: #fff
}
.arrow {
    float: right
}
.fa.arrow:before {
    content: "\f104"
}
.active>a>.fa.arrow:before {
    content: "\f107"
}
#top-navigation {
    height: 56px;
    position: relative;
    float: left
}
.navbar-static-top {
    margin: 0 0 0 180px
}
.navbar.navbar-static-top a,
.nav.navbar-nav li a {
    color: #9d9fa2
}
.header-link {
    padding: 9px 26px 17px 26px;
    font-size: 14px;
    float: left;
    margin-right: 15px;
    background: #f7f9fa;
    cursor: pointer;
}
.header-link:hover {
    background: #f1f4f6
}
.navbar-nav>li,
.navbar-nav>li>a {
    height: 56px
}
.navbar-nav>li>a {
    padding: 15px 20px;
    font-size: 25px

}
.navbar-nav>li>a {
    padding: 15px 20px;
    font-family: "Montserrat";
    text-transform: uppercase;
    top: 5px;
    font-size: 20px;
    
}
.navbar-nav>li:last-child>a {
    padding-right: 35px
}
.navbar.navbar-static-top .hide-menu {
    color: #9d9fa2
}
.card-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase
}
.box {
    padding: 40px
}
.box-rb-border {
    border-right: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea
}
.box-b-border {
    border-bottom: 1px solid #eaeaea
}
.box-r-border {
    border-right: 1px solid #eaeaea
}
body.hide-sidebar #menu {
    margin-left: -180px
}
body.hide-sidebar #wrapper {
    margin-left: 0
}
body.page-small #menu {
    margin-left: -180px
}
body.page-small #wrapper {
    margin-left: 0
}
body.page-small.show-sidebar #menu {
    margin-left: 0
}
body.page-small.show-sidebar #wrapper {
    margin-left: 180px
}
a {
    cursor: pointer;
    color: #34495e
}
a:hover,
a:focus {
    color: #34495e;
    text-decoration: none
}
.no-padding {
    padding: 0!important
}
.no-borders {
    border: none!important
}
.no-margins {
    margin: 0!important
}
.no-background {
    background: transparent!important
}
.borders {
    border: 1px solid #eaeaea!important
}
.navbar-form-custom {
    float: left;
    height: 52px;
    padding: 0;
    width: 180px
}
.navbar-form-custom .form-control {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    font-size: 13px;
    height: 52px;
    margin: 0;
    z-index: 1060;
    padding: 0
}
.form-control,
.form-control:focus,
.has-error .form-control:focus,
.has-success .form-control:focus,
.has-warning .form-control:focus,
.navbar-collapse,
.navbar-form,
.navbar-form-custom .form-control:focus,
.navbar-form-custom .form-control:hover,
.dropdown.show .btn.dropdown-toggle,
.card,
.popover,
.progress,
.progress-bar {
    box-shadow: none
}
.vertical-mid {
    display: table
}
.vertical-mid * {
    display: table-cell;
    vertical-align: middle
}
.label-success {
    background-color: #1ab394
}
.well {
    background: #f7f9fa;
    box-shadow: none
}
.feed-activity-list .feed-element {
    border-bottom: 1px solid #e7eaec
}
.feed-element:first-child {
    margin-top: 0
}
.feed-element {
    padding-bottom: 15px
}
.feed-element,
.feed-element .media {
    margin-top: 15px
}
.feed-element,
.media-body {
    overflow: hidden
}
.feed-element>.pull-left {
    margin-right: 10px
}
.feed-element img.img-circle,
.dropdown-messages-box img.img-circle {
    width: 38px;
    height: 38px
}
.feed-element .well {
    border: 1px solid #e7eaec;
    box-shadow: none;
    margin-top: 10px;
    margin-bottom: 5px;
    padding: 10px 20px;
    font-size: 11px;
    line-height: 16px
}
.feed-element .actions {
    margin-top: 10px
}
.feed-element .photos {
    margin: 10px 0
}
.feed-photo {
    max-height: 180px;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 10px;
    margin-bottom: 10px
}
.feed-element img {
    filter: url("data:image/svg+xml;utf8,<svgxmlns=\'http://www.w3.org/2000/svg\'><filterid=\'grayscale\'><feColorMatrixtype=\'matrix\'values=\'0.33330.33330.3333000.33330.33330.3333000.33330.33330.33330000010\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%)
}
.small-logo {
    display: none;
    text-align: center;
    padding-top: 18px;
    font-size: 14px;
    font-weight: 800
}
.img-small {
    width: 62px;
    height: 62px
}
@media(max-width:768px) {
    .navbar-form-custom,
    #header #logo {
        display: none
    }
    .navbar-static-top {
        margin: 0
    }
    #header .small-logo {
        display: flex;
        align-items: center;
        float: none;
        flex: 1 1 auto;
        min-width: 0;
        padding: 0 10px 0 14px;
        height: auto;
        min-height: 62px;
        text-align: left;
    }
    .header-line div {
        display: none
    }
    .color-demo .header-line {
        height: 48px
    }
    #hbreadcrumb {
        float: none!important;
        margin-bottom: 10px;
        margin-top: 0
    }
}
@media(max-width:320px) {
    #wrapper {
        overflow: hidden
    }
}
.canvass {
    -moz-transition: width .01s, height .01s;
    -webkit-transition: width .01s, height .01s;
    -o-transition: width .01s, height .01s;
    transition: width .01s, height .01s
}
.project-list table tr td {
    border-top: 0;
    border-bottom: 1px solid #e7eaec;
    padding: 10px 10px;
    vertical-align: middle
}
.icons-box {
    padding: 20px
}
.icons-box h3 {
    margin-top: 10px;
    margin-bottom: 10px
}
.icons-box .infont {
    text-align: center;
    margin-bottom: 25px
}
.icons-box .infont i {
    font-size: 35px;
    display: block;
    color: #676a6c
}
.icons-box .infont span {
    color: #a6a8a9
}
.icons-box .infont span {
    margin: 1px;
    display: block
}
.fullpanel {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1070;
    overflow-x: scroll;
    transition: all 2s
}
.transition {
    transition: all .5s
}
.normalheader .specpanel {
    margin-bottom: 0
}
.normalheader {
    min-width: 320px;
    padding: 40px 40px 0 40px;
    transition: padding .5s
}
@media(max-width:768px) {
    .normalheader {
        padding: 15px 15px 0 15px
    }
}
.normalheader h2 {
    margin-top: 0
}
.input-xs {
    height: 20px;
    padding: 2px 10px;
    font-size: 10px;
    line-height: 1.5;
    border-radius: 3px;
    font-weight: 500
}
.clip-header i {
    display: inline-block;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}
.clip-header {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 8px;
    background: #f7f9fa;
    padding: 4px 5px;
    border-left: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea
}
.dropdown-menu {
    font-size: 13px;
    border-radius: 3px
}
.dropdown-example {
    display: inline-block;
    margin: 0 10px 10px 10px
}
.dropdown-example .dropdown-menu {
    position: static;
    display: block
}
.pagination-example .pagination {
    margin: 0 0 10px 0
}
.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
    background-color: #3498db;
    border-color: #258cd1;
    color: #fff;
    cursor: default;
    z-index: 2
}
.hbreadcrumb a.active {
    color: #9d9fa2
}
.form-control {
    border-color: #eaeaea!important
}
.input-group-addon {
    background: #fafbfc;
    border-color: #eaeaea!important
}
.sidebar-button {
    padding: 4px 10px 0 10px
}
.sidebar-button i {
    font-size: 20px
}
.table>thead>tr>th {
    border-bottom: 0
}
.no-padding table {
    margin-bottom: 0
}
.form-control.error {
    border-color: #e74c3c!important
}
label.error,
label span.error {
    color: #e74c3c;
    margin: 5px 0 0 0;
    font-weight: 400
}
label span.error {
    margin-left: 5px
}
label.error:before {
    content: "\f071";
    font-family: 'FontAwesome';
    margin: 0 4px
}
.hdropdown.bigmenu {
    padding: 30px 30px 0 30px
}
.bigmenu a i {
    font-size: 46px
}
.bigmenu a {
    display: block;
    text-align: center;
    margin: 0 10px 30px 0;
    min-width: 100px
}
.bigmenu h5 {
    font-size: 13px;
    margin-top: 10px
}
@media(max-width:768px) {
    .mobile-menu-toggle {
        display: block
    }
}
.x-edit-checkbox .checkbox label::before {
    display: none
}
body.light-skin {
    background-color: #f8f9fb
}
body.light-skin .color-line {
    display: none
}
body.light-skin.fixed-navbar #wrapper,
body.light-skin #menu {
    top: 55px
}
body.light-skin .welcome-message {
    display: none
}
body.light-skin #wrapper {
    background-color: transparent;
    border-left: none
}
body.light-skin #wrapper .content {
    padding-top: 20px
}
body.light-skin.fixed-small-header #wrapper .content {
    padding-top: 90px
}
body.light-skin #menu {
    width: 190px
}
body.light-skin #side-menu {
    background: 0;
    padding: 23px 0 50px 25px
}
body.light-skin #side-menu li {
    border: 0
}
body.light-skin #side-menu li:first-child {
    border: 0
}
body.light-skin #side-menu li a {
    text-transform: none;
    font-weight: 600;
    padding: 10px 10px;
    color: #909295
}
body.light-skin #side-menu li a:hover,
body.light-skin #side-menu li a:focus {
    background-color: inherit;
    color: #6a6c6f;
    font-weight: 700
}
body.light-skin #side-menu > li.active {
    border: 0;
    background: 0
}
body.light-skin #side-menu > li.active>a {
    border: 0;
    font-weight: 700;
    color: #6a6c6f
}
body.light-skin #side-menu li .nav-second-level li a {
    padding: 6px 10px 6px 20px
}
body.light-skin #side-menu li .nav-third-level li a {
    padding: 6px 10px 6px 30px
}
body.light-skin .profile-picture {
    display: none
}
body.light-skin .specpanel .card-body {
    border-radius: 2px
}
body.light-skin .card-footer {
    border-radius: 0 0 2px 2px
}
body.light-skin .specpanel .card-body {
    border: 0;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1)
}
body.light-skin .specpanel.panel-collapse .card-header {
    border: 0;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1)
}
body.light-skin .specpanel .card-header {
    border: 0
}
body.light-skin .specpanel .hbuilt.card-header,
body.light-skin .specpanel.blog-box .card-header {
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1)
}
body.light-skin .specpanel.hgreen .card-body {
    border-top: 2px solid #1ab394
}
body.light-skin .specpanel.hblue .card-body {
    border-top: 2px solid #3498db
}
body.light-skin .specpanel.hyellow .card-body {
    border-top: 2px solid #ffb606
}
body.light-skin .specpanel.hviolet .card-body {
    border-top: 2px solid #9b59b6
}
body.light-skin .specpanel.horange .card-body {
    border-top: 2px solid #e67e22
}
body.light-skin .specpanel.hred .card-body {
    border-top: 2px solid #e74c3c
}
body.light-skin .specpanel.hreddeep .card-body {
    border-top: 2px solid #c0392b
}
body.light-skin .specpanel.hnavyblue .card-body {
    border-top: 2px solid #34495e
}
body.light-skin #header {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 24px rgba(15, 23, 42, 0.04);
    min-height: 55px;
    height: 55px;
    border: 0;
    border-bottom: 1px solid rgba(169, 120, 209, 0.1);
    z-index: 10
}
body.light-skin .header-link {
    background-color: #fff;
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
body.light-skin #header .header-link:hover {
    background: rgba(169, 120, 209, 0.08);
}
body.light-skin #logo {
    height: 55px;
    width: 200px;
    padding-left: 33px
}
body.light-skin #logo.light-version {
    border: 0;
    border-right: 1px solid rgba(148, 163, 184, 0.2);
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    text-align: left;
    box-shadow: 4px 0 16px rgba(15, 23, 42, 0.03);
}
body.light-skin #logo.light-version span {
    font-weight: 700;
    color: #6a6c6f;
    font-size: 14px
}
body.light-skin #header #logo {
    flex: 0 0 200px;
    width: 200px;
    max-width: 200px;
    min-height: 55px;
    height: 55px;
}
body.light-skin #header nav[role="navigation"],
body.light-skin #header .header-link > li > a,
body.light-skin #header .header-link .left-sidebar-toggle,
body.light-skin #header .navbar-nav > li > .dropdown-toggle,
body.light-skin #header .navbar-nav > li > a,
body.light-skin #header .small-logo {
    min-height: 55px;
}
body.light-skin.fixed-small-header .small-header {
    top: 55px;
    z-index: 5
}
body.light-skin .small-header {
    padding: 0 0 0 21px!important
}
body.light-skin.hide-sidebar .small-header {
    padding: 0 0 0 0!important
}
body.light-skin .specpanel>.card-footer,
body.light-skin .specpanel>.panel-section {
    background-color: transparent;
    border: 0
}
body.light-skin .social-board .specpanel>.card-footer,
body.light-skin .social-board .specpanel>.panel-section {
    border: 1px solid var(--spec-panel-card-border, #eaeaea)
}
body.light-skin .contact-panel.specpanel>.card-footer,
body.light-skin .contact-panel.specpanel>.panel-section {
    border: 1px solid var(--spec-panel-card-border, #eaeaea)
}
body.light-skin .footer {
    left: -181px
}
body.light-skin.fixed-footer .footer {
    left: 0
}
.landing-page .navbar-form-custom,
.landing-page .navbar-right,
.landing-page #logo {
    display: block
}
.landing-page .navbar-default {
    background: #fff
}
.landing-page .navbar .navbar-brand {
    font-size: 12px;
    height: auto;
    margin-top: 8px;
    padding: 9px 15px;
    font-weight: 700;
    border-radius: 5px;
    color: #fff;
    display: block;
    background-color: #1ab394;
    margin-left: 0
}
.landing-page .navbar-default .navbar-toggle:hover,
.landing-page .navbar-default .navbar-toggle:focus {
    background: #1ab394
}
.landing-page .navbar-default .navbar-toggle:hover .icon-bar,
.landing-page .navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #fff!important
}
.landing-page .navbar-default .navbar-nav>.active>a,
.landing-page .navbar-default .navbar-nav>.active>a:hover,
.landing-page .navbar-default .navbar-nav>.active>a:focus {
    background-color: transparent;
    color: #1ab394;
    border: 0
}
.landing-page .navbar-default li a:hover {
    border-bottom: 0
}
.landing-page .brand-desc {
    color: #455463;
    margin: 17px 10px 0 90px;
    width: 180px
}
.landing-page .navbar-nav>li>a {
    font-size: 14px;
    font-weight: 600;
    padding: 15px 15px;
    color: #455463
}
.landing-page .navbar-nav>li,
.landing-page .navbar-nav>li>a {
    height: 55px
}
.landing-page header {
    background: url('../images/landing/header.jpg') 50% 0 no-repeat;
    height: 480px;
    padding-top: 50px;
    margin-bottom: 30px
}
.landing-page section {
    padding: 50px 0 50px 0;
    border-bottom: 1px solid #eaeaea
}
.landing-page section h2 {
    margin-top: 0
}
.landing-page section p {
    margin-top: 0
}
.landing-page header .container {
    position: relative
}
.landing-page .heading {
    margin-top: 60px;
    color: #edf0f5
}
.landing-page .heading h1 {
    font-weight: 600;
    font-size: 34px;
    margin-bottom: 5px;
    letter-spacing: -0.5px
}
.landing-page h4 {
    font-weight: 600
}
.landing-page p {
    color: #a7afb8
}
.landing-page .heading span {
    font-size: 13px;
    font-weight: 600
}
.landing-page .heading p.small {
    margin-top: 10px;
    color: #a7afb8;
    max-width: 260px
}
.landing-page .heading-image {
    position: absolute;
    right: 60px;
    top: 120px;
    text-align: right
}
.landing-page .heading-image p {
    color: #a7afb8;
    margin-bottom: 5px
}
.landing-page .heading-image img {
    -webkit-box-shadow: 0 0 8px 0 #333;
    -moz-box-shadow: 0 0 8px 0 #333;
    box-shadow: 0 0 8px 0 #333;
    margin-left: 12px;
    margin-top: 12px;
    width: 180px;
    border-radius: 1px
}
.landing-page .navy-link {
    background: #455463;
    color: #fff
}
.landing-page .icon-big {
    font-size: 70px
}
.landing-page .team-member img {
    height: 72px
}
.landing-page .social-icon a {
    background: #1ab394;
    color: #fff;
    text-align: center;
    padding: 4px 8px;
    height: 28px;
    width: 28px;
    display: block;
    border-radius: 4px
}
.landing-page .list-inline>li {
    padding: 0
}
.landing-page .social-icon a:hover {
    background: #5abb2d
}
.landing-page .pricing-plan {
    margin: 20px 10px 0 10px;
    border-radius: 4px;
    padding-bottom: 20px;
    background: #fff;
    border: 1px solid #eaeaea
}
.landing-page .pricing-plan li {
    padding: 10px 16px;
    text-align: center;
    color: #aeaeae
}
.landing-page .pricing-plan .pricing-price span {
    font-weight: 700;
    font-size: 30px;
    color: #1ab394
}
.landing-page .pricing-title .label {
    font-size: 12px
}
.landing-page li.pricing-desc {
    font-size: 13px;
    border-top: 0;
    padding: 20px 16px 0 16px
}
.landing-page li.pricing-title {
    color: #455463;
    padding: 25px 10px 0 10px;
    border-radius: 4px 4px 0 0;
    font-size: 22px;
    font-weight: 600
}
.landing-page .client {
    color: #a7afb8;
    background: #f7f9fa;
    padding: 30px 10px;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    font-weight: 600
}
@media(max-width:1200px) {
    .landing-page .heading-image {
        display: none
    }
    .landing-page .heading {
        text-align: center
    }
    .landing-page .heading p.small {
        margin: 10px auto
    }
    .landing-page .brand-desc {
        display: none
    }
    .landing-page .navbar .navbar-brand {
        margin-left: 10px
    }
}

/* 3D Charts */
[peak-chart] {
  position: relative;
  display: inline-block;
  width: 240px;
  height: 240px;
  border-radius: 120px;
  margin-top: 120px;
  -webkit-transform: rotateX(45deg);
  -moz-transform: rotateX(45deg);
  -ms-transform: rotateX(45deg);
  transform: rotateX(45deg);
}
[peak-chart],
[peak-chart] * {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
[peak-chart] > [face] {
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transition: all 0.25s ease-in;
  -moz-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
}
[peak-chart] > [face]:nth-child(1) {
  background-image: -webkit-linear-gradient(bottom right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), -webkit-linear-gradient(bottom right, #33adcc, #33adcc 50%, transparent 50%);
  background-image: linear-gradient(to top left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), linear-gradient(to top left, #33adcc, #33adcc 50%, transparent 50%);
}
[peak-chart] > [face]:nth-child(2) {
  background-image: -webkit-linear-gradient(bottom right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), -webkit-linear-gradient(bottom right, #5cbed6, #5cbed6 50%, transparent 50%);
  background-image: linear-gradient(to top left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), linear-gradient(to top left, #5cbed6, #5cbed6 50%, transparent 50%);
}
[peak-chart] > [face]:nth-child(3) {
  background-image: -webkit-linear-gradient(bottom right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), -webkit-linear-gradient(bottom right, #3387cc, #3387cc 50%, transparent 50%);
  background-image: linear-gradient(to top left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), linear-gradient(to top left, #3387cc, #3387cc 50%, transparent 50%);
}
[peak-chart] > [face]:nth-child(4) {
  background-image: -webkit-linear-gradient(bottom right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), -webkit-linear-gradient(bottom right, #5c9fd6, #5c9fd6 50%, transparent 50%);
  background-image: linear-gradient(to top left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), linear-gradient(to top left, #5c9fd6, #5c9fd6 50%, transparent 50%);
}
[peak-chart] > [face]:nth-child(5) {
  background-image: -webkit-linear-gradient(bottom right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), -webkit-linear-gradient(bottom right, #575fa8, #575fa8 50%, transparent 50%);
  background-image: linear-gradient(to top left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), linear-gradient(to top left, #575fa8, #575fa8 50%, transparent 50%);
}
[peak-chart] > [face]:nth-child(6) {
  background-image: -webkit-linear-gradient(bottom right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), -webkit-linear-gradient(bottom right, #787fba, #787fba 50%, transparent 50%);
  background-image: linear-gradient(to top left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), linear-gradient(to top left, #787fba, #787fba 50%, transparent 50%);
}
[peak-chart] > [face]:nth-child(7) {
  background-image: -webkit-linear-gradient(bottom right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), -webkit-linear-gradient(bottom right, #c9365b, #c9365b 50%, transparent 50%);
  background-image: linear-gradient(to top left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), linear-gradient(to top left, #c9365b, #c9365b 50%, transparent 50%);
}
[peak-chart] > [face]:nth-child(8) {
  background-image: -webkit-linear-gradient(bottom right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), -webkit-linear-gradient(bottom right, #d45e7b, #d45e7b 50%, transparent 50%);
  background-image: linear-gradient(to top left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), linear-gradient(to top left, #d45e7b, #d45e7b 50%, transparent 50%);
}
[peak-chart] > [face]:nth-child(9) {
  background-image: -webkit-linear-gradient(bottom right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), -webkit-linear-gradient(bottom right, #5d9ca2, #5d9ca2 50%, transparent 50%);
  background-image: linear-gradient(to top left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), linear-gradient(to top left, #5d9ca2, #5d9ca2 50%, transparent 50%);
}
[peak-chart] > [face]:nth-child(10) {
  background-image: -webkit-linear-gradient(bottom right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), -webkit-linear-gradient(bottom right, #7db0b5, #7db0b5 50%, transparent 50%);
  background-image: linear-gradient(to top left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), linear-gradient(to top left, #7db0b5, #7db0b5 50%, transparent 50%);
}
[peak-chart] > [face]:nth-child(11) {
  background-image: -webkit-linear-gradient(bottom right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), -webkit-linear-gradient(bottom right, #a25ba4, #a25ba4 50%, transparent 50%);
  background-image: linear-gradient(to top left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), linear-gradient(to top left, #a25ba4, #a25ba4 50%, transparent 50%);
}
[peak-chart] > [face]:nth-child(12) {
  background-image: -webkit-linear-gradient(bottom right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), -webkit-linear-gradient(bottom right, #b57bb7, #b57bb7 50%, transparent 50%);
  background-image: linear-gradient(to top left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), linear-gradient(to top left, #b57bb7, #b57bb7 50%, transparent 50%);
}
[peak-chart] > [face]:nth-child(13) {
  background-image: -webkit-linear-gradient(bottom right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), -webkit-linear-gradient(bottom right, #c9cbcf, #c9cbcf 50%, transparent 50%);
  background-image: linear-gradient(to top left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), linear-gradient(to top left, #c9cbcf, #c9cbcf 50%, transparent 50%);
}
[peak-chart] > [face]:nth-child(14) {
  background-image: -webkit-linear-gradient(bottom right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), -webkit-linear-gradient(bottom right, #e4e5e7, #e4e5e7 50%, transparent 50%);
  background-image: linear-gradient(to top left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), linear-gradient(to top left, #e4e5e7, #e4e5e7 50%, transparent 50%);
}
[peak-chart] > [face]:nth-child(15) {
  background-image: -webkit-linear-gradient(bottom right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), -webkit-linear-gradient(bottom right, #c9cbcf, #c9cbcf 50%, transparent 50%);
  background-image: linear-gradient(to top left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), linear-gradient(to top left, #c9cbcf, #c9cbcf 50%, transparent 50%);
}
[peak-chart] > [face]:nth-child(16) {
  background-image: -webkit-linear-gradient(bottom right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), -webkit-linear-gradient(bottom right, #e4e5e7, #e4e5e7 50%, transparent 50%);
  background-image: linear-gradient(to top left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), linear-gradient(to top left, #e4e5e7, #e4e5e7 50%, transparent 50%);
}
[peak-chart] > [face]:nth-child(17) {
  background-image: -webkit-linear-gradient(bottom right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), -webkit-linear-gradient(bottom right, #c9cbcf, #c9cbcf 50%, transparent 50%);
  background-image: linear-gradient(to top left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), linear-gradient(to top left, #c9cbcf, #c9cbcf 50%, transparent 50%);
}
[peak-chart] > [face]:nth-child(18) {
  background-image: -webkit-linear-gradient(bottom right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), -webkit-linear-gradient(bottom right, #e4e5e7, #e4e5e7 50%, transparent 50%);
  background-image: linear-gradient(to top left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25) 50%, transparent 50%), linear-gradient(to top left, #e4e5e7, #e4e5e7 50%, transparent 50%);
}
[peak-chart] > label {
  position: absolute;
  font-weight: bold;
  font-size: 90%;
  -webkit-transition: all 0.25s ease-in;
  -moz-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
}
[peak-chart] > label:before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top right, #d6e7f5, #5c9fd6);
  background-image: linear-gradient(to bottom left, #d6e7f5, #5c9fd6);
}
[peak-chart] > label[point=bottomright] {
  padding-right: 6px;
  padding-bottom: 9px;
}
[peak-chart] > label[point=bottomright]:before {
  right: -3px;
  bottom: 3px;
}
[peak-chart] > label[point=bottomleft] {
  padding-left: 6px;
  padding-bottom: 9px;
}
[peak-chart] > label[point=bottomleft]:before {
  left: -3px;
  bottom: 3px;
}
[peak-chart] > label[point=topleft] {
  padding-left: 4px;
  padding-top: 4px;
}
[peak-chart] > label[point=topleft]:before {
  left: -3px;
  top: -3px;
}
[peak-chart] > label[point=topright] {
  padding-right: 4px;
  padding-top: 4px;
}
[peak-chart] > label[point=topright]:before {
  right: -3px;
  top: -3px;
}
figcaption {
  line-height: 36px;
  font-style: italic;
}
figcaption button {
  background: none;
  border: 1px solid lightgray;
  cursor: pointer;
  font-size: 90%;
  margin: 0;
  padding: 1px 0.5em 0;
  line-height: 1.3;
  border-radius: 0.5em;
  vertical-align: text-top;
}
figcaption button:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* 13. CHAT */
.chat-wi .chat-space {
  max-height: 400px;
}
.chat-wi .chat-content {
  padding: 15px;
  background: #fff;
}
.chat-wi .chat-conv {
  position: relative;
  text-align: right;
  padding: 10px;
  margin-bottom: 15px;
}
.chat-wi .chat-conv .c-avatar {
  position: absolute;
  border: 1px solid #D6DAE0;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.09);
  height: 50px;
  width: 50px;
  vertical-align: top;
  right: 0;
}
.marginactivysec {
    margin-bottom: 15px;
}
.chat-wi .chat-conv .c-bubble {
     position: relative;
    display: inline-block;
    padding: 8px 9px 5px 9px;
    font-size: 12px;
    font-weight: 400;
    color: #FFF;
    margin: 0 60px 0 0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    border-top: 1px solid #1ab390;
    border-bottom: 1px solid #1ab394;
    box-shadow: 0 1px 0 #1ab390 inset, 1px 1px 2px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    background-image: -moz-linear-gradient(center top, #50b1fe 45%, #348bfc 102%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#1ab390), to(#1ab361));
    background-image: -webkit-linear-gradient(top, #1ab35a, #1ab394);
    background-image: -o-linear-gradient(top, #50b1fe, #348bfc);
    background-image: linear-gradient(to bottom, #1ab390 45%, #1ab384 102%);
    background-color: #1ab394;
}
.chat-wi .chat-conv .c-bubble span {
  height: 21px;
  width: 12px;
  display: block;
  position: absolute;
  right: -12px;
  top: 5px;
}
.chat-wi .sent {
  text-align: left;
}
.chat-wi .sent .c-bubble {
  margin: 0 0 0 60px;
  border-bottom: 1px solid #f3f3f3;
  border-top: 1px solid #e3e3e3;
  box-shadow: 0 1px 0 #ffffff inset, 0 1px 2px rgba(0, 0, 0, 0.25);
  text-shadow: none;
  color: #666;
  background-image: -moz-linear-gradient(center top, #ffffff 45%, #f3f3f3 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f3f3f3));
  /* Chrome, Safari 4+ */
  background-image: -webkit-linear-gradient(top, #ffffff, #f3f3f3);
  /* Chrome 10-25, iOS 5+, Safari 5.1+ */
  background-image: -o-linear-gradient(top, #ffffff, #f3f3f3);
  /* Opera 11.10-12.00 */
  background-image: linear-gradient(to bottom, #ffffff 45%, #f3f3f3 100%);
}
.chat-wi .sent .c-avatar {
  left: 0;
}
.chat-wi .sent .c-bubble span {
  left: -12px;
}
.chat-wi .chat-in {
  border-top: 1px solid #DADADA;
  background: #F6F8FB;
}
.chat-wi .chat-in input[type="text"] {
  width: 100%;
  border: 0;
  height: 47px;
  padding: 10px;
  font-size: 15px;
  font-weight: 200;
  color: #555;
}

.chat-wi .chat-tools {
  background: #F6F8FB;
  border-top: 1px solid #dfdfdf;
  color: #6f6f6f;
}
.chat-wi .chat-tools i {
  display: inline-block;
  width: 38px;
  padding: 13px 8px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}
.chat-wi .chat-tools i:hover {
  background: #e5e7ea;
}
.chat-wi .chat-in button,
.chat-wi .chat-in input[type="submit"] {
    box-shadow: none;
    background: #1ab388;
    border: 1px solid #1ab389;
    border-left: 1px solid #1ab38a;
    border-radius: 0;
    -webkit-border-radius: 0;
    height: 47px;
    min-width: 70px;
    color: #eee;
    transition: border-color 0.21s ease-out 0s;
    margin: 0;
}
.chat-wi .chat-in button:hover {
  border-color: #4D90FE;
  color: #555;
}
.chat-wi .chat-in .input {
  margin-right: 70px;
}

/* 14. TO DO LIST */


ul.todo {
  width: 100%;
  float: left;
}

ul.todo li {
    width: 100%;
    min-height: 50px;
    float: left;
    font-size: 14px;
    line-height: 22px;
    position: relative;
    box-shadow: 0px 1px 2px rgba(44, 62, 80, 0.10);
    margin: 0 0 10px 0;
    padding: 14px 100px 14px 14px;
    word-break: break-word;
    font-weight: bold;
    background: #f1f3f6;
}

ul.todo li:last-of-type {
  margin: 0;
}

ul.todo li .buttons {
  width: 100px;
  height: 50px;

  position: absolute;
  top: 0;
  right: 0;
}

ul.todo li .buttons button {
  width: 50px;
  height: 50px;
  float: left;
  background: none;
  position: relative;
  border: 0px;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  fill: #f1f3f6;
  -webkit-appearance: none;
  -moz-appearance: none;
}

ul.todo li .buttons button:last-of-type:before {
  content: '';
  width: 1px;
  height: 30px;
  background: #edf0f1;

  position: absolute;
  top: 10px;
  left: 0;
}

ul.todo li .buttons button svg {
  width: 22px;
  height: 22px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -11px 0 0 -11px;
}

ul.todo li .buttons button.complete svg {
  border-radius: 11px;
  border: 1.5px solid #25b99a;

  transition: background 0.2s ease;
}

ul.todo#completed li .buttons button.complete svg {
  background: #25b99a;
  border: 0px;
}

ul.todo:not(#completed) li .buttons button.complete:hover svg {
  background: rgba(37, 185, 154, 0.75);
}

ul.todo:not(#completed) li .buttons button.complete:hover svg .fill {
  fill: #9d9fa2;
}

ul.todo#completed li .buttons button.complete svg .fill {
  fill: #9d9fa2;
}

ul.todo li .buttons button svg .fill {
  transition: fill 0.2s ease;
}

ul.todo li .buttons button.remove svg .fill {
  fill: #c0cecb;
}

ul.todo li .buttons button.remove:hover svg .fill {
  fill: #e85656;
}

ul.todo li .buttons button.complete svg .fill {
  fill: #9d9fa2;
}

ul.todo#completed {
  position: relative;
  padding: 60px 0 0 0;
}

ul.todo#completed:before {
  content: '';
  width: 150px;
  height: 1px;
  background: #d8e5e0;

  position: absolute;
  top: 30px;
  left: 50%;

  margin: 0 0 0 -75px;
}

ul.todo#todo:empty:after {
  content: 'You have nothing to-do!';
  margin: 15px 0 0 0;
}

ul.todo#completed:empty:after {
  content: 'You have yet to complete any tasks.';
}

ul.todo#todo:after,
ul.todo#completed:after {
  width: 100%;
  display: block;
  text-align: center;
  font-size: 12px;
  color: #aaa;
}
.btn-link {
    color:#1ab394;
}


/* 15. Alerts */

.alert-primary {
    background-color: #6ab5f1;
    border-color: transparent;
    border-left: 3px solid #0f80db;
    color: #fff;
}
.alert-success {
    background-color: #9cc56c;
    border-color: transparent;
    border-left: 3px solid #648e33;
    color: #fff;
}
.alert-info {
    background-color: #1bc7dc;
    border-color: transparent;
    border-left: 3px solid #0c6f7b;
    color: #fff;
}
.alert-warning {
    background-color: #f9b450;
    border-color: transparent;
    border-left: 3px solid #d58003;
    color: #fff;
}
.alert-danger {
    background-color: #ed7876;
    border-color: transparent;
    border-left: 3px solid #db1c18;
    color: #fff;
}
.alert-mint {
    background-color: #35bbae;
    border-color: transparent;
    border-left: 3px solid #1a665f;
    color: #fff;
}
.alert-purple {
    background-color: #c288cc;
    border-color: transparent;
    border-left: 3px solid #9540a3;
    color: #fff;
}
.alert-pink {
    background-color: #e96793;
    border-color: transparent;
    border-left: 3px solid #c81853;
    color: #fff;
}
.alert-dark {
    background-color: #4f5e65;
    border-color: transparent;
    border-left: 3px solid #1d2428;
    color: #fff;
}
.marginbtn {
    margin: 5px;
}

/* 16. loading button */
@-webkit-keyframes ld {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
@-moz-keyframes ld {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
@-o-keyframes ld {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes ld {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
.btn-removeable {
    display: -webkit-inline-box;
}

.m-progress {
    position: relative;
    opacity: .8;
    color: transparent !important;
    text-shadow: none !important;
}

.m-progress:hover,
.m-progress:active,
.m-progress:focus {
    cursor: default;
    color: transparent;
    outline: none !important;
    box-shadow: none;
}

.m-progress:before {
    content: '';
    
    display: inline-block;
    
    position: absolute;
    background: transparent;
    border: 1px solid #fff;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    
    box-sizing: border-box;
    
    top: 50%;
    left: 50%;
    margin-top: -12px;
    margin-left: -12px;
    
    width: 24px;
    height: 24px;
    
    -webkit-animation: ld 1s ease-in-out infinite;
    -moz-animation:    ld 1s ease-in-out infinite;
    -o-animation:      ld 1s ease-in-out infinite;
    animation:         ld 1s ease-in-out infinite;
}

.btn-secondary.m-progress:before {
    border-left-color: #333333;
    border-right-color: #333333;
}

.btn-lg.m-progress:before {
    margin-top: -16px;
    margin-left: -16px;
    
    width: 32px;
    height: 32px;
}

.btn-sm.m-progress:before {
    margin-top: -9px;
    margin-left: -9px;
    
    width: 18px;
    height: 18px;
}

.btn-xs.m-progress:before {
    margin-top: -7px;
    margin-left: -7px;
    
    width: 14px;
    height: 14px;
}

.menuacco .collapse.show { overflow: visible; }

.rowlist { 
    margin-top: 10px;
    margin-bottom:10px;
    border-bottom: 1px solid #e2e2e2;
}

.rowlistheader { 
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #F6F6F6;
    font-weight: bold;
    margin: 2px;
}

/* Draggable row list — light / dark dashboard */
body.spec-dashboard-home:not(.spec-dashboard-dark) .rowlist {
    border-bottom-color: var(--spec-panel-card-border);
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .rowlistheader {
    background-color: #f1f5f9;
    color: #0f172a;
    border-radius: 6px;
}
body.spec-dashboard-home.spec-dashboard-dark .rowlist {
    border-bottom-color: var(--spec-panel-card-border);
}
body.spec-dashboard-home.spec-dashboard-dark .rowlistheader {
    background-color: var(--spec-dd-elevated);
    color: var(--spec-dd-text);
    border-radius: 6px;
}

.rowplaceholder {
    border: 1px solid green;
    background-color: white;
    -webkit-box-shadow: 0px 0px 10px #888;
    -moz-box-shadow: 0px 0px 10px #888;
    box-shadow: 0px 0px 10px #888;
    height: 40px;
}

textarea {
  min-height: 150px;
  margin: 15px 2% 0 0;
  float: left;
  font-size: 10pt;
  line-height: 14pt;
  font-weight: 200;
  padding: 10px;
  color: #333;
  border: 1px solid #cdcdcd;
  background: #fff;
  box-shadow: inset rgba(0,0,0,.05) 0 3px 10px;
  border-radius: 3px;
  transition: all 0.2s ease-in-out;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

textarea:focus {
  border-color: #33dd33;
}

textarea#js {
  margin: 15px 0 0 0;
}

iframe {
  width: 100%;
  margin: 15px 0;
  border: 1px solid #cdcdcd;
  border-radius: 3px;
  min-height: 400px;
  margin: 15px 0 0 0;
}

.listtype {
    list-style-type: circle !important;
}

/* 17. Conatcts */

#browser {
  margin: 10px auto;
  color: #777;
}

#browser-bar {
  background: #fff;
  width: 100%;
  padding: 8px;
  margin: 0 auto;
  font-weight: 300;
  font-size: 0.9em;
  position: relative;
}
#browser-bar p {
  text-align: center;
}
#browser-bar .circles {
  border-radius: 10px;
  height: 13px;
  width: 13px;
  background: #ff3434;
  float: left;
  margin-left: 7px;
  margin-top: 3px;
}
#browser-bar .circles:nth-of-type(2) {
  background: #ffdd33;
}
#browser-bar .circles:nth-of-type(3) {
  background: #67b678;
}


#contentMap {
  background: #fff;
}
#contentMap:after {
  contentMap: "";
  display: table;
  clear: both;
}
#contentMap #left, #contentMap #right {
  height: 100%;
}
#contentMap #left {
    float: left;
    width: 75%;
    background: #1ab394;
    color: #eee;
}
@media all and (max-width: 780px) {
  #contentMap #left {
    width: 100%;
  }
}
#contentMap #left #map {
  height: 388px;
  position: relative;
  background-image: url("http://f.cl.ly/items/452R3S1440221Z3m372j/israel.png");
  background-size: cover;
}
#contentMap #left #map p {
  text-transform: uppercase;
  padding-top: 20px;
  padding-left: 30px;
  font-size: 0.9em;
  font-weight: 600;
}

#contentMap #left #map .zoom:before, #contentMap #left #map .zoom:after {
  text-align: center;
  font-weight: 600;
  position: absolute;
  color: #7BC087;
  background: white;
  width: 20px;
}
#contentMap #left #map .zoom:before {
  contentMap: '+';
  top: -10px;
  right: -8px;
}
#contentMap #left #map .zoom:after {
  contentMap: '-';
  bottom: -10px;
  right: -8px;
}
#contentMap #left #map .map-locator {
  position: absolute;
  top: 40%;
  left: 30%;
  border-radius: 15px;
  height: 30px;
  width: 30px;
  background: rgba(0, 0, 0, 0.4);
  border: solid 2px white;
}
#contentMap #left #map .map-locator:before {
  contentMap: '';
  position: absolute;
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 5px;
}
#contentMap #left #map .map-locator .tooltip {
  position: absolute;
  color: #394141;
  left: 50px;
  top: -10px;
  background: white;
  font-size: 0.8em;
  font-weight: 600;
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
#contentMap #left #map .map-locator .tooltip:before {
  contentMap: '';
  position: absolute;
  left: -10px;
  top: 14px;
  border-right: solid white 10px;
  border-top: solid transparent 8px;
  border-bottom: solid transparent 8px;
}
#contentMap #left #map .map-locator .tooltip [class*="entypo-"] {
  min-width: 25px;
  display: inline-block;
  text-align: center;
  border-right: solid thin #CCC;
  margin-right: 5px;
}
#contentMap #left #map .map-locator .tooltip li {
  border-bottom: solid thin #CCC;
  padding: 10px;
  white-space: nowrap;
}
#contentMap #left #map .map-locator .tooltip li a {
  color: #51B2D6;
}
#contentMap #left #map .map-locator .tooltip li:hover [class*="entypo-"] {
  color: #51B2D6;
}
#contentMap #left ul#location-bar {
    color: #eee;
  text-align: center;
  display: table;
}
#contentMap #left ul#location-bar li {
    display: table-cell;
    padding: 15px;
    background: #06a283;
    border-right: solid thin #1ab394;
    color: #eee;
}
#contentMappop{
    display:none;
    }
#contentMap #left ul#location-bar li a {
    color: #eee;
}
#contentMap #left ul#location-bar li:last-of-type {
  border-right: 0;
}
#contentMap #right {
  float: left;
  width: 25%;
  background: #ffffff;
  font-size: 0.75em;
  padding: 15px;
}
@media all and (max-width: 780px) {
  #contentMap #right {
    width: 100%;
  }
}
#contentMap #right p {
  margin-bottom: 10px;
  text-transform: uppercase;
}
#contentMap #right a:hover {
  color: #51B2D6;
}
#contentMap #right #social {
  display: table;
  width: 100%;
}
#contentMap #right .social {
  display: table-cell;
  text-align: center;
}
#contentMap #right form {
  margin: 20px 0;
  padding: 20px 0;
}
#contentMap #right form input,
#contentMap #right form textarea {
  background: #fff;
  padding: 8px;
  margin-bottom: 8px;
  width: 100%;
  color: white;
  border: 1px solid #f1f3f6;
}
#contentMap #right form input:last-of-type,
#contentMap #right form textarea:last-of-type {
  margin-bottom: 0;
}
#contentMap #right form input[type='submit'],
#contentMap #right form textarea[type='submit'] {
  text-transform: uppercase;
  background: #7BC087;
  width: 50%;
  color: white;
  margin-top: 5px;
}
#contentMap #right form input[type='submit']:hover,
#contentMap #right form textarea[type='submit']:hover {
  background: #58b068;
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
#contentMap #right form input[type='textarea'],
#contentMap #right form textarea[type='textarea'] {
  min-height: 75px;
  vertical-align: text-top;
}
#contentMap #right p.other {
  font-size: 0.7;
  margin-bottom: 5px;
  text-transform: lowercase;
  font-weight: 100;
}
#contentMap #right p.other,
#contentMap #right p.other a {
  color: #8e9699;
}
/* 18. Pricing Table */
.pricingtable2 {
  position: absolute;
  background: #3498db;
  width: 100%;
  padding: 40px 0 20px;
  color: #fff;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.pricingtable2 .thumbnail {
  background: #fff;
  /* IE Fall */
  background: rgba(255, 255, 255, 0.2);
  display: block;
  width: 90px;
  height: 90px;
  margin: 0 auto;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  font-size: 36px;
  line-height: 90px;
  text-align: center;
}
.pricingtable2 .title {
  cursor: pointer;
  background: #2980b9;
  margin: 40px 0 0;
  padding: 10px;
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
}
.pricingtable2 .contentpricing {
  display: none;
}
.pricingtable2 .contentpricing .sub-title {
  background: #eee;
  padding: 10px;
  color: #666;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.pricingtable2 .contentpricing ul {
  list-style: none;
  background: #fff;
  margin: 0;
  padding: 0;
  color: #666;
  font-size: 14px;
}
.pricingtable2 .contentpricing ul li {
  padding: 10px 20px;
}
.pricingtable2 .contentpricing ul li:nth-child(2n) {
  background: #f3f3f3;
}
.pricingtable2 .contentpricing ul li .fa {
  width: 16px;
  margin-right: 10px;
  text-align: center;
}
.pricingtable2 .contentpricing ul li .fa-check {
  color: #2ecc71;
}
.pricingtable2 .contentpricing ul li .fa-close {
  color: #e74c3c;
}
.pricingtable2 .contentpricing a {
  display: block;
  background: #2980b9;
  max-width: 80px;
  margin: 0 auto;
  margin-top: 20px;
  padding: 10px 15px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -ms-transition: 0.2s linear;
  -o-transition: 0.2s linear;
  transition: 0.2s linear;
}
.pricingtable2 .contentpricing a:hover {
  background: #34495e;
  /* IE Fallback */
  background: rgba(52, 73, 94, 0.7);
}
.clickMe {
  background: #fff;
  /* IE Fallback */
  background: rgba(255, 255, 255, 0.8);
  position: absolute;
  top: 180px;
  left: -60px;
  padding: 5px 7px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #3498db;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 800;
}
.clickMe:before {
  content: '';
  position: absolute;
  top: 6px;
  right: -5px;
  width: 0px;
  height: 0px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5 solid #fff;
  /* IE Fallback */
  border-left: 5px solid rgba(255, 255, 255, 0.8);
}


/* 19. Timeline Board */

.timeline {
  position: relative;
  width: 660px;
  margin: 0 auto;
  margin-top: 20px;
  padding: 1em 0;
  list-style-type: none;
}

.timeline:before {
    position: absolute;
    left: 50%;
    top: 0;
    content: ' ';
    display: block;
    width: 2px;
    height: 100%;
    margin-left: -3px;
    background: #ddd;
    z-index: 5;
}

.timeline li {
  padding: 1em 0;
}

.timeline li:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.direction-l {
  position: relative;
  width: 300px;
  float: left;
}
@media only screen and (max-width: 660px) {
    .timeline::before {
        display:none;
    }
}
.direction-r {
  position: relative;
  width: 300px;
  float: right;
}

.flag-wrapper {
  position: relative;
  display: inline-block;
  
  text-align: center;
}

.flag {
  position: relative;
  display: inline;
  background: rgb(248,248,248);
  padding: 6px 10px;
  border-radius: 5px;
  
  font-weight: 600;
  text-align: left;
}

.direction-l .flag {
  -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.direction-r .flag {
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.direction-l .flag:before,
.direction-r .flag:before {
  position: absolute;
  top: 50%;
  right: -40px;
  content: ' ';
  display: block;
  width: 12px;
  height: 12px;
  margin-top: -10px;
  background: #fff;
  border-radius: 10px;
  border: 4px solid rgb(255,80,80);
  z-index: 10;
}

.direction-r .flag:before {
  left: -40px;
}

.direction-l .flag:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  border: solid transparent;
  border-left-color: rgb(248,248,248);
  border-width: 8px;
  pointer-events: none;
}

.direction-r .flag:after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  border: solid transparent;
  border-right-color: rgb(248,248,248);
  border-width: 8px;
  pointer-events: none;
}

.time-wrapper {
  display: inline;
  
  line-height: 1em;
  font-size: 0.66666em;
  color: rgb(250,80,80);
  vertical-align: middle;
}

.direction-l .time-wrapper {
  float: left;
}

.direction-r .time-wrapper {
  float: right;
}

.time {
  display: inline-block;
  padding: 4px 6px;
  background: rgb(248,248,248);
}

.desc {
  margin: 1em 0.75em 0 0;
  
  font-size: 0.77777em;
  font-style: italic;
  line-height: 1.5em;
}

.direction-r .desc {
  margin: 1em 0 0 0.75em;
}

/* ================ Timeline Media Queries ================ */

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

.timeline {
    width: 100%;
    padding: 4em 0 1em 0;
}

.timeline li {
    padding: 2em 0;
}

.direction-l,
.direction-r {
    float: none;
    width: 100%;

    text-align: center;
}

.flag-wrapper {
    text-align: center;
}

.flag {
    background: rgb(255,255,255);
    z-index: 15;
}

.direction-l .flag:before,
.direction-r .flag:before {
  position: absolute;
  top: -30px;
    left: 50%;
    content: ' ';
    display: block;
    width: 12px;
    height: 12px;
    margin-left: -9px;
    background: #fff;
    border-radius: 10px;
    border: 4px solid rgb(255,80,80);
    z-index: 10;
}

.direction-l .flag:after,
.direction-r .flag:after {
    content: "";
    position: absolute;
    left: 50%;
    top: -8px;
    height: 0;
    width: 0;
    margin-left: -8px;
    border: solid transparent;
    border-bottom-color: rgb(255,255,255);
    border-width: 8px;
    pointer-events: none;
}

.time-wrapper {
    display: block;
    position: relative;
    margin: 4px 0 0 0;
    z-index: 14;
}

.direction-l .time-wrapper {
    float: none;
}

.direction-r .time-wrapper {
    float: none;
}

.desc {
    position: relative;
    margin: 1em 0 0 0;
    padding: 1em;
    background: rgb(245,245,245);
    -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20);
    -moz-box-shadow: 0 0 1px rgba(0,0,0,0.20);
    box-shadow: 0 0 1px rgba(0,0,0,0.20);
    
  z-index: 15;
}

.direction-l .desc,
.direction-r .desc {
    position: relative;
    margin: 1em 1em 0 1em;
    padding: 1em;
    
  z-index: 15;
}

}

@media screen and (min-width: 400px ?? max-width: 660px) {

.direction-l .desc,
.direction-r .desc {
    margin: 1em 4em 0 4em;
}

}

/* 20. Timeline 2 */

.timeline2 {
    position: relative;
    padding-bottom: 40px;
    background-color: #ecf0f5;
    color: #758697
}
.timeline2:before, .timeline2:after {
    background-color: #bec6ce;
    bottom: 20px;
    content: "";
    display: block;
    position: absolute
}
.timeline2:before {
    left: 49px;
    top: 20px;
    width: 1px
}
.timeline2:after {
    left: 46px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid #bec6ce;
    background-color: #ecf0f5
}
.timeline2-header {
    border-radius: 0;
    clear: both;
    margin-bottom: 50px;
    margin-top: 50px;
    position: relative
}
.timeline2-header .timeline2-header-title {
    display: inline-block;
    text-align: center;
    padding: 7px 15px;
    min-width: 100px
}
.timeline2 .timeline2-header:first-child {
    margin-bottom: 30px;
    margin-top: 15px
}
.timeline2-stat {
    width: 100px;
    float: left;
    text-align: center;
    padding-bottom: 15px
}
.timeline2-entry {
    margin-bottom: 25px;
    margin-top: 5px;
    position: relative;
    clear: both
}
.timeline2-entry-inner {
    position: relative
}
.timeline2-time {
    display: inline-block;
    padding: 2px 3px;
    background-color: #ecf0f5;
    color: #758697;
    font-size: .85em;
    max-width: 70px
}
.timeline2-icon {
    border-radius: 50%;
    display: block;
    margin: 0 auto;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 40px;
    margin-top: 5px;
    background-color: #ecf0f5
}
.timeline2-icon>i {
    line-height: 40px;
    vertical-align: .1em
}
.timeline2-icon img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    vertical-align: top
}
.timeline2-icon:empty {
    height: 12px;
    width: 12px;
    margin-top: 20px;
    border: 2px solid #bec6ce
}
.timeline2-label {
    background-color: #fff;
    border-radius: 0;
    margin-left: 85px;
    padding: 15px;
    position: relative;
    min-height: 50px;
    border: 1px solid #e7ecf3;
    border-bottom: 1px solid rgba(0, 0, 0, 0.17)
}
.timeline2-label:before, .timeline2-label:after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    top: 0
}
.timeline2-label:before {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #e6e6e6;
    margin: 15px 0 0 -10px
}
.timeline2-label:after {
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 9px solid #fff;
    margin: 15px 0 0 -8px
}
.card .timeline2, .card .timeline2:after, .card .timeline2-time, .card .timeline2-label, .card .timeline2-icon:not([class^="bg-"]):not([class*=" bg-"]) {
    background-color: #fff
}
.card .timeline2-label {
    box-shadow: none;
    border: 0;
    background-color: #f3f5f9;
    margin-left: 100px
}
.card .timeline2-label:before {
    display: none;
    border-right-color: #e3e3e3
}
.card .timeline2-label:after {
    border-right-color: #f3f5f9
}
@media(min-width:768px) {
    .two-column.timeline2 {
        text-align: center
    }
    .two-column.timeline2:before {
        left: 50%
    }
    .two-column.timeline2:after {
        left: 50%;
        margin-left: -2px
    }
    .two-column.timeline2 .timeline2-entry {
        width: 50%;
        text-align: left
    }
    .two-column.timeline2 .timeline2-stat {
        margin-left: -50px
    }
    .two-column.timeline2 .timeline2-entry:nth-child(odd) {
        float: right
    }
    .two-column.timeline2 .timeline2-entry:nth-child(odd) .timeline2-label {
        margin-left: 40px
    }
    .two-column.timeline2 .timeline2-header {
        text-align: center
    }
    .two-column.timeline2 .timeline2-entry:nth-child(even) {
        float: left
    }
    .two-column.timeline2 .timeline2-entry:nth-child(even) .timeline2-stat {
        left: 100%;
        position: relative;
        margin-left: -50px
    }
    .two-column.timeline2 .timeline2-entry:nth-child(even) .timeline2-label {
        left: -90px;
        margin-right: -40px
    }
    .two-column.timeline2 .timeline2-entry:nth-child(even) .timeline2-label:before, .two-column.timeline2 .timeline2-entry:nth-child(even) .timeline2-label:after {
        left: auto;
        right: 0;
        border-right: 0 solid transparent
    }
    .two-column.timeline2 .timeline2-entry:nth-child(even) .timeline2-label:before {
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid #e6e6e6;
        margin: 15px -10px 0 0
    }
    .two-column.timeline2 .timeline2-entry:nth-child(even) .timeline2-label:after {
        border-top: 9px solid transparent;
        border-bottom: 9px solid transparent;
        border-left: 9px solid #fff;
        margin: 15px -8px 0 0
    }
}
.bg-warning {
    background-color: #ffa726;
}
.bg-info {
    background-color: #00bcd4;
}
.bg-primary {
    background: #42a5f5;
}
.bg-success {
    background: #1ab394;
}
.bg-purple {
    background: #ba68c8;
    color: #fff;
}

/* 21. Profile */

/* Profile container */
.profile {
  margin: 20px 0;
}

/* Profile sidebar */
.profile-sidebar {
  padding: 20px 0 10px 0;
  background: #fff;
}

.profile-userpic img {
  float: none;
  margin: 0 auto;
  width: 50%;
  height: 50%;
  -webkit-border-radius: 50% !important;
  -moz-border-radius: 50% !important;
  border-radius: 50% !important;
}

.profile-usertitle {
  text-align: center;
  margin-top: 20px;
}

.profile-usertitle-name {
  color: #5a7391;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 7px;
}

.profile-usertitle-job {
  text-transform: uppercase;
  color: #1ab394;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 15px;
}

.profile-userbuttons {
  text-align: center;
  margin-top: 10px;
}

.profile-userbuttons .btn {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 15px;
  margin-right: 5px;
}

.profile-userbuttons .btn:last-child {
  margin-right: 0px;
}
    
.profile-usermenu {
  margin-top: 30px;
}

.profile-usermenu ul li {
  border-bottom: 1px solid #f0f4f7;
}

.profile-usermenu ul li:last-child {
  border-bottom: none;
}

.profile-usermenu ul li a {
  color: #93a3b5;
  font-size: 14px;
  font-weight: 400;
}

.profile-usermenu ul li a i {
  margin-right: 8px;
  font-size: 14px;
}

.profile-usermenu ul li a:hover {
    background-color: #f1f3f6;
    color: #1ab394;
    border-left: 2px solid #1ab394;
    margin-left: -2px;
}

.profile-usermenu ul li.active {
  border-bottom: none;
}

.profile-usermenu ul li.active a {
     color: #1ab394;
    background-color: #f1f3f6;
    border-left: 2px solid #1ab394;
    margin-left: -2px;
}

/* Profile Content */
.profile-content {
  padding: 20px;
  background: #fff;
}

/* Account Overview */

.options{
list-style-type: none;
margin: 0 0 10px 0;
padding: 0;
}

.options li{
 margin: 0;
 padding: 0 0 5px 5px; 
}

a{
  color: #1ab394;
  text-decoration: none
}

a:hover{
  text-decoration:none;
  color: #1ab394 !important;
}

.separator{
  border-bottom:1px solid #EAEAEA;
  margin: 5px 0 10px 0;
}

.tabler table{
  margin: 0px 0 10px 0 ;
}

.tabler{
  margin: 0 0 20px 0;
}

.tabler h3{
  font-weight:700;
  border-bottom: 1px solid #EAEAEA;
  color: #1ab394;
  margin: 0 0 5px 0;
  padding: 5px;
 font-size: 20px;
}
.iconmail {
    background: #f1f3f6;
    border: none;
}

.tabler td{
  padding: 3px 20px 3px 3px;
}

.tabler table > tbody > tr > td:first-child{font-weight:bold}

.specs{
  list-style-type: none;
  margin: 0;
  padding: 0 0 0 10px;
}

.specs li{
  padding: 0 0 5px 0;
}

.grayLG{background:linear-gradient(to bottom,#f7f8fa,#e7e9ec);background:-webkit-linear-gradient(to bottom,#f7f8fa,#e7e9ec);background:-moz-linear-gradient(to bottom,#f7f8fa,#e7e9ec);background:-o-linear-gradient(to bottom,#f7f8fa,#e7e9ec)}

a.submit, a.edit{color:#555;text-decoration:none;font-style:normal;padding:5px;border:1px solid #B6B6AB;border-radius:3px;margin:0 0 0 5px}
a.submit:hover, a.edit:hover{background:#f7f8fa}

a.edit{padding-left:10px;padding-right:10px}

.fright{
  float: right;
}

.fleft{
  float: left;
}

/* 22. Forums */

@media only screen and (max-width: 767px) {
    .forumsheading {
        display: none;
    }
}

/* 23. Invoice */

.invoice {
  background-color: #ffffff;
  border-radius: 10px;
  margin: 50px 0;
  padding: 50px 30px 30px;
}
.invoice header {
  overflow: hidden;
  margin-bottom: 60px;
}
.invoice header section:nth-of-type(1) {
  float: left;
}
.invoice header section:nth-of-type(1) h1 {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 2px;
  color: #344760;
  font-size: 25px;
  margin-top: 0;
  margin-bottom: 5px;
}
.invoice header section:nth-of-type(1) span {
  color: #b7bcc3;
  font-size: 14px;
  letter-spacing: 2px;
}
.invoice header section:nth-of-type(2) {
  float: right;
}
.invoice header section:nth-of-type(2) span {
  font-size: 21px;
  color: #b7bcc3;
  letter-spacing: 1px;
}
.invoice header section:nth-of-type(2) span:before {
  content: "#";
}
.invoice main {
  border: 1px dashed #b7bcc3;
  border-left-width: 0px;
  border-right-width: 0px;
  padding-top: 30px;
  padding-bottom: 30px;
}
.invoice main section {
  overflow: hidden;
}
.invoice main section span {
  float: left;
  color: #344760;
  font-size: 16px;
  letter-spacing: .5px;
}
.invoice main section span:nth-of-type(1) {
  width: 45%;
  margin-right: 5%;
}
.invoice main section span:nth-of-type(2) {
  width: 22.5%;
  margin-right: 5%;
}
.invoice main section span:nth-of-type(2), .invoice main section span:nth-of-type(3) {
  text-align: right;
}
.invoice main section span:nth-of-type(3) {
  width: 22.5%;
}
.invoice main section:nth-of-type(1) {
  margin-bottom: 30px;
}
.invoice main section:nth-of-type(1) span {
  color: #b7bcc3;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
}
.invoice main section:nth-of-type(2) {
  margin-bottom: 30px;
}
.invoice main section:nth-of-type(2) figure {
  overflow: hidden;
  margin: 0;
  margin-bottom: 20px;
  line-height: 160%;
}
.invoice main section:nth-of-type(2) figure:last-of-type {
  margin-bottom: 0;
}
.invoice main section:nth-of-type(3) span:nth-of-type(1) {
  width: 72.5%;
  font-weight: bold;
}
.invoice main section:nth-of-type(3) span:nth-of-type(2) {
  margin-right: 0 !important;
}
.invoice footer {
  text-align: right;
  margin-top: 30px;
}
.invoice footer a {
  font-size: 19px;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  letter-spacing: 1px;
}
.invoice footer a:after {
  content: "";
  width: 0%;
  height: 4px;
  position: absolute;
  right: 0;
  bottom: -10px;
  background-color: inherit;
  -webkit-transition: width 0.2s ease-in-out;
  -moz-transition: width 0.2s ease-in-out;
  transition: width 0.2s ease-in-out;
}
.invoice footer a:hover:after {
  width: 100%;
}
.invoice footer a:nth-of-type(1) {
  color: #b7bcc3;
  margin-right: 30px;
}
.invoice footer a:nth-of-type(1):after {
  background-color: #b7bcc3;
}
.invoice footer a:nth-of-type(2) {
  color: #fe8888;
}
.invoice footer a:nth-of-type(2):after {
  background-color: #fe8888;
}
.btn-success:hover {
    color: #eee !important;
}
/* Login Form*/

.login-page {
  
  padding: 8% 0 0;
  margin: auto;
}
.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form button {
  text-transform: uppercase;
  outline: 0;
  background: #4CAF50;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
  background: #43A047;
}
.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #4CAF50;
  text-decoration: none;
}

/* 24. Weather Widget */

#ajerez {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 9999;
}
#ajerez img {
  box-sizing: border-box;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 2px solid #7482A5;
  -webkit-transition: border-radius 0.2s ease-in-out;
  transition: border-radius 0.2s ease-in-out;
}
#ajerez img:hover {
  border-radius: 30%;
}



*, *:before, *:after {
  box-sizing: border-box;
}

.weather-wrapper {
  margin-top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.weather-card {
  margin: 20px 5px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  width: 270px;
  height: 270px;
  background-color: white;
  -webkit-animation: appear 500ms ease-out forwards;
          animation: appear 500ms ease-out forwards;
}
.weather-card h1 {
  position: absolute;
  font-weight: 300;
  font-size: 80px;
  color: #B8B8B8;
  bottom: 0;
  left: 35px;
  opacity: 0;
  -webkit-transform: translateX(150px);
          transform: translateX(150px);
  -webkit-animation: title-appear 500ms ease-out 500ms forwards;
          animation: title-appear 500ms ease-out 500ms forwards;
}
.weather-card p {
    position: absolute;
    font-weight: 300;
    font-size: 28px;
    color: #d2d2d2;
    top: 50%;
    left: 35px;
    -webkit-animation: title-appear 1s ease-out 500ms forwards;
    animation: title-appear 1s ease-out 500ms forwards;
}

.weather-icon {
  position: relative;
  width: 50px;
  height: 50px;
  top: 0;
  float: right;
  margin: 40px 40px 0 0;
  -webkit-animation: weather-icon-move 5s ease-in-out infinite;
          animation: weather-icon-move 5s ease-in-out infinite;
}

.sun {
  background: #FFCD41;
  border-radius: 50%;
  box-shadow: rgba(255, 255, 0, 0.1) 0 0 0 4px;
  -webkit-animation: light 800ms ease-in-out infinite alternate, weather-icon-move 5s ease-in-out infinite;
          animation: light 800ms ease-in-out infinite alternate, weather-icon-move 5s ease-in-out infinite;
}

@-webkit-keyframes light {
  from {
    box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 10px;
  }
  to {
    box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 17px;
  }
}

@keyframes light {
  from {
    box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 10px;
  }
  to {
    box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 17px;
  }
}
.cloud {
  margin-right: 60px;
  background: #b6cede;
  border-radius: 20px;
  width: 25px;
  height: 25px;
  box-shadow: #b6cede 24px -6px 0 2px, #b6cede 10px 5px 0 5px, #b6cede 30px 5px 0 2px, #b6cede 11px -8px 0 -3px, #b6cede 25px 11px 0 -1px;
}
.cloud:after {
  content: "";
  position: absolute;
  border-radius: 10px;
  background-color: transparent;
  width: 4px;
  height: 12px;
  left: 0;
  top: 31px;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
  -webkit-animation: rain 800ms ease-in-out infinite alternate;
          animation: rain 800ms ease-in-out infinite alternate;
}

@-webkit-keyframes rain {
  from {
    box-shadow: #2092A9 8px 0px, #2092A9 32px -6px, #2092A9 20px 0px;
  }
  to {
    box-shadow: #2092A9 8px 6px, #2092A9 32px 0px, #2092A9 20px 6px;
  }
}

@keyframes rain {
  from {
    box-shadow: #2092A9 8px 0px, #2092A9 32px -6px, #2092A9 20px 0px;
  }
  to {
    box-shadow: #2092A9 8px 6px, #2092A9 32px 0px, #2092A9 20px 6px;
  }
}
@-webkit-keyframes weather-icon-move {
  50% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
}
@keyframes weather-icon-move {
  50% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
}
.inspiration {
  margin-top: 80px;
  color: #709fbe;
  font-weight: 300;
  font-size: 24px;
  text-align: center;
}
.inspiration a {
  color: #FF8F8F;
  font-weight: 400;
  -webkit-animation: all 300ms ease-in-out;
          animation: all 300ms ease-in-out;
}

@-webkit-keyframes appear {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  75% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes appear {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  75% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes title-appear {
  from {
    opacity: 0;
    -webkit-transform: translateX(150px);
            transform: translateX(150px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@keyframes title-appear {
  from {
    opacity: 0;
    -webkit-transform: translateX(150px);
            transform: translateX(150px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

/*  Widget Profile */

.widgetprofile
{
  position: relative;
  background: #ffffff;
}

.widgetprofile > a
{
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 25px;
  height: 30px;
  line-height: 28px;
  vertical-align: middle;
  text-align: center;
  font-size: 20px;
  transform: scaleX(1.25);
}

.widgetprofile > .profile { padding: 15px 0 }

.widgetprofile > .profile > img
{
  display: block;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  padding: 5px;
  background: #FFF;
  border-radius: 50%;
}

.widgetprofile > .profile > h1
{
  width: 80%;
  margin: 0 auto;
  padding: 15px 0 8px;
  text-transform: uppercase;
  text-align: center;
  font-weight: 500;
  font-size: 13px;
  border-bottom: 1px solid #DDD;
}

.widgetprofile > .profile > h2
{
  padding: 7px 0 0;
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  color: #BBB;
}

.widgetprofile > .stats
{
  margin: 0 15px 15px;
  padding: 10px;
  background: #FFF;
}

.widgetprofile > .stats > .level
{
  position: relative;
  padding: 0 0 0 100px;
  background: #F8F8F8;
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
}

.widgetprofile > .stats > .level > span
{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 40px;
  background: #F0F0F0;
}

.widgetprofile > .stats > .progress { margin: 15px 0 }

.widgetprofile > .stats > .progress > label
{
  display: block;
  font-size: 9px;
}

.widgetprofile > .stats > .progress > label > span { float: right }

.widgetprofile > .stats > .progress > label b
{
  font-weight: inherit;
  color: #32D0AF;
}

.widgetprofile > .stats > .progress > em
{
  display: block;
  margin: 6px 0 0;
  background: #E5E5E5;
}

.widgetprofile > .stats > .progress > em > i
{
  display: block;
  height: 13px;
  background: #CCC;
}

.widgetprofile > .stats > .progress > em.purple > i { background: #8D47BF }
.widgetprofile > .stats > .progress > em.green > i { background: #32D0AF }
.widgetprofile > .stats > .progress > em.red > i { background: #E64C40 }

.widgetprofile > .stats > .wow
{
  font-size: 11px;
  color: #BBB;
}

.widgetprofile > .stats > .wow strong { color: #000 }


.widgetprofile > button.purple { background: #8D47BF }
.widgetprofile > button.green { background: #32D0AF }
.widgetprofile > button.red { background: #E64C40 }

.widgetprofile > button:first-of-type { margin-right: 0 }

/* 25. Timeline Widget */

.timeline-small {
  overflow: hidden;
}

.header {
  color: #fff;
}

.color-overlay {
  padding: 3em 2em;
  box-sizing: border-box;
  background: rgba(123, 94, 155, 0.5);
}

.header-name {
  font-size: 1.6em;
}

.header-sub {
  text-transform: uppercase;
  font-weight: 300;
  font-size: 0.6em;
  letter-spacing: 2px;
  margin-top: 2px;
}

.timeline-small-body ul {
  padding: 1em 0 0 2em;
  margin: 0;
  list-style: none;
  position: relative;
}
.timeline-small-body ul::before {
  content: ' ';
  height: 100%;
  width: 5px;
  background-color: #d9d9d9;
  position: absolute;
  top: 0;
  left: 2.4em;
  z-index: -1;
}
.timeline-small-body li div {
  display: inline-block;
  margin: 1em 0;
  vertical-align: top;
}
.timeline-small-body .bullet {
  width: 1rem;
  height: 1rem;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fff;
  z-index: 1;
  margin-right: 1rem;
  margin-top: 7%;
}
.timeline-small-body .bullet.pink {
  background-color: hotpink;
  border: 3px solid #F93B69;
}
.timeline-small-body .bullet.green {
  background-color: lightseagreen;
  border: 3px solid #B0E8E2;
}
.timeline-small-body .bullet.blue {
  background-color: aquamarine;
  border: 3px solid cadetblue;
}
.timeline-small-body .bullet.orange {
  background-color: salmon;
  border: 3px solid #EB8B6E;
}
.timeline-small-body .date {
  width: 23%;
  font-size: 0.75em;
  padding-top: 0.40rem;
  padding-right: 2rem;
}
.timeline-small-body .desc {
  width: 50%;
}
.timeline-small-body h3 {
  font-size: 0.9em;
  font-weight: 400;
  margin: 0;
}
.timeline-small-body h4 {
    margin: 0;
    font-size: 0.7em;
    font-weight: 400;
    color: #808080;
}

/* Bootstrap 5 compatibility (Spec theme) */
.media {
    display: flex;
    align-items: flex-start;
}
.media-body {
    flex: 1;
    min-width: 0;
}
.spec-modal-close {
    opacity: 0.85;
    float: right;
    font-size: 1.25rem;
    line-height: 1;
}
.navbar-toggler.mobile-menu-toggle {
    padding: 0.25rem 0.5rem;
    border: none;
    background: transparent;
}

/* #header: flex toolbar + BS5 horizontal .navbar-nav */
#header nav[role="navigation"] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    min-height: 62px;
    box-sizing: border-box;
    padding-right: 6px;
    overflow: visible;
    position: relative;
    z-index: 1;
}
/* spec-dash-toolbar-premium: align with layout 4 — mega grows, tray pinned right */
#header.spec-dash-toolbar-premium {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: nowrap;
    min-height: 62px;
}
#header.spec-dash-toolbar-premium #logo.light-version {
    display: flex;
    align-items: center;
    justify-content: center;
    float: none;
    flex: 0 0 auto;
    min-height: 62px;
    box-sizing: border-box;
}
#header.spec-dash-toolbar-premium .spec-dash-toolbar-toggle { order: 1; }
#header.spec-dash-toolbar-premium .spec-dash-mega-menu {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
}
#header.spec-dash-toolbar-premium .notification-wrap {
    order: 3;
    margin-left: auto !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}
#header.spec-dash-toolbar-premium .right-notification {
    float: none !important;
    display: flex !important;
    align-items: center;
    margin: 0 !important;
    height: auto;
    min-height: 62px;
}
#header.spec-dash-toolbar-premium .right-notification .navbar-right {
    float: none !important;
    margin-left: 0 !important;
    display: flex;
    align-items: center;
}
@media (max-width: 991.98px) {
    #header.spec-dash-toolbar-premium .spec-dash-toolbar-toggle { order: 1; }
    #header.spec-dash-toolbar-premium .notification-wrap {
        order: 1;
        margin-left: auto !important;
    }
    #header.spec-dash-toolbar-premium .spec-dash-mega-menu {
        order: 2;
        flex: 1 1 100%;
    }
}
@media (max-width: 767.98px) {
    #header.spec-dash-toolbar-premium .spec-dash-mega-menu { display: none !important; }
}

#header .header-link {
    float: none;
    display: flex;
    align-items: center;
    align-self: stretch;
    list-style: none;
    margin: 0 12px 0 0;
    padding: 0 16px;
    box-sizing: border-box;
}
#header .header-link > li {
    list-style: none;
    margin: 0;
    display: flex;
    align-items: center;
    align-self: stretch;
}
#header .header-link > li > a,
#header .header-link .left-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-height: 62px;
    padding: 0 6px;
    box-sizing: border-box;
}
#header .header-link .fa {
    font-size: 1.25rem;
    line-height: 1;
    vertical-align: middle;
}
#header .small-logo {
    float: none;
    margin: 0;
}
#header .mobile-menu {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    position: relative;
    margin-right: 0;
    z-index: 0;
}
#header .mobile-menu:has(.dropdown-menu.show) {
    z-index: 1100;
}
#header .navbar-right {
    float: none;
    margin-left: auto;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}
#header .navbar-right > .nav.navbar-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 0;
    padding-left: 0;
    gap: 0;
    position: relative;
    z-index: 5;
    isolation: isolate;
}
#header .navbar-right > .nav.navbar-nav > li {
    list-style: none;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    position: relative;
    z-index: 0;
}
#header .navbar-right > .nav.navbar-nav > li.dropdown.show {
    z-index: 1100;
}
#header .navbar-nav > li > .dropdown-toggle,
#header .navbar-nav > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 62px;
    height: auto;
    padding: 0 12px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    text-transform: none;
    line-height: 1;
    position: relative;
}
#header .navbar-nav > li > a .fa,
#header .navbar-nav > li > .dropdown-toggle .fa {
    font-size: 1.125rem;
    line-height: 1;
}
#header .navbar-nav > li:last-child > a {
    padding-right: 16px;
}
#header .label-menu-corner {
    position: relative;
}
#header .label-menu-corner .badge {
    right: 4px;
    top: 8px;
}
@media (max-width: 768px) {
    #header nav[role="navigation"] {
        flex-wrap: wrap;
        row-gap: 0;
        padding-right: 4px;
    }
    #header .header-link {
        order: 2;
        margin-right: 0;
        padding: 0 10px;
    }
    #header .small-logo {
        order: 1;
        flex: 1 1 auto;
    }
    #header .navbar-right {
        margin-left: auto;
    }
    #header .mobile-menu {
        margin-left: 8px;
    }
    #header .navbar-nav > li > .dropdown-toggle,
    #header .navbar-nav > li > a {
        padding: 0 10px;
        min-width: 44px;
    }
}
@media (max-width: 576px) {
    /* overflow-x: auto clips absolutely positioned .dropdown-menu — keep visible */
    #header nav[role="navigation"] {
        flex-wrap: wrap;
        overflow: visible;
        row-gap: 2px;
    }
    #header .small-logo {
        flex: 0 1 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #header .navbar-right > .nav.navbar-nav {
        flex-wrap: nowrap;
    }
}

/* Dashboard layouts 1–3 (#header): toolbar sequence + menus match layout 4 (index-4) */
body.spec-dashboard-home #header nav[role="navigation"] {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.25rem;
}
body.spec-dashboard-home #header nav[role="navigation"] > .header-link.spec-dash-toolbar-toggle,
body.spec-dashboard-home #header nav[role="navigation"] > .header-link {
    order: 1;
    flex: 0 0 auto;
}
body.spec-dashboard-home #header nav[role="navigation"] > .spec-dash-mega-menu,
body.spec-dashboard-home #header nav[role="navigation"] > .mega-menu.spec-dash-mega-menu {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    z-index: 2;
}
/* Layout 4 has no .small-logo in the nav — on desktop #logo shows the brand; hiding this avoids order:0 jumping ahead of the hamburger and tray */
@media (min-width: 769px) {
    body.spec-dashboard-home #header nav[role="navigation"] > .small-logo {
        display: none !important;
    }
}
body.spec-dashboard-home #header .spec-dash-mega-menu.yamm .navbar-nav > li.dropdown {
    position: relative !important;
    z-index: 1;
}
body.spec-dashboard-home #header .spec-dash-mega-menu.yamm .navbar-nav > li.dropdown.show {
    z-index: 1085;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .navbar-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .navbar-nav > li > a.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem !important;
    margin: 0 0.15rem;
    border-radius: 999px;
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #475569 !important;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .navbar-nav > li > a.dropdown-toggle .spec-oc-premium-dd-chevron {
    font-size: 11px;
    opacity: 0.65;
    margin-left: 2px;
    transition: transform 0.2s ease;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .navbar-nav > li.dropdown.show > a.dropdown-toggle .spec-oc-premium-dd-chevron {
    transform: rotate(180deg);
    opacity: 1;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .navbar-nav > li > a.dropdown-toggle:hover,
body.spec-dashboard-home #header .spec-dash-mega-menu .navbar-nav > li.dropdown.show > a.dropdown-toggle {
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.65) 0%, rgba(255, 255, 255, 0.95) 100%) !important;
    border-color: rgba(148, 163, 184, 0.25);
    color: #0f172a !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}
/* Large Menu panel — match index-4 (.spec-oc-premium-header mega .wide-full); override generic #header .dropdown-menu width caps */
body.spec-dashboard-home #header .spec-dash-mega-menu .dropdown-menu.wide-full {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    width: min(920px, calc(100vw - 1.5rem)) !important;
    max-width: calc(100vw - 1.5rem) !important;
    min-width: 0 !important;
    margin-top: -4px !important;
    padding: 10px 0 0 !important;
    border: none !important;
    border-radius: 16px !important;
    max-height: min(75vh, 640px);
    overflow-x: hidden;
    overflow-y: auto;
    transform: none !important;
    box-shadow:
        0 4px 6px -1px rgba(15, 23, 42, 0.06),
        0 24px 48px -12px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(148, 163, 184, 0.12);
}
body.spec-dashboard-home #header .spec-dash-mega-menu .dropdown-menu.wide-full > li {
    list-style: none;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .yamm-content {
    padding: 1.25rem 1.35rem 1.5rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
body.spec-dashboard-home #header .spec-dash-mega-menu .yamm-content .title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    padding-bottom: 0.65rem;
    margin-bottom: 0.5rem;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .yamm-content ul.list-unstyled > li > a {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.45rem 0.35rem !important;
    margin-bottom: 0 !important;
    border-radius: 8px;
    color: #334155 !important;
    font-size: 13px;
    transition: background 0.12s ease, color 0.12s ease;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .yamm-content .row > ul:nth-child(2) > li > a {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .yamm-content .row > ul:nth-child(2) .d-title {
    font-weight: 700;
    color: #1e293b !important;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .yamm-content .row > ul:nth-child(2) .d-desk {
    display: block;
    width: 100%;
    font-size: 12px;
    line-height: 1.4;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .yamm-content ul.list-unstyled > li > a:hover,
body.spec-dashboard-home #header .spec-dash-mega-menu .yamm-content ul.list-unstyled > li > a:focus {
    background: linear-gradient(90deg, rgba(236, 253, 245, 0.55) 0%, transparent 100%) !important;
    color: #0f766e !important;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .d-desk {
    color: #94a3b8 !important;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .custom-nav-img .desk {
    line-height: 1.55;
    color: #64748b !important;
}

/* Large Menu — row height per column; global .mega-bg is absolute to .yamm-content and was covering About Us */
body.spec-dashboard-home #header .spec-dash-mega-menu .yamm-content .row {
    align-items: flex-start;
}
/* Image & Description column — offcanvascss .icon-img isn’t loaded here; unconstrained images overflow into “About Us” */
body.spec-dashboard-home #header .spec-dash-mega-menu .yamm-content .row > ul[class*="col-"] {
    min-width: 0;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .yamm-content .row > ul.col-sm-3.list-unstyled:not(.custom-nav-img) > li > a {
    display: flex !important;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .yamm-content .row > ul.col-sm-3.list-unstyled:not(.custom-nav-img) .icon-img {
    float: none !important;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    max-width: 44px;
    object-fit: cover;
    border-radius: 12px;
    margin: 0 !important;
    vertical-align: middle;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .yamm-content .row > ul.col-sm-3.list-unstyled:not(.custom-nav-img) .icon-desk {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.2rem;
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .yamm-content .row > ul.col-sm-3.list-unstyled:not(.custom-nav-img) .icon-desk .d-title {
    display: block;
    width: 100%;
    font-weight: 700;
    line-height: 1.25;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .yamm-content .row > ul.col-sm-3.list-unstyled:not(.custom-nav-img) .icon-desk .d-desk {
    display: block;
    width: 100%;
    font-size: 12px;
    line-height: 1.35;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .yamm-content ul.custom-nav-img {
    position: relative;
    align-self: flex-start;
    padding-bottom: 7rem;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .yamm-content ul.custom-nav-img > li:last-child {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 130px;
    margin: 0;
    padding: 0;
    pointer-events: none;
    z-index: 0;
    list-style: none;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .yamm-content ul.custom-nav-img > li > p.desk {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    max-width: 100%;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .yamm-content ul.custom-nav-img .mega-bg {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    top: auto !important;
    width: min(100%, 260px) !important;
    height: 120px !important;
    background-size: contain;
    background-position: bottom right;
    opacity: 0.42;
}
body.spec-dashboard-home.spec-dashboard-dark #header .spec-dash-mega-menu .yamm-content ul.custom-nav-img .mega-bg {
    opacity: 0.26;
}
body.spec-dashboard-home.spec-dashboard-dark #header .spec-dash-mega-menu .yamm-content ul.custom-nav-img > li > p.desk {
    color: #cbd5e1 !important;
}

/* English menu — match index-4 language panel */
body.spec-dashboard-home #header .spec-dash-mega-menu .language-switch.spec-oc-premium-lang-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    min-width: 220px !important;
    max-width: none !important;
    padding: 0.5rem !important;
    margin-top: -4px !important;
    padding-top: 0.65rem !important;
    border: none !important;
    border-radius: 14px !important;
    transform: none !important;
    box-shadow:
        0 4px 6px -1px rgba(15, 23, 42, 0.06),
        0 18px 40px -12px rgba(15, 23, 42, 0.16),
        0 0 0 1px rgba(148, 163, 184, 0.12);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    overflow: hidden;
    z-index: 1101 !important;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .language-switch.spec-oc-premium-lang-menu > li {
    list-style: none;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .language-switch.spec-oc-premium-lang-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem !important;
    margin: 0.15rem 0;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #334155 !important;
    border: 1px solid transparent;
    transition: background 0.12s ease, border-color 0.12s ease;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .language-switch.spec-oc-premium-lang-menu > li > a:hover,
body.spec-dashboard-home #header .spec-dash-mega-menu .language-switch.spec-oc-premium-lang-menu > li > a:focus {
    background: rgba(236, 253, 245, 0.55) !important;
    border-color: rgba(20, 184, 166, 0.2);
    color: #0f766e !important;
}
body.spec-dashboard-home #header .spec-dash-mega-menu .language-switch.spec-oc-premium-lang-menu > li > a img {
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}
body.spec-dashboard-home #header .notification-wrap.spec-dash-notification-wrap {
    order: 3;
    margin-left: auto !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 0.35rem;
    width: auto;
    max-width: none;
}
body.spec-dashboard-home #header .notification-wrap .right-notification {
    float: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    height: auto;
    min-height: 62px;
}
body.spec-dashboard-home #header .notification-wrap .right-notification .navbar-right {
    float: none !important;
    margin-left: 0 !important;
    display: flex !important;
    align-items: center;
}
body.spec-dashboard-home #header .notification-wrap .right-notification .nav.navbar-nav {
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
}
body.spec-dashboard-home #header .notification-wrap .right-notification .navbar-nav > li.dropdown.show {
    z-index: 1090;
}
body.spec-dashboard-home #header .notification-wrap .right-notification .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    margin-top: 0.35rem !important;
    transform: none !important;
}
body.spec-dashboard-home #header .notification-wrap .right-notification .dropdown-menu.dropdown-menu-end {
    left: auto !important;
    right: 0 !important;
}

@media (max-width: 991.98px) {
    body.spec-dashboard-home #header nav[role="navigation"] > .header-link.spec-dash-toolbar-toggle,
    body.spec-dashboard-home #header nav[role="navigation"] > .header-link {
        order: 1;
    }
    body.spec-dashboard-home #header .notification-wrap.spec-dash-notification-wrap {
        order: 1;
        margin-left: auto !important;
    }
    body.spec-dashboard-home #header nav[role="navigation"] > .spec-dash-mega-menu,
    body.spec-dashboard-home #header nav[role="navigation"] > .mega-menu.spec-dash-mega-menu {
        order: 2;
        flex: 1 1 100%;
    }
    body.spec-dashboard-home #header .spec-dash-mega-menu .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    body.spec-dashboard-home #header .spec-dash-mega-menu .navbar-nav > li.dropdown {
        width: 100%;
    }
    body.spec-dashboard-home #header .spec-dash-mega-menu .navbar-nav > li > a.dropdown-toggle {
        width: 100%;
        justify-content: space-between;
        margin: 0 !important;
    }
    body.spec-dashboard-home #header .spec-dash-mega-menu .dropdown-menu.wide-full,
    body.spec-dashboard-home #header .spec-dash-mega-menu .language-switch.spec-oc-premium-lang-menu {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    body.spec-dashboard-home #header .spec-dash-mega-menu .yamm-content .row {
        margin-left: 0;
        margin-right: 0;
    }
    body.spec-dashboard-home #header .spec-dash-mega-menu .yamm-content .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    body.spec-dashboard-home #header .spec-dash-mega-menu {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* One row: menu · title (flex) · icon tray (end) — same visual rhythm as layout 4 */
    body.spec-dashboard-home #header nav[role="navigation"] > .header-link.spec-dash-toolbar-toggle,
    body.spec-dashboard-home #header nav[role="navigation"] > .header-link {
        order: 1;
        flex: 0 0 auto;
        margin-right: 0;
    }
    body.spec-dashboard-home #header nav[role="navigation"] > .small-logo {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
    }
    body.spec-dashboard-home #header .notification-wrap.spec-dash-notification-wrap {
        order: 1;
        margin-left: auto !important;
        flex: 0 0 auto;
    }
}

/* Header: brand tokens, icon treatment, dropdown panels */
:root {
    --spec-brand: #a978d1;
    --spec-brand-deep: #6b4a9a;
    --spec-accent: #3fb68b;
    --spec-header-muted: #64748b;
}
#header #logo.light-version {
    background: linear-gradient(145deg, #fdfdff 0%, #eef2f7 50%, #e6ebf4 100%);
    border-bottom: none;
    border-right: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.65), 4px 0 20px rgba(15, 23, 42, 0.04);
}
#header #logo.light-version span {
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #334155;
    font-size: 13px;
}
#header.spec-dash-toolbar-premium #logo.light-version .spec-dash-inl-logo-text {
    display: inline-flex;
    align-items: center;
    line-height: 1.25;
    margin: 0;
    padding: 0;
}
#header .small-logo .text-primary {
    color: var(--spec-brand-deep) !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 13px;
}
#header .header-link {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}
#header .header-link:hover {
    background: rgba(169, 120, 209, 0.1);
    border-color: rgba(169, 120, 209, 0.35);
}
#header .header-toolbar-icon {
    color: var(--spec-header-muted);
    transition: color 0.2s ease, transform 0.15s ease;
}
#header .header-link:hover .header-toolbar-icon {
    color: var(--spec-brand-deep);
}
#header .navbar-toggler.mobile-menu-toggle {
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%);
    padding: 0.42rem 0.55rem;
    color: var(--spec-header-muted);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
#header .navbar-toggler.mobile-menu-toggle:hover,
#header .navbar-toggler.mobile-menu-toggle:focus-visible {
    border-color: rgba(169, 120, 209, 0.5);
    color: var(--spec-brand-deep);
    outline: none;
}
#header .navbar-right .navbar-nav > li > .dropdown-toggle,
#header .navbar-right .navbar-nav > li > a {
    border-radius: 11px;
    color: var(--spec-header-muted);
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
#header .navbar-right .navbar-nav > li > .dropdown-toggle:hover,
#header .navbar-right .navbar-nav > li > .dropdown-toggle:focus,
#header .navbar-right .navbar-nav > li > a:hover,
#header .navbar-right .navbar-nav > li > a:focus,
#header .navbar-right .navbar-nav > li.dropdown.show > .dropdown-toggle {
    background: linear-gradient(135deg, rgba(169, 120, 209, 0.16) 0%, rgba(63, 182, 139, 0.1) 100%);
    color: var(--spec-brand-deep);
    box-shadow: 0 2px 12px rgba(169, 120, 209, 0.12);
}
#header .navbar-right .nav-icon-notify {
    color: #a855f7;
}
#header .navbar-right .nav-icon-inbox {
    color: #0ea5e9;
}
#header .navbar-right .nav-icon-account {
    color: var(--spec-accent);
}
#header .navbar-right .dropdown-toggle:hover .nav-icon-notify,
#header .navbar-right .dropdown-toggle:hover .nav-icon-inbox,
#header .navbar-right a:hover .nav-icon-account,
#header .navbar-right .dropdown.show .nav-icon-notify,
#header .navbar-right .dropdown.show .nav-icon-inbox {
    color: var(--spec-brand-deep);
}
#header .label-menu-corner .badge {
    font-weight: 700;
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--spec-brand) 0%, #8b5cf6 100%) !important;
    border: 2px solid #fff;
    box-shadow: 0 2px 10px rgba(169, 120, 209, 0.45);
    right: 2px;
    top: 6px;
}
#header .dropdown-menu {
    border: none !important;
    border-radius: 14px !important;
    padding: 0 !important;
    margin-top: 0.4rem !important;
    min-width: 300px;
    max-width: min(380px, 96vw);
    box-shadow:
        0 4px 6px -1px rgba(15, 23, 42, 0.06),
        0 20px 50px -12px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(148, 163, 184, 0.14);
    overflow: hidden;
    z-index: 1101 !important;
    animation: none !important;
    transform: none !important;
}
#header .dropdown-menu.show {
    animation: none !important;
}
#header .dropdown-menu::before {
    content: "";
    display: block;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--spec-brand) 0%, var(--spec-accent) 100%);
}
#header .dropdown-menu .title {
    padding: 14px 18px !important;
    text-align: center;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #475569;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
    margin: 0;
}
#header .dropdown-menu.hdropdown li {
    padding: 0 !important;
    background: #fff !important;
    border-bottom: 1px solid rgba(241, 245, 249, 0.95) !important;
}
#header .dropdown-menu.hdropdown li > a {
    display: block;
    padding: 12px 18px !important;
    font-size: 13px;
    line-height: 1.45;
    color: #475569;
    white-space: normal;
    transition: background 0.15s ease, padding-left 0.15s ease, color 0.15s ease;
}
#header .dropdown-menu.hdropdown li > a:hover,
#header .dropdown-menu.hdropdown li > a:focus {
    background: linear-gradient(90deg, rgba(169, 120, 209, 0.1) 0%, transparent 100%) !important;
    padding-left: 20px !important;
    color: var(--spec-brand-deep);
}
#header .dropdown-menu.hdropdown.notification li > a {
    padding: 14px 18px !important;
}
#header .dropdown-menu.hdropdown li.summary {
    padding: 0 !important;
    background: transparent !important;
    border-bottom: none !important;
}
#header .dropdown-menu.hdropdown li.summary > a {
    display: block;
    padding: 12px 16px !important;
    font-weight: 600;
    font-size: 12px;
    color: var(--spec-brand-deep) !important;
    text-align: center;
    background: #f8fafc !important;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
}
#header .dropdown-menu.hdropdown li.summary > a:hover {
    background: rgba(169, 120, 209, 0.08) !important;
    color: var(--spec-brand-deep) !important;
}

/* Layouts 1–3 (#header.spec-dash-toolbar-premium): toolbar sequence + right tray (parity with layout 4) */
#header.spec-dash-toolbar-premium nav[role="navigation"] {
    flex-wrap: wrap;
    align-items: center;
}
#header.spec-dash-toolbar-premium .spec-dash-toolbar-toggle {
    order: 1;
    flex: 0 0 auto;
}
#header.spec-dash-toolbar-premium .spec-dash-mega-menu {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    display: flex !important;
    align-items: center;
}
#header.spec-dash-toolbar-premium .spec-dash-notification-wrap {
    order: 3;
    margin-left: auto !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}
#header.spec-dash-toolbar-premium .spec-dash-notification-wrap .right-notification {
    float: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    gap: 0.35rem;
    min-height: 62px;
    height: auto;
}
#header.spec-dash-toolbar-premium .spec-dash-notification-wrap .right-notification .navbar-right {
    float: none !important;
    margin-left: 0 !important;
    display: flex !important;
    align-items: center;
}
#header.spec-dash-toolbar-premium .spec-dash-notification-wrap .right-notification .nav.navbar-nav {
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
}
#header.spec-dash-toolbar-premium .spec-dash-notification-wrap .right-notification .navbar-nav > li.dropdown.show {
    z-index: 1090;
}
#header.spec-dash-toolbar-premium .spec-dash-notification-wrap .right-notification .dropdown-menu.dropdown-menu-end {
    left: auto !important;
    right: 0 !important;
}
#header.spec-dash-toolbar-premium .dropdown-menu.hdropdown.notification li:first-child > a {
    color: #15803d;
    font-weight: 600;
}
@media (max-width: 991.98px) {
    #header.spec-dash-toolbar-premium .spec-dash-toolbar-toggle {
        order: 1;
    }
    #header.spec-dash-toolbar-premium .spec-dash-notification-wrap {
        order: 1;
        margin-left: auto !important;
    }
    #header.spec-dash-toolbar-premium .spec-dash-mega-menu {
        order: 2;
        flex: 1 1 100%;
    }
}
@media (max-width: 767.98px) {
    #header.spec-dash-toolbar-premium .spec-dash-mega-menu {
        display: none !important;
    }
}

/* Layouts 1–3 — toolbar: vertically center row; unify control heights (mega pills ≈ tray icons) */
#header.spec-dash-toolbar-premium {
    align-items: center;
}
#header.spec-dash-toolbar-premium nav[role="navigation"] {
    align-items: center;
}
#header.spec-dash-toolbar-premium .header-link > li > a,
#header.spec-dash-toolbar-premium .header-link .left-sidebar-toggle {
    min-height: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#header.spec-dash-toolbar-premium .spec-dash-notification-wrap .navbar-right .navbar-nav > li > a,
#header.spec-dash-toolbar-premium .spec-dash-notification-wrap .navbar-right .navbar-nav > li > .dropdown-toggle {
    min-height: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}
#header.spec-dash-toolbar-premium .spec-dash-notification-wrap .header-toolbar-icon {
    font-size: 1.2rem;
    line-height: 1;
    vertical-align: middle;
}

/* Dashboard home — premium header: even horizontal rhythm + shared 52px rail */
body.spec-dashboard-home #header.spec-dash-toolbar-premium {
    min-height: 52px;
    padding-right: 10px;
    box-sizing: border-box;
}
body.spec-dashboard-home #header.spec-dash-toolbar-premium #logo.light-version {
    min-height: 52px;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}
body.spec-dashboard-home #header.spec-dash-toolbar-premium nav[role="navigation"] {
    min-height: 52px;
    column-gap: 0.35rem;
    padding-right: 6px;
    box-sizing: border-box;
}
body.spec-dashboard-home #header.spec-dash-toolbar-premium .header-link {
    margin: 0 8px 0 0;
    padding: 0 10px;
    align-self: center;
}
body.spec-dashboard-home #header.spec-dash-toolbar-premium .spec-dash-mega-menu .navbar-nav > li > a.dropdown-toggle {
    min-height: 36px;
    height: 36px;
    padding: 0 0.65rem !important;
    margin: 0 0.1rem;
    border-radius: 8px !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.07em !important;
    line-height: 1.2 !important;
    box-sizing: border-box;
}
body.spec-dashboard-home #header.spec-dash-toolbar-premium .spec-dash-notification-wrap .right-notification {
    min-height: 52px;
}

/* Mobile-only account menu (replaces full-width collapse panel) */
#header .mobile-account-menu {
    min-width: 240px;
    max-width: min(280px, 94vw);
    padding: 0.4rem 0 !important;
    margin-top: 0.35rem !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow:
        0 4px 6px -1px rgba(15, 23, 42, 0.06),
        0 20px 50px -12px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(148, 163, 184, 0.14);
    overflow: hidden;
    z-index: 1101 !important;
    animation: none !important;
}
#header .mobile-account-menu::before {
    content: "";
    display: block;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--spec-brand) 0%, var(--spec-accent) 100%);
}
#header .mobile-account-menu .dropdown-header {
    font-size: 10px;
    letter-spacing: 0.14em;
    font-weight: 700;
    padding-top: 0.65rem !important;
    padding-bottom: 0.35rem !important;
}
#header .mobile-account-menu .dropdown-item {
    padding: 0.55rem 1.1rem;
    font-size: 13px;
    color: #475569;
    display: flex;
    align-items: center;
}
#header .mobile-account-menu .dropdown-item:hover,
#header .mobile-account-menu .dropdown-item:focus {
    background: linear-gradient(90deg, rgba(169, 120, 209, 0.1) 0%, transparent 100%);
    color: var(--spec-brand-deep);
}
#header .mobile-account-menu .dropdown-divider {
    margin: 0.25rem 0;
    opacity: 1;
    border-color: rgba(148, 163, 184, 0.2);
}

.input-group > .input-group-btn {
    display: flex;
    align-items: stretch;
}
.input-group > span.input-group-btn {
    display: flex;
    align-items: stretch;
}
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}
.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 2px;
}
.metismenu .collapse.in,
.metismenu .collapse.show {
    display: block;
}

/* ========== #left-sidebar — premium surface + BS5-friendly nav ========== */
#left-sidebar {
    background: linear-gradient(180deg, #fafbfc 0%, #f1f5f9 45%, #eef2f6 100%);
    border-left: none;
    border-right: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 6px 0 28px rgba(15, 23, 42, 0.07);
}
#left-sidebar > .p-m:first-of-type {
    background: linear-gradient(160deg, rgba(169, 120, 209, 0.09) 0%, rgba(255, 255, 255, 0.4) 45%, transparent 100%);
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    padding-top: 1.15rem !important;
    padding-bottom: 1.15rem !important;
}
#left-sidebar #sidebar-close.sidebar-button,
#left-sidebar .sidebar-button#sidebar-close {
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    padding: 0.4rem 0.55rem !important;
    line-height: 1;
}
#left-sidebar #sidebar-close.sidebar-button:hover {
    border-color: rgba(169, 120, 209, 0.5);
    color: var(--spec-brand-deep, #6b4a9a);
}
#left-sidebar .profile-picture {
    padding: 0.75rem 0.25rem 0.35rem;
    text-align: center;
}
#left-sidebar .profile-picture .rounded-circle {
    box-shadow: 0 4px 16px rgba(169, 120, 209, 0.3);
    border: 3px solid #fff;
    outline: 1px solid rgba(148, 163, 184, 0.25);
    outline-offset: 2px;
}
#left-sidebar .stats-label .font-extra-bold {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #0f172a;
}
#left-sidebar .stats-label .dropdown-toggle small {
    font-weight: 600;
    letter-spacing: 0.03em;
}
#left-sidebar .dropdown-menu {
    border: none;
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(148, 163, 184, 0.12);
    padding: 0.4rem 0;
    min-width: 188px;
    margin-top: 0.35rem !important;
}
#left-sidebar .dropdown-menu > li > a {
    padding: 0.5rem 1rem;
    font-size: 13px;
    display: block;
    color: #475569;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
#left-sidebar .dropdown-menu > li > a:hover,
#left-sidebar .dropdown-menu > li > a:focus {
    background: linear-gradient(90deg, rgba(169, 120, 209, 0.1) 0%, transparent 100%);
    color: var(--spec-brand-deep, #6b4a9a);
}
#left-sidebar .dropdown-menu .dropdown-divider {
    margin: 0.3rem 0;
    opacity: 1;
    border-color: rgba(148, 163, 184, 0.2);
}
#left-sidebar > .p-m:first-of-type .row.m-t-sm h3 {
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0f172a;
}
#left-sidebar > .p-m:first-of-type .row.m-t-sm .font-bold {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
#left-sidebar > .p-m:first-of-type > p {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;
    margin-top: 0.75rem;
    margin-bottom: 0.4rem;
}
#left-sidebar .progress.full.progress-small,
#left-sidebar .progress.progress-small {
    height: 9px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.22) !important;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
}
#left-sidebar .progress .progress-bar {
    border-radius: 999px;
    font-size: 0;
    line-height: 0;
    color: transparent;
    box-shadow: 0 0 14px rgba(63, 182, 139, 0.35);
}
#left-sidebar .progress-bar-success,
#left-sidebar .progress-bar.bg-success {
    background: linear-gradient(90deg, #34d399 0%, #3fb68b 50%, #2dd4bf 100%) !important;
}
#left-sidebar > .p-m:first-of-type,
#left-sidebar > .p-m:last-of-type {
    flex-shrink: 0;
}
#left-sidebar > .p-m.bg-light.border-bottom.border-top {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#left-sidebar #navigation {
    padding: 0 0 1.25rem;
    margin-top: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
#left-sidebar #navigation::-webkit-scrollbar {
    width: 8px;
}
#left-sidebar #navigation::-webkit-scrollbar-track {
    background: rgba(148, 163, 184, 0.12);
    border-radius: 10px;
}
#left-sidebar #navigation::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(169, 120, 209, 0.45) 0%, rgba(63, 182, 139, 0.4) 100%);
    border: 2px solid transparent;
    background-clip: padding-box;
}
#left-sidebar #side-menu.nav.metismenu,
#left-sidebar #side-menu.metismenu {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    background: transparent !important;
    padding: 0 0.55rem 1rem;
    margin: 0;
}
#left-sidebar #side-menu li {
    list-style: none;
    border-bottom: none;
    border-top: none;
}
#left-sidebar #side-menu > li {
    border: none;
    border-radius: 12px;
    margin-bottom: 5px;
    list-style: none;
    background: transparent;
}
#left-sidebar #side-menu > li:first-child {
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}
#left-sidebar #side-menu > li > a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-radius: 12px;
    padding: 12px 14px !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid transparent;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
#left-sidebar #side-menu > li > a:hover,
#left-sidebar #side-menu > li > a:focus {
    background: #fff !important;
    color: var(--spec-brand-deep, #6b4a9a) !important;
    border-color: rgba(169, 120, 209, 0.22);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
}
#left-sidebar #side-menu > li.active > a {
    background: linear-gradient(135deg, rgba(169, 120, 209, 0.16) 0%, rgba(63, 182, 139, 0.1) 100%) !important;
    color: #6b4a9a !important;
    border-color: rgba(169, 120, 209, 0.28);
    box-shadow: 0 4px 18px rgba(169, 120, 209, 0.1);
}
#left-sidebar #side-menu .nav-second-level.collapse {
    border-radius: 0 0 12px 12px;
}
#left-sidebar #side-menu .nav-second-level {
    list-style: none;
    padding: 0.35rem 0 0.55rem !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-top: none;
}
#left-sidebar #side-menu li .nav-second-level li a {
    padding: 9px 12px 9px 20px !important;
    margin: 2px 8px;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    border-radius: 8px;
    letter-spacing: 0;
    text-transform: none !important;
    display: block;
}
#left-sidebar #side-menu li .nav-second-level li a:hover,
#left-sidebar #side-menu li .nav-second-level li a:focus {
    background: rgba(169, 120, 209, 0.08) !important;
    color: #6b4a9a !important;
}
#left-sidebar #side-menu li .nav-second-level li.active a {
    background: rgba(169, 120, 209, 0.12) !important;
    color: #6b4a9a !important;
    font-weight: 600 !important;
}
#left-sidebar #side-menu li .nav-third-level li a {
    padding: 8px 12px 8px 28px !important;
    font-size: 12px !important;
    margin: 2px 8px;
}
#left-sidebar .p-m.bg-light.border-bottom.border-top {
    background: transparent !important;
    border: none !important;
    padding-top: 0 !important;
}
#left-sidebar .fa.arrow {
    opacity: 0.55;
    font-size: 12px;
}
#left-sidebar #side-menu > li.active > a .fa.arrow {
    opacity: 0.9;
}

/* Light skin + left drawer: keep premium nav (global light #side-menu rules target #menu layout) */
body.light-skin #left-sidebar #side-menu > li > a {
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    color: #475569 !important;
}
body.light-skin #left-sidebar #side-menu li .nav-second-level li a {
    text-transform: none !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
}
body.light-skin #left-sidebar .profile-picture {
    display: block;
}

/* Dashboard light theme — left drawer list rows + panel bodies (pair with .spec-dashboard-dark rules) */
body.spec-dashboard-home:not(.spec-dashboard-dark) #left-sidebar #side-menu > li {
    border: none;
    background: transparent;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) #left-sidebar #side-menu .nav-second-level {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(148, 163, 184, 0.16);
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .specpanel > .card-body:not(.colorplate1):not(.colorplate2):not(.colorplate3):not(.colorplate4) {
    background: #ffffff;
    border: 1px solid var(--spec-panel-card-border);
    color: #334155;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

/* ========== #right-sidebar — premium panel + native scroll (.nano-content) ========== */
#right-sidebar.right-sidebar,
#right-sidebar {
    background: linear-gradient(180deg, #fafbfc 0%, #f4f6f9 50%, #eef2f6 100%);
    border-left: none;
    box-shadow: -8px 0 32px rgba(15, 23, 42, 0.08);
}
#right-sidebar #aside-container {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    direction: ltr;
}
#right-sidebar #aside {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#right-sidebar .nano {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: auto !important;
    max-height: none !important;
    position: relative;
}
#right-sidebar .nano-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 0 12px;
}
#right-sidebar .nano-content::-webkit-scrollbar {
    width: 8px;
}
#right-sidebar .nano-content::-webkit-scrollbar-track {
    background: rgba(148, 163, 184, 0.12);
    border-radius: 10px;
}
#right-sidebar .nano-content::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(169, 120, 209, 0.45) 0%, rgba(63, 182, 139, 0.4) 100%);
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* Settings tab — Bootstrap 5 progress (valid single .progress wrapper) */
#right-sidebar .spec-rs-b5-progress {
    height: 0.65rem;
    border-radius: 50rem;
    background-color: rgba(148, 163, 184, 0.22);
    overflow: hidden;
}
#right-sidebar .spec-rs-b5-progress .progress-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35);
}

#right-sidebar .spec-right-sidebar-tabs {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 10px 8px 0 !important;
    margin: 0 !important;
    gap: 4px;
    border: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.88) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(148, 163, 184, 0.25);
}
#right-sidebar .spec-right-sidebar-tabs .nav-item {
    flex: 1 1 0;
    min-width: 0;
}
#right-sidebar .spec-right-sidebar-tabs .nav-link {
    border: 1px solid transparent;
    border-radius: 10px 10px 0 0;
    padding: 0.45rem 0.35rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    background: transparent;
    text-align: center;
    white-space: nowrap;
}
#right-sidebar .spec-right-sidebar-tabs .nav-link:hover {
    color: var(--spec-brand-deep, #6b4a9a);
    border-color: rgba(148, 163, 184, 0.25);
    background: rgba(255, 255, 255, 0.7);
}
#right-sidebar .spec-right-sidebar-tabs .nav-link.active {
    color: var(--spec-brand-deep, #6b4a9a);
    background: #fff !important;
    border-color: rgba(148, 163, 184, 0.35);
    border-bottom-color: #fff;
    box-shadow: 0 -2px 12px rgba(169, 120, 209, 0.12);
}
#right-sidebar .spec-right-sidebar-tabs .nav-link i {
    display: block;
    font-size: 16px;
    margin-bottom: 2px;
    opacity: 0.85;
}
#right-sidebar .tab-content {
    padding-top: 0.25rem;
}
#right-sidebar .list-group.bg-trans .list-group-item {
    border: none;
    border-radius: 12px;
    margin: 4px 10px;
    padding: 0.65rem 0.75rem;
    background: rgba(255, 255, 255, 0.65);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
#right-sidebar .list-group.bg-trans .list-group-item:hover {
    background: #fff;
    box-shadow: 0 4px 14px rgba(169, 120, 209, 0.12);
}
#right-sidebar .list-group.bg-trans .list-group-item .media-body p.mar-no {
    font-weight: 600;
    color: #0f172a;
    font-size: 13px;
    margin-bottom: 2px;
}
#right-sidebar .pad-hor.text-semibold.text-main,
#right-sidebar p.text-semibold.text-main.mar-no {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748b !important;
    margin-top: 0.75rem;
    margin-bottom: 0.35rem;
}
#right-sidebar hr {
    margin: 0.65rem 12px;
    opacity: 1;
    border-color: rgba(148, 163, 184, 0.22);
}
#right-sidebar .badge.badge-warning {
    background: #fbbf24;
    color: #1e293b;
}
#right-sidebar .badge.badge-success {
    background: #34d399;
    color: #064e3b;
}
#right-sidebar .badge.badge-info {
    background: #38bdf8;
    color: #0c4a6e;
}
#right-sidebar .badge.badge-danger {
    background: #f87171;
    color: #450a0a;
}
#right-sidebar .badge.badge-purple {
    background: #a78bfa;
    color: #fff;
}
#right-sidebar .btn-success,
#right-sidebar .btn.btn-success {
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(52, 211, 153, 0.35);
}
#right-sidebar .img-xs.rounded-circle {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    border: 2px solid #fff;
    outline: 1px solid rgba(148, 163, 184, 0.2);
    outline-offset: 0;
}

/* Right sidebar — Family block (distinct from Friends / other lists) */
#right-sidebar .rs-section-family {
    margin: 6px 8px 16px;
    padding: 14px 12px 12px;
    border-radius: 16px;
    background: linear-gradient(
        155deg,
        rgba(253, 242, 248, 0.97) 0%,
        rgba(250, 245, 255, 0.92) 42%,
        rgba(238, 242, 255, 0.75) 100%
    );
    border: 1px solid rgba(244, 114, 182, 0.22);
    box-shadow:
        0 10px 32px rgba(167, 139, 250, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
#right-sidebar .rs-section-family-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(244, 114, 182, 0.14);
}
#right-sidebar .rs-section-family-title {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
#right-sidebar .rs-section-family-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #f472b6 0%, #c084fc 50%, #818cf8 100%);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    box-shadow: 0 4px 16px rgba(244, 114, 182, 0.45);
}
#right-sidebar .rs-section-family-heading-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
#right-sidebar .rs-section-family-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9d174d;
    line-height: 1.2;
}
#right-sidebar .rs-section-family-tagline {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #a855a7;
    opacity: 0.92;
    line-height: 1.25;
}
#right-sidebar .rs-section-family-badge {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 11px;
    padding: 0.42em 0.75em;
    border-radius: 999px;
    border: 1px solid rgba(251, 191, 36, 0.45);
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.28);
}
#right-sidebar .rs-section-family-list {
    margin: 0 !important;
    padding: 0;
    background: transparent !important;
}
#right-sidebar .rs-section-family-list .list-group-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 7px !important;
    padding: 0.65rem 0.75rem 0.65rem 0.7rem !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(244, 114, 182, 0.12) !important;
    border-left: 3px solid rgba(244, 114, 182, 0.35) !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
#right-sidebar .rs-section-family-list .list-group-item:last-child {
    margin-bottom: 0 !important;
}
#right-sidebar .rs-section-family-list .list-group-item:hover {
    background: #fff !important;
    border-left-color: #db2777 !important;
    border-color: rgba(244, 114, 182, 0.22) !important;
    box-shadow: 0 6px 20px rgba(219, 39, 119, 0.12);
}
#right-sidebar .rs-section-family-list .media-left {
    flex-shrink: 0;
    position: relative;
}
#right-sidebar .rs-section-family-list .media-body {
    flex: 1 1 auto;
    min-width: 0;
}
#right-sidebar .rs-section-family-list .media-body p.mar-no {
    font-weight: 700;
    color: #831843;
}
#right-sidebar .rs-section-family-list .media-body small.text-muted {
    color: #a21caf !important;
    opacity: 0.85;
}
#right-sidebar .rs-section-family-list .img-xs.rounded-circle {
    width: 40px;
    height: 40px;
    border-width: 2px;
    box-shadow: 0 3px 12px rgba(219, 39, 119, 0.15);
}

/* ========== index.html — dashboard home (.spec-dashboard-home) ========== */
.spec-dashboard-home {
    --spec-dash-section-gap: 1.5rem;
    --spec-dash-card-gap: 1.125rem;
    /* Panel .card-body borders — overridden on body.spec-dashboard-home.spec-dashboard-dark */
    --spec-panel-card-border: rgba(148, 163, 184, 0.18);
    /* Off-canvas .navigation-title (default-theme-light.css) — overridden in dark mode on body */
    --spec-nav-title-border: rgba(148, 163, 184, 0.24);
}
.spec-dashboard-home #wrapper {
    background: linear-gradient(180deg, #eef2f6 0%, #f1f3f6 35%, #e8ecf1 100%);
}

/* Section labels in off-canvas side nav (index-4/5/6) — beats default-theme-light #f1f3f6 borders */
body.spec-dashboard-home .side-navigation .navigation-title {
    border-top: 1px solid var(--spec-nav-title-border) !important;
    border-bottom: 1px solid var(--spec-nav-title-border) !important;
}

/* Dashboard panels — stacked .card-body separators (light) */
.spec-dashboard-home .specpanel > .card-body + .card-body {
    border-top: 1px solid var(--spec-panel-card-border);
}
.spec-dashboard-home .specpanel .card .card-body {
    border-top: 1px solid var(--spec-panel-card-border);
}
.spec-dashboard-home .specpanel .card > .card-header + .card-body {
    border-top: none;
}
.spec-dashboard-home .content {
    padding-top: 28px;
    padding-bottom: 48px;
}
.spec-dashboard-home .content > .spec-dash-hero {
    margin-bottom: var(--spec-dash-section-gap);
}
.spec-dashboard-home .content > .row.spec-dash-kpi-row,
.spec-dashboard-home .content > .row.spec-dash-chart-row,
.spec-dashboard-home .content > .row.spec-index2-widgets,
.spec-dashboard-home .content > .row.spec-index3-widgets,
.spec-dashboard-home .content > .row.spec-dash-lower {
    margin-bottom: var(--spec-dash-section-gap);
}
.spec-dashboard-home .spec-dash-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 0;
    padding: 1.35rem 1.5rem 1.4rem;
    border-radius: 18px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(250, 245, 255, 0.9) 38%,
        rgba(241, 245, 249, 0.92) 100%
    );
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow:
        0 12px 40px rgba(15, 23, 42, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}
.spec-dashboard-home .spec-dash-hero-main {
    flex: 1 1 220px;
    min-width: 0;
}
.spec-dashboard-home .spec-dash-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7c3aed;
    margin-bottom: 0.35rem;
}
.spec-dashboard-home .spec-dash-hero-kicker i {
    opacity: 0.9;
}
.spec-dashboard-home .spec-dash-hero-title {
    font-size: clamp(1.45rem, 2.5vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f172a;
    margin: 0 0 0.35rem;
    line-height: 1.15;
}
.spec-dashboard-home .spec-dash-hero-lead {
    margin: 0;
    max-width: 36rem;
    font-size: 14px;
    line-height: 1.55;
    color: #64748b;
}
.spec-dashboard-home .spec-dash-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.spec-dashboard-home .spec-dash-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.spec-dashboard-home .spec-dash-hero-pill strong {
    color: #0f172a;
    font-weight: 700;
}
.spec-dashboard-home .spec-dash-hero-pill--live {
    border-color: rgba(52, 211, 153, 0.45);
    color: #047857;
    background: linear-gradient(90deg, rgba(209, 250, 229, 0.9), rgba(255, 255, 255, 0.95));
}
.spec-dashboard-home .spec-dash-hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.35);
    animation: spec-dash-pulse 2s ease-in-out infinite;
}
@keyframes spec-dash-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.55;
    }
}
.spec-dashboard-home .spec-dash-kpi-row > [class*="col"] {
    display: flex;
    flex-direction: column;
}
.spec-dashboard-home .spec-dash-kpi-row > [class*="col"] > .specpanel {
    margin-bottom: 0;
    flex: 1 1 auto;
}
.spec-dashboard-home .spec-dash-chart-row > [class*="col"] {
    display: flex;
    flex-direction: column;
}
.spec-dashboard-home .spec-dash-chart-row > [class*="col"] > .specpanel {
    flex: 1 1 auto;
    margin-bottom: 0;
}
.spec-dashboard-home .spec-dash-lower > [class*="col"] {
    display: flex;
    flex-direction: column;
}
.spec-dashboard-home .spec-dash-lower > [class*="col"] > .specpanel {
    flex: 1 1 auto;
    margin-bottom: 0;
}
.spec-dashboard-home .spec-dash-kpi-row .specpanel {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 22px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    height: 100%;
}
.spec-dashboard-home .spec-dash-kpi-row .specpanel:hover {
    box-shadow: 0 12px 36px rgba(107, 74, 154, 0.12);
    transform: translateY(-2px);
}
.spec-dashboard-home .spec-dash-kpi-row .specpanel > .card-header {
    background: linear-gradient(180deg, rgba(250, 250, 252, 1) 0%, rgba(255, 255, 255, 1) 100%);
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    min-height: 2.5rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}
.spec-dashboard-home .spec-dash-kpi-row .specpanel > .card-body {
    padding: 1rem 0.85rem 1.1rem;
}
.spec-dashboard-home .spec-dash-kpi-row .specpanel .card-body .small {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}
.spec-dashboard-home .spec-dash-kpi-row .specpanel .card-body .small .fa {
    margin-right: 0.25rem;
    color: #a78bfa;
    opacity: 0.9;
}
/* KPI color tiles: dashboard rules above use dark labels — force light text on colorplates */
.spec-dashboard-home .spec-dash-kpi-row .specpanel > .card-body[class*="colorplate"] {
    background-image: none;
}
.spec-dashboard-home .spec-dash-kpi-row .specpanel > .card-body.colorplate1,
.spec-dashboard-home .spec-dash-kpi-row .specpanel > .card-body.colorplate2,
.spec-dashboard-home .spec-dash-kpi-row .specpanel > .card-body.colorplate3,
.spec-dashboard-home .spec-dash-kpi-row .specpanel > .card-body.colorplate4 {
    color: #fff !important;
}
.spec-dashboard-home .spec-dash-kpi-row .specpanel > .card-body[class*="colorplate"] .small,
.spec-dashboard-home .spec-dash-kpi-row .specpanel > .card-body[class*="colorplate"] small {
    color: rgba(255, 255, 255, 0.92) !important;
}
.spec-dashboard-home .spec-dash-kpi-row .specpanel > .card-body[class*="colorplate"] .small .fa,
.spec-dashboard-home .spec-dash-kpi-row .specpanel > .card-body[class*="colorplate"] .fa {
    color: inherit !important;
    opacity: 1;
}
.spec-dashboard-home .spec-dash-kpi-row .specpanel > .card-body[class*="colorplate"] .text-success,
.spec-dashboard-home .spec-dash-kpi-row .specpanel > .card-body[class*="colorplate"] .fa.text-success {
    color: #ecfdf5 !important;
}
.spec-dashboard-home .spec-dash-kpi-row .specpanel > .card-body[class*="colorplate"] .text-muted {
    color: rgba(255, 255, 255, 0.78) !important;
}
/* Layout 2 / 3 / 6 widget row: columns 2–3 use tinted panel-trans; column 1 uses default specpanel card */
.spec-dashboard-home .spec-dash-chart-row + .row.g-3 .specpanel.stats .card.panel-trans {
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
    color: #fff !important;
    background: transparent !important;
}
.spec-dashboard-home .spec-dash-chart-row + .row.g-3 > [class*="col"]:nth-child(2) .specpanel.stats .card.panel-trans {
    background: linear-gradient(165deg, #0891b2 0%, #06b6d4 42%, #0e7490 100%) !important;
    color: #fff !important;
}
.spec-dashboard-home .spec-dash-chart-row + .row.g-3 > [class*="col"]:nth-child(3) .specpanel.stats .card.panel-trans {
    background: linear-gradient(165deg, #6d28d9 0%, #7c3aed 38%, #5b21b6 100%) !important;
    color: #fff !important;
}
.spec-dashboard-home .spec-dash-chart-row + .row.g-3 .specpanel.stats .card.panel-trans .card-header {
    background: rgba(0, 0, 0, 0.12) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}
.spec-dashboard-home .spec-dash-chart-row + .row.g-3 .specpanel.stats .card.panel-trans .card-title,
.spec-dashboard-home .spec-dash-chart-row + .row.g-3 .specpanel.stats .card.panel-trans .text-semibold,
.spec-dashboard-home .spec-dash-chart-row + .row.g-3 .specpanel.stats .card.panel-trans .text-main,
.spec-dashboard-home .spec-dash-chart-row + .row.g-3 .specpanel.stats .card.panel-trans p,
.spec-dashboard-home .spec-dash-chart-row + .row.g-3 .specpanel.stats .card.panel-trans li,
.spec-dashboard-home .spec-dash-chart-row + .row.g-3 .specpanel.stats .card.panel-trans small {
    color: #fff !important;
}
.spec-dashboard-home .spec-dash-chart-row + .row.g-3 .specpanel.stats .card.panel-trans .text-muted {
    color: rgba(255, 255, 255, 0.75) !important;
}
.spec-dashboard-home .spec-dash-chart-row + .row.g-3 .specpanel.stats .card.panel-trans .list-group-item {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
}
.spec-dashboard-home .spec-dash-chart-row + .row.g-3 .specpanel.stats .card.panel-trans .card-body {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
}
.spec-dashboard-home .spec-dash-chart-row + .row.g-3 .specpanel.stats .card.panel-trans .bord-btm,
.spec-dashboard-home .spec-dash-chart-row + .row.g-3 .specpanel.stats .card.panel-trans .bord-top {
    border-color: rgba(255, 255, 255, 0.14) !important;
}
.spec-dashboard-home .spec-dash-chart-row + .row.g-3 .specpanel.stats .card.panel-trans .progress {
    background: rgba(0, 0, 0, 0.2);
}
.spec-dashboard-home .spec-dash-chart-row + .row.g-3 .specpanel.stats .card.panel-trans blockquote {
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.25);
}
.spec-dashboard-home .spec-dash-chart-row + .row.g-3 .specpanel.stats .card.panel-trans a.btn-link {
    color: #fff !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.spec-dashboard-home .spec-dash-chart-row + .row.g-3 .specpanel.stats .card.panel-trans .text-info {
    color: #a5f3fc !important;
}
.spec-dashboard-home .spec-dash-orders-panel > .card-body.list + .row {
    margin-top: var(--spec-dash-card-gap);
}
.spec-dashboard-home .spec-dash-orders-panel .card-body.list > .card:last-child {
    margin-bottom: 0;
}
.spec-dashboard-home .spec-dash-chart-row .specpanel {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.07);
    background: #fff;
}
.spec-dashboard-home .spec-dash-chart-row .specpanel > .card-header.spec-dash-chart-card-header {
    padding: 0.9rem 1rem 0.95rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}
.spec-dashboard-home .spec-dash-chart-panel--sales > .spec-dash-chart-card-header {
    background: linear-gradient(
        125deg,
        rgba(236, 253, 245, 0.95) 0%,
        rgba(209, 250, 229, 0.35) 40%,
        rgba(255, 255, 255, 1) 100%
    );
    border-bottom-color: rgba(52, 211, 153, 0.22);
}
.spec-dashboard-home .spec-dash-chart-panel--monitor > .spec-dash-chart-card-header {
    background: linear-gradient(
        125deg,
        rgba(239, 246, 255, 0.95) 0%,
        rgba(219, 234, 254, 0.45) 40%,
        rgba(255, 255, 255, 1) 100%
    );
    border-bottom-color: rgba(99, 102, 241, 0.2);
}
.spec-dashboard-home .spec-dash-chart-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1 1 auto;
}
.spec-dashboard-home .spec-dash-chart-icon-tile {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font-size: 20px;
    color: #fff;
    line-height: 1;
}
.spec-dashboard-home .spec-dash-chart-icon-tile--sales {
    background: linear-gradient(135deg, #34d399 0%, #3fb68b 50%, #2dd4bf 100%);
    box-shadow: 0 6px 18px rgba(52, 211, 153, 0.35);
}
.spec-dashboard-home .spec-dash-chart-icon-tile--monitor {
    background: linear-gradient(135deg, #6366f1 0%, #3b82f6 50%, #0ea5e9 100%);
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.35);
}
.spec-dashboard-home .spec-dash-chart-heading-copy {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
    text-align: left;
}
.spec-dashboard-home .spec-dash-chart-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}
.spec-dashboard-home .spec-dash-chart-panel--sales .spec-dash-chart-kicker {
    color: #059669;
}
.spec-dashboard-home .spec-dash-chart-panel--monitor .spec-dash-chart-kicker {
    color: #4f46e5;
}
.spec-dashboard-home .spec-dash-chart-title {
    display: block;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
    line-height: 1.25;
}
.spec-dashboard-home .spec-dash-chart-sub {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    line-height: 1.35;
    max-width: 22rem;
}
.spec-dashboard-home .spec-dash-chart-card-header .panel-tools {
    flex-shrink: 0;
    margin: 0;
    padding-top: 2px;
}
.spec-dashboard-home .spec-dash-chart-row .spec-dash-chart-panel > .card-body {
    padding: 1.15rem 1.2rem 1.25rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, #fff 24%);
}
.spec-dashboard-home .spec-dash-chart-panel--sales > .card-body > .row > .col-md-12 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.spec-dashboard-home .spec-dash-chart-panel--sales > .card-body .text-center.small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0 auto;
    padding: 0.35rem 0.85rem;
    font-size: 10px !important;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #047857 !important;
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.95) 0%, rgba(209, 250, 229, 0.5) 100%);
    border: 1px solid rgba(52, 211, 153, 0.28);
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(52, 211, 153, 0.12);
}
.spec-dashboard-home .spec-dash-chart-panel--sales > .card-body .text-center.small .fa {
    color: #10b981;
    font-size: 12px;
}
.spec-dashboard-home .spec-dash-chart-panel--sales > .card-body > .row > .col-md-12 > .spec-dash-chart-canvas-host,
.spec-dashboard-home .spec-dash-chart-panel--sales > .card-body > .row > .col-md-12 > div:has(canvas) {
    padding: 0.85rem 0.75rem 0.95rem;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.9) 0%, rgba(255, 255, 255, 0.98) 55%, rgba(236, 253, 245, 0.35) 100%);
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 6px 20px rgba(15, 23, 42, 0.04);
}
.spec-dashboard-home .spec-dash-chart-canvas-host {
    position: relative;
    width: 100%;
    max-width: 100%;
}
.spec-dashboard-home .spec-dash-chart-canvas-host canvas {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}
.spec-dashboard-home .spec-dash-chart-panel--sales > .card-body .graph2under,
.spec-dashboard-home .spec-dash-chart-panel--sales > .card-body .graph1under {
    float: none !important;
    width: 100% !important;
    max-width: none;
    padding: 1rem 1rem 1.05rem !important;
    margin-top: 0 !important;
    border-radius: 14px;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.92) 100%);
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    text-align: left;
}
@media (min-width: 768px) {
    .spec-dashboard-home .spec-dash-chart-panel--sales > .card-body > .row > .col-md-12 {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
    }
    .spec-dashboard-home .spec-dash-chart-panel--sales > .card-body > .row > .col-md-12 > .text-center.small {
        flex: 1 1 100%;
        order: 0;
    }
    .spec-dashboard-home .spec-dash-chart-panel--sales > .card-body > .row > .col-md-12 > .spec-dash-chart-canvas-host,
    .spec-dashboard-home .spec-dash-chart-panel--sales > .card-body > .row > .col-md-12 > div:has(canvas) {
        flex: 1 1 100%;
        order: 1;
    }
    .spec-dashboard-home .spec-dash-chart-panel--sales > .card-body .graph2under {
        flex: 1 1 calc(50% - 0.5rem);
        order: 2;
    }
    .spec-dashboard-home .spec-dash-chart-panel--sales > .card-body .graph1under {
        flex: 1 1 calc(50% - 0.5rem);
        order: 2;
    }
}
.spec-dashboard-home .spec-dash-chart-panel--sales > .card-body .graph2under .pe-7s-graph1,
.spec-dashboard-home .spec-dash-chart-panel--sales > .card-body .graph1under .fa-hand-o-down {
    display: block;
    margin-bottom: 0.5rem;
    color: rgba(16, 185, 129, 0.45) !important;
}
.spec-dashboard-home .spec-dash-chart-panel--sales > .card-body .graph2under small,
.spec-dashboard-home .spec-dash-chart-panel--sales > .card-body .graph1under small {
    color: #64748b;
    font-size: 11px;
}
.spec-dashboard-home .spec-dash-chart-panel--sales > .card-body .graph2under .stat-data,
.spec-dashboard-home .spec-dash-chart-panel--sales > .card-body .graph1under .stat-data {
    margin-top: 0.65rem !important;
    margin-bottom: 0.65rem !important;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(52, 211, 153, 0.35), rgba(45, 212, 191, 0.15));
}
.spec-dashboard-home .spec-dash-chart-panel--monitor > .card-body > .row > .col-md-12 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.spec-dashboard-home .spec-dash-chart-panel--monitor > .card-body .text-center.small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0 auto;
    padding: 0.35rem 0.85rem;
    font-size: 10px !important;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #4338ca !important;
    background: linear-gradient(180deg, rgba(238, 242, 255, 0.95) 0%, rgba(224, 231, 255, 0.55) 100%);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.12);
}
.spec-dashboard-home .spec-dash-chart-panel--monitor > .card-body .text-center.small .fa {
    color: #6366f1;
    font-size: 12px;
}
.spec-dashboard-home .spec-dash-chart-panel--monitor > .card-body > .row > .col-md-12 > .spec-dash-chart-canvas-host,
.spec-dashboard-home .spec-dash-chart-panel--monitor > .card-body > .row > .col-md-12 > div:has(canvas) {
    padding: 0.85rem 0.75rem 0.95rem;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, rgba(255, 255, 255, 0.98) 50%, rgba(239, 246, 255, 0.4) 100%);
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 6px 20px rgba(15, 23, 42, 0.04);
}
.spec-dashboard-home .spec-dash-chart-panel--monitor > .card-body .card-body.list {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.spec-dashboard-home .spec-dash-chart-panel--monitor .project-list {
    margin-top: 0 !important;
    padding: 0.5rem 0.35rem 0.15rem;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.88) 100%);
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}
.spec-dashboard-home .spec-dash-chart-panel--monitor .project-list .table {
    margin-bottom: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px;
    overflow: hidden;
}
.spec-dashboard-home .spec-dash-chart-panel--monitor .project-list .table thead th {
    background: linear-gradient(180deg, rgba(238, 242, 255, 0.85) 0%, rgba(224, 231, 255, 0.35) 100%);
    color: #3730a3 !important;
    font-weight: 800;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}
.spec-dashboard-home .spec-dash-chart-panel--monitor .project-list .table.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(238, 242, 255, 0.35);
}
.spec-dashboard-home .spec-dash-chart-panel--monitor .project-list .table tbody td {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}
.spec-dashboard-home .spec-dash-chart-panel--monitor .spec-dash-process-status {
    width: 2.75rem;
    text-align: center;
    vertical-align: middle !important;
}
.spec-dashboard-home .spec-dash-chart-panel--monitor .spec-dash-process-status i {
    font-size: 14px;
    line-height: 1;
}
.spec-dashboard-home .spec-dash-chart-panel--monitor .spec-dash-process-status .fa-check {
    color: #10b981;
}
.spec-dashboard-home .spec-dash-chart-panel--monitor .spec-dash-process-status .fa-close {
    color: #ef4444;
}
.spec-dashboard-home .spec-dash-chart-panel--monitor .spec-dash-process-cell {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}
.spec-dashboard-home .spec-dash-chart-panel--monitor .spec-dash-process-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1;
    color: #4f46e5;
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.14) 0%, rgba(129, 140, 248, 0.07) 100%);
    border: 1px solid rgba(99, 102, 241, 0.18);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.spec-dashboard-home .spec-dash-chart-panel--monitor .spec-dash-process-icon .fa {
    line-height: 1;
}
.spec-dashboard-home .spec-dash-chart-panel--monitor .spec-dash-process-icon--warn {
    color: #c2410c;
    background: linear-gradient(145deg, rgba(251, 146, 60, 0.2) 0%, rgba(254, 215, 170, 0.35) 100%);
    border-color: rgba(249, 115, 22, 0.35);
}
.spec-dashboard-home .spec-dash-chart-panel--monitor .spec-dash-process-name {
    font-family: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.35;
    color: #0f172a;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.spec-dashboard-home .spec-dash-chart-row .spec-dash-chart-panel > .card-footer {
    font-weight: 600;
}
.spec-dashboard-home .spec-dash-chart-panel--sales > .card-footer {
    font-size: 12px;
    color: #64748b;
    padding: 0.75rem 1.15rem;
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.45) 0%, #fff 100%);
    border-top: 1px solid rgba(52, 211, 153, 0.2);
}
.spec-dashboard-home .spec-dash-chart-panel--monitor > .card-footer {
    font-size: 12px;
    color: #64748b;
    padding: 0.75rem 1.15rem;
    background: linear-gradient(180deg, rgba(238, 242, 255, 0.55) 0%, #fff 100%);
    border-top: 1px solid rgba(99, 102, 241, 0.18);
}
.spec-dashboard-home .spec-dash-chart-row .specpanel > .card-header:not(.spec-dash-chart-card-header) {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.01em;
    color: #0f172a;
    padding: 1rem 1.15rem;
    background: linear-gradient(90deg, rgba(169, 120, 209, 0.08) 0%, rgba(255, 255, 255, 1) 55%);
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}
.spec-dashboard-home .spec-dash-chart-row .specpanel:not(.spec-dash-chart-panel) > .card-footer {
    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    font-size: 12px;
    color: #64748b;
    padding: 0.75rem 1.15rem;
}
.spec-dashboard-home .spec-dash-chart-row .specpanel > .card-footer a {
    color: var(--spec-brand-deep, #6b4a9a);
    font-weight: 600;
}
.spec-dashboard-home .spec-dash-chart-row .graph2under,
.spec-dashboard-home .spec-dash-chart-row .graph1under {
    padding: 0.75rem 0.5rem;
}
.spec-dashboard-home .spec-dash-chart-row .graph2under .pe-7s-graph1,
.spec-dashboard-home .spec-dash-chart-row .graph1under .fa-hand-o-down {
    color: rgba(167, 139, 250, 0.55);
}
.spec-dashboard-home .spec-dash-chart-row .graph2under h4,
.spec-dashboard-home .spec-dash-chart-row .graph1under h4 {
    font-size: 15px;
    line-height: 1.35;
}
.spec-dashboard-home .spec-dash-chart-row .graph2under strong,
.spec-dashboard-home .spec-dash-chart-row .graph1under strong {
    color: #0f172a !important;
    font-weight: 800;
}
.spec-dashboard-home .spec-dash-chart-row .project-list .table {
    font-size: 13px;
}
.spec-dashboard-home .spec-dash-chart-row .project-list .table thead th {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    border-color: rgba(148, 163, 184, 0.2);
}
.spec-dashboard-home .spec-dash-chart-row .project-list .table td {
    vertical-align: middle;
    border-color: rgba(148, 163, 184, 0.12);
}
.spec-dashboard-home .spec-dash-activity-panel > .card-header {
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.12) 0%, rgba(167, 139, 250, 0.08) 45%, rgba(255, 255, 255, 1) 100%);
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: #0f172a;
    padding: 0.85rem 1.1rem;
}
.spec-dashboard-home .spec-dash-activity-panel {
    border-radius: 18px;
    border: none;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.spec-dashboard-home .spec-dash-activity-panel > .card-body.spec-dash-activity-body {
    padding: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.spec-dashboard-home .spec-dash-activity-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.15rem 1.05rem;
    background: linear-gradient(
        125deg,
        rgba(240, 253, 250, 0.95) 0%,
        rgba(245, 243, 255, 0.88) 42%,
        rgba(255, 255, 255, 0.98) 100%
    );
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
.spec-dashboard-home .spec-dash-activity-kicker {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0d9488;
    margin-bottom: 0.25rem;
}
.spec-dashboard-home .spec-dash-activity-heading {
    margin: 0 0 0.2rem;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}
.spec-dashboard-home .spec-dash-activity-sub {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #64748b;
    max-width: 14rem;
}
.spec-dashboard-home .spec-dash-activity-intro-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #2dd4bf 0%, #5eead4 40%, #a78bfa 100%);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    box-shadow: 0 6px 20px rgba(45, 212, 191, 0.35);
}
.spec-dashboard-home .spec-dash-activity-feed {
    padding: 1rem 1rem 0.25rem;
    flex: 1 1 auto;
    min-height: 0;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.5) 0%, rgba(255, 255, 255, 0.4) 100%);
}
.spec-dashboard-home .spec-dash-activity-panel .feed-element {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0 0 0.65rem;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.spec-dashboard-home .spec-dash-activity-panel .feed-element > a.float-start {
    float: none !important;
    flex-shrink: 0;
}
.spec-dashboard-home .spec-dash-activity-panel .feed-element .media-body {
    float: none !important;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #334155;
}
.spec-dashboard-home .spec-dash-activity-panel .feed-element .media-body > small.float-end {
    float: none !important;
    display: block;
    text-align: right;
    width: 100%;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 0.2rem;
    letter-spacing: 0.02em;
}
.spec-dashboard-home .spec-dash-activity-panel .feed-element:hover {
    border-color: rgba(45, 212, 191, 0.45);
    box-shadow: 0 6px 22px rgba(45, 212, 191, 0.12);
}
.spec-dashboard-home .spec-dash-activity-panel .feed-element .rounded-circle {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1);
}
.spec-dashboard-home .spec-dash-activity-panel .feed-element .media-body strong {
    color: #0f172a;
    font-weight: 700;
}
.spec-dashboard-home .spec-dash-activity-panel .feed-element .media-body .text-muted {
    color: #64748b !important;
    font-size: 11px;
}
.spec-dashboard-home .spec-dash-activity-more {
    border-radius: 12px;
    font-weight: 700;
    padding: 0.55rem 1rem;
    margin-top: 0.35rem !important;
    box-shadow: 0 4px 16px rgba(52, 211, 153, 0.35);
}
.spec-dashboard-home .spec-dash-activity-panel .btn.btn-xs.btn-white {
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    font-weight: 600;
}
.spec-dashboard-home .spec-dash-activity-panel .well {
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(248, 250, 252, 0.95);
    font-size: 12px;
    line-height: 1.5;
    margin-top: 0.5rem;
}
.spec-dashboard-home .spec-dash-activity-metrics {
    margin-top: 0.25rem;
    padding: 0.85rem 0.85rem 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.75);
}
.spec-dashboard-home .marginactivysec {
    padding: 0.85rem 0.5rem;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.65) 100%);
    border: 1px solid rgba(148, 163, 184, 0.16);
    margin-bottom: 0;
    height: 100%;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
}
.spec-dashboard-home .marginactivysec small {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 10px;
    color: #64748b;
}
.spec-dashboard-home .marginactivysec h3 {
    letter-spacing: -0.02em;
}
.spec-dashboard-home .spec-dash-activity-panel > .card-footer {
    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    padding: 0.65rem 1.1rem;
}
.spec-dashboard-home .spec-dash-chat-panel {
    border-radius: 18px;
    border: none;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}
.spec-dashboard-home .spec-dash-chat-panel > .card-header.spec-dash-support-card-header {
    padding: 0.85rem 1rem 0.9rem;
    background: linear-gradient(
        125deg,
        rgba(238, 242, 255, 0.95) 0%,
        rgba(224, 231, 255, 0.55) 35%,
        rgba(255, 255, 255, 1) 100%
    );
    border-bottom: 1px solid rgba(129, 140, 248, 0.22);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem 1rem;
}
.spec-dashboard-home .spec-dash-support-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1 1 auto;
}
.spec-dashboard-home .spec-dash-support-icon-tile {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 22px;
    color: #fff;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 45%, #a78bfa 100%);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}
.spec-dashboard-home .spec-dash-support-heading-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    text-align: left;
}
.spec-dashboard-home .spec-dash-support-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6366f1;
}
.spec-dashboard-home .spec-dash-support-title {
    display: block;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
    line-height: 1.2;
}
.spec-dashboard-home .spec-dash-support-sub {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    line-height: 1.35;
}
.spec-dashboard-home .spec-dash-support-card-header .panel-tools {
    flex-shrink: 0;
    margin: 0;
    padding-top: 2px;
}
.spec-dashboard-home .spec-dash-chat-tabs {
    border: none;
    gap: 4px;
    padding: 0.5rem 0.5rem 0;
    margin-bottom: 0 !important;
    background: linear-gradient(180deg, rgba(248, 250, 252, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
.spec-dashboard-home .spec-dash-chat-tabs .nav-item {
    flex: 1 1 0;
    text-align: center;
}
.spec-dashboard-home .spec-dash-chat-tabs .nav-link {
    border: 1px solid transparent;
    border-radius: 10px 10px 0 0;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    padding: 0.5rem 0.35rem;
}
.spec-dashboard-home .spec-dash-chat-tabs .nav-link:hover {
    color: var(--spec-brand-deep, #6b4a9a);
    border-color: rgba(148, 163, 184, 0.2);
    background: rgba(255, 255, 255, 0.8);
}
.spec-dashboard-home .spec-dash-chat-tabs .nav-link.active {
    color: var(--spec-brand-deep, #6b4a9a);
    background: #fff !important;
    border-color: rgba(148, 163, 184, 0.28);
    border-bottom-color: #fff;
}
.spec-dashboard-home .spec-dash-chat-panel .chat-wi .chat-content {
    background: linear-gradient(180deg, #f1f5f9 0%, #fff 55%);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.spec-dashboard-home .spec-dash-chat-panel .chat-wi .chat-conv {
    padding: 6px 8px 8px;
    margin-bottom: 10px;
}
.spec-dashboard-home .spec-dash-chat-panel .chat-wi .chat-conv .c-avatar {
    border: 2px solid #fff !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.12) !important;
}
/* Incoming (agent) bubbles */
.spec-dashboard-home .spec-dash-chat-panel .chat-wi .chat-conv:not(.sent) .c-bubble {
    text-shadow: none !important;
    color: #0f172a !important;
    padding: 10px 14px 8px !important;
    font-size: 13px !important;
    line-height: 1.45;
    font-weight: 500;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    border-left: 3px solid #14b8a6 !important;
    border-radius: 16px 18px 18px 6px !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.07) !important;
    margin: 0 58px 0 0 !important;
}
.spec-dashboard-home .spec-dash-chat-panel .chat-wi .chat-conv:not(.sent) .c-bubble small {
    color: #64748b !important;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
/* Sent (you) bubbles — high-contrast text on soft tint (readable on any theme) */
.spec-dashboard-home .spec-dash-chat-panel .chat-wi .sent .c-bubble {
    text-shadow: none !important;
    color: #0f172a !important;
    padding: 10px 14px 8px !important;
    font-size: 13px !important;
    line-height: 1.45;
    font-weight: 500;
    border: 1px solid rgba(139, 92, 246, 0.28) !important;
    border-right: 3px solid #8b5cf6 !important;
    border-radius: 18px 16px 6px 18px !important;
    background: linear-gradient(180deg, #faf5ff 0%, #f5f3ff 55%, #ede9fe 100%) !important;
    background-image: none !important;
    box-shadow: 0 4px 16px rgba(109, 40, 217, 0.1) !important;
    margin: 0 0 0 58px !important;
}
.spec-dashboard-home .spec-dash-chat-panel .chat-wi .sent .c-bubble .msg {
    color: #0f172a !important;
}
.spec-dashboard-home .spec-dash-chat-panel .chat-wi .sent .c-bubble small {
    color: #64748b !important;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.spec-dashboard-home .spec-dash-chat-panel .chat-wi .chat-conv .c-bubble .msg {
    margin-bottom: 4px;
}
.spec-dashboard-home .spec-dash-chat-panel .chat-wi .chat-conv .c-bubble > span {
    display: none !important;
}
.spec-dashboard-home .spec-dash-chat-panel .chat-wi .chat-in {
    border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%) !important;
}
.spec-dashboard-home .spec-dash-chat-panel .chat-wi .spec-dash-chat-form {
    position: relative;
}
.spec-dashboard-home .spec-dash-chat-panel .chat-wi .spec-dash-chat-form .input {
    margin-right: 52px !important;
}
.spec-dashboard-home .spec-dash-chat-panel .chat-wi .chat-in input[type="text"] {
    height: 48px !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
    background: transparent !important;
    padding-left: 14px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #0f172a !important;
}
.spec-dashboard-home .spec-dash-chat-panel .chat-wi .spec-dash-chat-send {
    position: absolute;
    top: 0;
    right: 0;
    width: 52px;
    height: 48px;
    min-width: 52px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%) !important;
    color: #fff !important;
    font-size: 17px !important;
    line-height: 1;
    box-shadow: -4px 0 16px rgba(99, 102, 241, 0.25);
    transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.spec-dashboard-home .spec-dash-chat-panel .chat-wi .spec-dash-chat-send:hover {
    filter: brightness(1.08);
    box-shadow: -4px 0 20px rgba(99, 102, 241, 0.4);
    color: #fff !important;
}
.spec-dashboard-home .spec-dash-chat-panel .chat-wi .spec-dash-chat-send:active {
    transform: scale(0.96);
}
.spec-dashboard-home .spec-dash-chat-panel .chat-wi .spec-dash-chat-send:focus-visible {
    outline: 2px solid #a78bfa;
    outline-offset: 2px;
}
.spec-dashboard-home .spec-dash-chat-panel .chat-wi .chat-tools {
    background: #fff !important;
    border-top: 1px solid rgba(148, 163, 184, 0.12) !important;
}
.spec-dashboard-home .spec-dash-chat-panel .chat-wi .chat-tools i:hover {
    background: rgba(99, 102, 241, 0.08) !important;
    color: #6366f1 !important;
}
/* Dashboard stat tiles (Due / Overdue / Tickets / Proposals) */
.spec-dashboard-home .spec-dash-stat-card {
    border: none !important;
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.07) !important;
    text-align: left;
    margin-bottom: var(--spec-dash-card-gap) !important;
}
.spec-dashboard-home .spec-dash-stat-card-body {
    position: relative;
    padding: 1.1rem 1.15rem 1.15rem !important;
    border-radius: 0 !important;
    border: none !important;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 250, 252, 0.88) 100%) !important;
}
.spec-dashboard-home .spec-dash-stat-card--due .spec-dash-stat-card-body {
    background: linear-gradient(
        160deg,
        rgba(240, 253, 250, 0.65) 0%,
        rgba(255, 255, 255, 0.98) 42%,
        rgba(241, 245, 249, 0.9) 100%
    ) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.spec-dashboard-home .spec-dash-stat-card--overdue .spec-dash-stat-card-body {
    background: linear-gradient(
        160deg,
        rgba(254, 242, 242, 0.7) 0%,
        rgba(255, 255, 255, 0.98) 45%,
        rgba(248, 250, 252, 0.92) 100%
    ) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.spec-dashboard-home .spec-dash-stat-card--tickets .spec-dash-stat-card-body {
    background: linear-gradient(
        160deg,
        rgba(255, 251, 235, 0.85) 0%,
        rgba(255, 255, 255, 0.98) 48%,
        rgba(248, 250, 252, 0.9) 100%
    ) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.spec-dashboard-home .spec-dash-stat-card--proposals .spec-dash-stat-card-body {
    background: linear-gradient(
        160deg,
        rgba(241, 245, 249, 0.9) 0%,
        rgba(255, 255, 255, 0.98) 50%,
        rgba(248, 250, 252, 0.95) 100%
    ) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.spec-dashboard-home .spec-dash-stat-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.15rem;
}
.spec-dashboard-home .spec-dash-stat-card-top .stats-title {
    float: none !important;
}
.spec-dashboard-home .spec-dash-stat-visual {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 24px;
    line-height: 1;
    color: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}
.spec-dashboard-home .spec-dash-stat-visual--due {
    background: linear-gradient(135deg, #34d399 0%, #3fb68b 55%, #2dd4bf 100%);
    box-shadow: 0 6px 20px rgba(52, 211, 153, 0.35);
}
.spec-dashboard-home .spec-dash-stat-visual--overdue {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 50%, #fb923c 100%);
    box-shadow: 0 6px 20px rgba(248, 113, 113, 0.35);
}
.spec-dashboard-home .spec-dash-stat-visual--tickets {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 45%, #f97316 100%);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
    font-size: 22px;
}
.spec-dashboard-home .spec-dash-stat-visual--proposals {
    background: linear-gradient(135deg, #64748b 0%, #475569 40%, #7c3aed 100%);
    box-shadow: 0 6px 20px rgba(71, 85, 105, 0.3);
    font-size: 22px;
}
.spec-dashboard-home .spec-dash-stat-value-block {
    clear: both;
    padding-top: 0.25rem;
}
.spec-dashboard-home .spec-dash-stat-number {
    font-size: clamp(2rem, 6vw, 2.65rem) !important;
    line-height: 1.05;
    letter-spacing: -0.03em;
}
.spec-dashboard-home .spec-dash-stat-number--success {
    color: #047857 !important;
}
.spec-dashboard-home .spec-dash-stat-number--danger {
    color: #b91c1c !important;
}
.spec-dashboard-home .spec-dash-stat-number--amber {
    color: #b45309 !important;
}
.spec-dashboard-home .spec-dash-stat-number--slate {
    color: #334155 !important;
}
.spec-dashboard-home .spec-dash-stat-label {
    display: inline-block;
    margin-top: 0.35rem !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #475569 !important;
}
.spec-dashboard-home .spec-dash-stat-desc {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
    max-width: 16rem;
}
.spec-dashboard-home .spec-dash-stat-footer {
    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%) !important;
    border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    padding: 0.65rem 1.1rem !important;
}
.spec-dashboard-home .specpanel.stats .card-body.h-200 {
    border-radius: 16px;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 245, 249, 0.65) 100%);
    border: 1px solid rgba(148, 163, 184, 0.16);
}
.spec-dashboard-home .spec-dash-stat-card .card-body.h-200.spec-dash-stat-card-body {
    border-radius: 0 !important;
    border: none !important;
}
.spec-dashboard-home .specpanel.stats:not(.spec-dash-stat-card) {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
    margin-bottom: var(--spec-dash-section-gap);
}
.spec-dashboard-home .specpanel.stats.spec-dash-stat-card {
    margin-bottom: var(--spec-dash-card-gap) !important;
}
.spec-dashboard-home .spec-dash-lower > [class*="col"]:nth-child(2) .row > .col-lg-12:last-child .spec-dash-stat-card,
.spec-dashboard-home .spec-dash-lower > [class*="col"]:last-child > .row:last-child .col-lg-12:last-child .spec-dash-stat-card {
    margin-bottom: 0 !important;
}
.spec-dashboard-home .spec-dash-lower > [class*="col"] .spec-dash-chat-panel + .row,
.spec-dashboard-home .spec-dash-lower > [class*="col"] .spec-dash-todo-panel + .row {
    margin-top: var(--spec-dash-card-gap);
}
.spec-dashboard-home .specpanel.stats .card-footer {
    background: #fff;
    border-top: 1px solid var(--spec-panel-card-border);
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}
.spec-dashboard-home .spec-dash-todo-panel {
    border-radius: 18px;
    border: none;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}
.spec-dashboard-home .spec-dash-todo-panel > .card-header.spec-dash-todo-card-header {
    padding: 0.85rem 1rem 0.9rem;
    background: linear-gradient(
        125deg,
        rgba(255, 251, 235, 0.98) 0%,
        rgba(254, 243, 199, 0.45) 38%,
        rgba(255, 255, 255, 1) 100%
    );
    border-bottom: 1px solid rgba(245, 158, 11, 0.22);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem 1rem;
}
.spec-dashboard-home .spec-dash-todo-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1 1 auto;
}
.spec-dashboard-home .spec-dash-todo-icon-tile {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 22px;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 45%, #f97316 100%);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.42);
}
.spec-dashboard-home .spec-dash-todo-heading-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    text-align: left;
}
.spec-dashboard-home .spec-dash-todo-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #d97706;
}
/* Layout 2: orders column reuses todo header pattern with commerce accent */
.spec-dashboard-home .spec-dash-orders-panel.spec-dash-todo-panel > .card-header.spec-dash-todo-card-header {
    background: linear-gradient(
        125deg,
        rgba(236, 253, 245, 0.98) 0%,
        rgba(167, 243, 208, 0.42) 40%,
        rgba(255, 255, 255, 1) 100%
    );
    border-bottom-color: rgba(16, 185, 129, 0.24);
}
.spec-dashboard-home .spec-dash-orders-panel .spec-dash-todo-icon-tile {
    background: linear-gradient(135deg, #34d399 0%, #3fb68b 50%, #14b8a6 100%);
    box-shadow: 0 6px 20px rgba(52, 211, 153, 0.32);
}
.spec-dashboard-home .spec-dash-orders-panel .spec-dash-todo-kicker {
    color: #059669;
}
.spec-dashboard-home .spec-dash-todo-title {
    display: block;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
    line-height: 1.2;
}
.spec-dashboard-home .spec-dash-todo-sub {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    line-height: 1.35;
}
.spec-dashboard-home .spec-dash-todo-card-header .panel-tools {
    flex-shrink: 0;
    margin: 0;
    padding-top: 2px;
}
.spec-dashboard-home .spec-dash-todo-panel .card-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #64748b;
    margin-top: 0.5rem;
}
.spec-dashboard-home .spec-dash-todo-panel .list-group-item.listitemactivty {
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
    border-radius: 12px !important;
    margin-bottom: 0.45rem;
    padding: 0.65rem 0.85rem !important;
    background: rgba(255, 255, 255, 0.9) !important;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.spec-dashboard-home .spec-dash-todo-panel .list-group-item.listitemactivty:hover {
    border-color: rgba(169, 120, 209, 0.3) !important;
    box-shadow: 0 4px 14px rgba(107, 74, 154, 0.1);
}
.spec-dashboard-home .spec-dash-todo-panel .btn.btn-xs.btn-secondary {
    border-radius: 8px;
    font-weight: 600;
    font-size: 11px;
}

/* ========== index-2 / index-3 — widget rows (.spec-index2-widgets | .spec-index3-widgets, .spec-i2-*) ========== */
.spec-dashboard-home .spec-index2-widgets > [class*="col"] > .specpanel,
.spec-dashboard-home .spec-index3-widgets > [class*="col"] > .specpanel {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 36px rgba(15, 23, 42, 0.08);
    background: #fff;
    height: 100%;
    margin-bottom: 0;
}

/* —— Quick to-do —— */
.spec-dashboard-home .spec-i2-todo-panel {
    display: flex;
    flex-direction: column;
    min-height: 420px;
}
.spec-dashboard-home .spec-i2-todo-header {
    padding: 1rem 1.15rem 1rem;
    background: linear-gradient(
        125deg,
        rgba(236, 253, 245, 0.98) 0%,
        rgba(167, 243, 208, 0.35) 42%,
        rgba(255, 255, 255, 1) 100%
    );
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
}
.spec-dashboard-home .spec-i2-todo-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}
.spec-dashboard-home .spec-i2-todo-icon-tile {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 22px;
    color: #fff;
    background: linear-gradient(135deg, #34d399 0%, #3fb68b 50%, #14b8a6 100%);
    box-shadow: 0 6px 20px rgba(52, 211, 153, 0.35);
}
.spec-dashboard-home .spec-i2-todo-heading-text {
    min-width: 0;
}
.spec-dashboard-home .spec-i2-todo-kicker {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #059669;
    margin-bottom: 0.15rem;
}
.spec-dashboard-home .spec-i2-todo-title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
    margin: 0 0 0.2rem;
    line-height: 1.2;
}
.spec-dashboard-home .spec-i2-todo-sub {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}
.spec-dashboard-home .spec-i2-todo-body {
    flex: 1 1 auto;
    padding: 1rem 1.1rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: linear-gradient(180deg, #fafbfc 0%, #fff 28%);
}
.spec-dashboard-home .spec-i2-todo-composer {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.spec-dashboard-home .spec-i2-todo-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 0.85rem;
    font-size: 14px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.spec-dashboard-home .spec-i2-todo-input:focus {
    outline: none;
    border-color: rgba(16, 185, 129, 0.55);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.spec-dashboard-home .spec-i2-todo-add {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 1rem;
    height: 44px;
    border: none;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.spec-dashboard-home .spec-i2-todo-add:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(5, 150, 105, 0.42);
}
.spec-dashboard-home .spec-i2-todo-add i {
    font-size: 12px;
    opacity: 0.95;
}
.spec-dashboard-home .spec-i2-todo-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    flex: 1 1 auto;
    min-height: 0;
}
.spec-dashboard-home .spec-i2-todo-column {
    display: flex;
    flex-direction: column;
    min-height: 180px;
    padding: 0.5rem 0.45rem 0.35rem;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.14);
}
.spec-dashboard-home .spec-i2-todo-column--done {
    background: rgba(236, 253, 245, 0.45);
    border-color: rgba(16, 185, 129, 0.2);
}
.spec-dashboard-home .spec-i2-todo-column-title {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.45rem;
    padding-left: 0.15rem;
}
.spec-dashboard-home .spec-i2-todo-column--done .spec-i2-todo-column-title {
    color: #047857;
}
.spec-dashboard-home .spec-i2-todo-footer {
    padding: 0.65rem 1.1rem;
    background: #f8fafc;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}
.spec-dashboard-home .spec-i2-todo-footer-hint i {
    margin-right: 0.35rem;
    color: #94a3b8;
}

/* To-do lists: override global ul.todo layout inside index-2 widgets */
.spec-dashboard-home .spec-index2-widgets ul.spec-i2-todo-ul.todo,
.spec-dashboard-home .spec-index3-widgets ul.spec-i2-todo-ul.todo {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
}
.spec-dashboard-home .spec-index2-widgets ul.todo#completed,
.spec-dashboard-home .spec-index3-widgets ul.todo#completed {
    padding-top: 0;
}
.spec-dashboard-home .spec-index2-widgets ul.todo#completed:before,
.spec-dashboard-home .spec-index3-widgets ul.todo#completed:before {
    display: none;
    content: none;
}
.spec-dashboard-home .spec-index2-widgets ul.spec-i2-todo-ul#todo:empty::after,
.spec-dashboard-home .spec-index2-widgets ul.spec-i2-todo-ul#completed:empty::after,
.spec-dashboard-home .spec-index3-widgets ul.spec-i2-todo-ul#todo:empty::after,
.spec-dashboard-home .spec-index3-widgets ul.spec-i2-todo-ul#completed:empty::after {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    padding: 1.25rem 0.35rem;
    margin: 0;
}
.spec-dashboard-home .spec-index2-widgets ul.spec-i2-todo-ul#todo:empty::after,
.spec-dashboard-home .spec-index3-widgets ul.spec-i2-todo-ul#todo:empty::after {
    content: "Nothing open — add a task above";
}
.spec-dashboard-home .spec-index2-widgets ul.spec-i2-todo-ul#completed:empty::after,
.spec-dashboard-home .spec-index3-widgets ul.spec-i2-todo-ul#completed:empty::after {
    content: "Completed tasks land here";
}
.spec-dashboard-home .spec-index2-widgets ul.spec-i2-todo-ul#todo::after,
.spec-dashboard-home .spec-index2-widgets ul.spec-i2-todo-ul#completed::after,
.spec-dashboard-home .spec-index3-widgets ul.spec-i2-todo-ul#todo::after,
.spec-dashboard-home .spec-index3-widgets ul.spec-i2-todo-ul#completed::after {
    display: none;
}
.spec-dashboard-home .spec-index2-widgets ul.spec-i2-todo-ul li,
.spec-dashboard-home .spec-index3-widgets ul.spec-i2-todo-ul li {
    float: none;
    width: 100%;
    min-height: 48px;
    margin: 0 0 0.45rem;
    padding: 10px 88px 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
    color: #1e293b;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.spec-dashboard-home .spec-index2-widgets ul.spec-i2-todo-ul li:last-of-type,
.spec-dashboard-home .spec-index3-widgets ul.spec-i2-todo-ul li:last-of-type {
    margin-bottom: 0;
}
.spec-dashboard-home .spec-index2-widgets ul.spec-i2-todo-ul li .buttons {
    width: 88px;
    height: 100%;
    min-height: 48px;
    top: 0;
    right: 0;
    border-radius: 0 10px 10px 0;
    overflow: hidden;
}
.spec-dashboard-home .spec-index2-widgets ul.spec-i2-todo-ul li .buttons button {
    height: 100%;
    min-height: 48px;
}

/* —— Services —— */
.spec-dashboard-home .spec-i2-services-shell.stats {
    box-shadow: none;
    background: transparent;
}
.spec-dashboard-home .spec-i2-services-card {
    border-radius: 18px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(165deg, #0891b2 0%, #06b6d4 42%, #0e7490 100%);
    box-shadow: 0 12px 40px rgba(8, 145, 178, 0.35);
    min-height: 420px;
    display: flex;
    flex-direction: column;
}
.spec-dashboard-home .spec-i2-services-header {
    position: relative;
    padding: 1rem 1.15rem 0.95rem;
    background: rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.spec-dashboard-home .spec-i2-services-info {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: rgba(255, 255, 255, 0.95) !important;
    opacity: 0.95;
    z-index: 2;
}
.spec-dashboard-home .spec-i2-services-info:hover {
    color: #fff !important;
    opacity: 1;
}
.spec-dashboard-home .spec-i2-services-kicker {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0.2rem;
}
.spec-dashboard-home .spec-i2-services-title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 0.25rem;
    color: #fff;
}
.spec-dashboard-home .spec-i2-services-lead {
    font-size: 12px;
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.45;
    max-width: 16rem;
}
.spec-dashboard-home .spec-i2-services-options {
    margin: 0;
    padding: 0.65rem 0 0;
}
.spec-dashboard-home .spec-i2-services-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.spec-dashboard-home .spec-i2-services-row:last-of-type {
    border-bottom: none;
}
.spec-dashboard-home .spec-i2-services-row-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.3;
}
.spec-dashboard-home .spec-i2-toggle-group {
    flex-shrink: 0;
    display: inline-flex;
    border-radius: 999px;
    padding: 3px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.2);
    gap: 0;
}
.spec-dashboard-home .spec-i2-toggle-group .spec-i2-seg {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1.2;
}
.spec-dashboard-home .spec-i2-toggle-group .spec-i2-seg:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}
.spec-dashboard-home .spec-i2-toggle-group .spec-i2-seg.active {
    background: rgba(255, 255, 255, 0.95);
    color: #0e7490;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.spec-dashboard-home .spec-i2-toggle-group .spec-i2-seg.notActive {
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
}
.spec-dashboard-home .spec-i2-services-metrics {
    margin-top: auto;
    padding: 1rem 1.1rem 1.15rem;
    background: rgba(0, 0, 0, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.spec-dashboard-home .spec-i2-metric + .spec-i2-metric {
    margin-top: 0.85rem;
}
.spec-dashboard-home .spec-i2-metric-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}
.spec-dashboard-home .spec-i2-metric-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}
.spec-dashboard-home .spec-i2-metric-value {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
}
.spec-dashboard-home .spec-i2-metric-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
    overflow: hidden;
}
.spec-dashboard-home .spec-i2-metric-fill {
    border-radius: 999px;
    background: linear-gradient(90deg, #5eead4 0%, #2dd4bf 100%);
}
.spec-dashboard-home .spec-i2-metric-fill--warn {
    background: linear-gradient(90deg, #fcd34d 0%, #fbbf24 55%, #f59e0b 100%);
}
.spec-dashboard-home .spec-i2-metric-fill--40 {
    width: 40%;
}
.spec-dashboard-home .spec-i2-metric-fill--90 {
    width: 90%;
}
.spec-dashboard-home .spec-i2-metric-caption {
    display: block;
    margin-top: 0.3rem;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.72);
}

/* —— Design manager / profile —— */
.spec-dashboard-home .spec-i2-profile-shell.stats {
    box-shadow: none;
    background: transparent;
}
.spec-dashboard-home .spec-i2-profile-card {
    border-radius: 18px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(165deg, #6d28d9 0%, #7c3aed 38%, #5b21b6 100%);
    box-shadow: 0 12px 40px rgba(91, 33, 182, 0.35);
    min-height: 420px;
    display: flex;
    flex-direction: column;
    padding: 0;
}
.spec-dashboard-home .spec-i2-profile-top {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.15rem 1.15rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.06);
}
.spec-dashboard-home .spec-i2-profile-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.spec-dashboard-home .spec-i2-profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.spec-dashboard-home .spec-i2-profile-status {
    position: absolute;
    bottom: -4px;
    right: -2px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: #34d399;
    color: #064e3b;
    border: 2px solid rgba(255, 255, 255, 0.9);
}
.spec-dashboard-home .spec-i2-profile-id {
    min-width: 0;
    padding-top: 0.15rem;
}
.spec-dashboard-home .spec-i2-profile-name {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 0.15rem;
    color: #fff;
}
.spec-dashboard-home .spec-i2-profile-role {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 0.35rem;
    color: rgba(255, 255, 255, 0.88);
}
.spec-dashboard-home .spec-i2-profile-meta {
    font-size: 12px;
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
}
.spec-dashboard-home .spec-i2-profile-meta i {
    margin-right: 0.35rem;
    opacity: 0.9;
}
.spec-dashboard-home .spec-i2-profile-quote {
    margin: 0;
    padding: 1rem 1.15rem;
    font-size: 13px;
    line-height: 1.55;
    font-style: italic;
    color: rgba(255, 255, 255, 0.92);
    border: none;
    border-left: 3px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.08);
}
.spec-dashboard-home .spec-i2-profile-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.85rem 1.1rem 0.25rem;
}
.spec-dashboard-home .spec-i2-social {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.75rem;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #fff !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    transition: background 0.15s ease, transform 0.12s ease;
}
.spec-dashboard-home .spec-i2-social:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff !important;
    transform: translateY(-1px);
}
.spec-dashboard-home .spec-i2-social i {
    font-size: 16px;
    opacity: 0.95;
}
.spec-dashboard-home .spec-i2-profile-snippet {
    margin: 0;
    padding: 0.35rem 1.15rem 1.1rem;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
}
.spec-dashboard-home .spec-i2-inline-link {
    color: #a5f3fc !important;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.spec-dashboard-home .spec-i2-inline-link:hover {
    color: #fff !important;
}

/* ========== index.html / index-2.html — migrated inline styles (.spec-dash-inl-*) ========== */
.spec-dashboard-home .spec-dash-inl-logo-text {
    font-weight: 700;
}
.spec-dashboard-home .spec-dash-inl-header-avatar {
    width: 40px;
    height: 40px;
}
.spec-dashboard-home .spec-dash-inl-disk-pbar {
    width: 45%;
    line-height: 10px;
    font-size: 10px;
}
.spec-dashboard-home .spec-dash-inl-spark-chart-offset {
    margin-left: 80px;
}
.spec-dashboard-home .spec-dash-inl-kpi-trend-gap {
    margin-left: 2px;
}
.spec-dashboard-home .spec-dash-inl-kpi-trend-down {
    margin-left: 2px;
    color: #e74c3c !important;
}
.spec-dashboard-home .spec-dash-inl-sales-stat-label {
    color: #666;
}
.spec-dashboard-home .spec-dash-inl-graph-under-spacer {
    margin-top: 10px;
    margin-bottom: 10px;
}
.spec-dashboard-home .spec-dash-inl-process-th {
    padding-left: 25px;
}
.spec-dashboard-home .spec-dash-inl-trend-alert {
    color: #f00;
}
.spec-dashboard-home .spec-dash-inl-chat-slider-main {
    height: 323px;
    top: 0;
}
.spec-dashboard-home .spec-dash-inl-chat-slider-mini {
    height: 20px;
    top: 0;
}
.spec-dashboard-home .spec-dash-inl-chat-scroll-content {
    right: -17px;
}
.spec-dashboard-home .spec-dash-inl-dd-plain {
    list-style-type: none;
}
.spec-dashboard-home .spec-dash-inl-list-container {
    width: 100%;
}
.spec-dashboard-home .spec-dash-inl-task-pbar-fill--45 {
    width: 45%;
    line-height: 10px;
    font-size: 10px;
}
.spec-dashboard-home .spec-dash-inl-task-pbar-fill--25 {
    width: 25%;
    line-height: 10px;
    font-size: 10px;
}

/* index-3.html — KPI row copy/layout (replaces inline padding/margins on sparkline tiles) */
.spec-dashboard-home .spec-dash-i3-kpi-inner {
    padding: 10px;
}
.spec-dashboard-home .spec-dash-i3-kpi-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: inherit;
    margin-bottom: 0.15rem;
}
.spec-dashboard-home .spec-dash-i3-kpi-line {
    margin-top: 10px;
}

@media (max-width: 991px) {
    .spec-dashboard-home .spec-i2-todo-split {
        grid-template-columns: 1fr;
    }
    .spec-dashboard-home .spec-i2-todo-column {
        min-height: 140px;
    }
}
@media (max-width: 768px) {
    .spec-dashboard-home .spec-dash-hero {
        padding: 1.1rem 1.15rem;
    }
    .spec-dashboard-home .spec-dash-kpi-row .specpanel:hover {
        transform: none;
    }
    .spec-dashboard-home .content {
        padding-left: max(0.85rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.85rem, env(safe-area-inset-right, 0px));
    }
    .spec-dashboard-home .spec-dash-chart-canvas-host {
        width: 100%;
        max-width: 100%;
        min-height: 200px;
        position: relative;
    }
    .spec-dashboard-home .spec-dash-chart-canvas-host canvas {
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
    }
    .spec-dashboard-home .spec-dash-chart-panel .graph1under,
    .spec-dashboard-home .spec-dash-chart-panel .graph2under {
        float: none !important;
        width: 100% !important;
        max-width: 100%;
        text-align: center;
    }
    .spec-dashboard-home .spec-dash-lower .col-lg-4,
    .spec-dashboard-home .spec-dash-lower .col-lg-8 {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .spec-dashboard-home .spec-dash-hero-meta {
        width: 100%;
        justify-content: flex-start;
    }
    .spec-dashboard-home .spec-dash-monitor-process-table {
        font-size: 11px;
    }
    .spec-dashboard-home .spec-dash-monitor-process-table .spec-dash-inl-process-th,
    .spec-dashboard-home .spec-dash-monitor-process-table td {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }
}

/* ========== Dashboard dark mode (body.spec-dashboard-home.spec-dashboard-dark) ========== */
body.spec-dashboard-home.spec-dashboard-dark {
    color-scheme: dark;
    --spec-dd-bg: #070b12;
    --spec-dd-bg-mid: #0f172a;
    --spec-dd-surface: #141f30;
    --spec-dd-elevated: #1a2738;
    --spec-dd-border: rgba(148, 163, 184, 0.075);
    --spec-dd-text: #e2e8f0;
    --spec-dd-muted: #94a3b8;
    --spec-panel-card-border: rgba(148, 163, 184, 0.14);
    --spec-nav-title-border: rgba(148, 163, 184, 0.12);
    background-color: var(--spec-dd-bg) !important;
    min-height: 100vh;
}
html:has(body.spec-dashboard-home.spec-dashboard-dark) {
    background-color: #070b12;
}

body.spec-dashboard-home.spec-dashboard-dark #wrapper {
    background: linear-gradient(180deg, var(--spec-dd-bg) 0%, var(--spec-dd-bg-mid) 52%, #0a1020 100%) !important;
    border-left: 1px solid rgba(148, 163, 184, 0.06) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content {
    color: var(--spec-dd-text);
}

/* Form controls in main dashboard content — surface, border, text, placeholder (light + dark) */
body.spec-dashboard-home:not(.spec-dashboard-dark) .content .form-control,
body.spec-dashboard-home:not(.spec-dashboard-dark) .content .form-select,
body.spec-dashboard-home:not(.spec-dashboard-dark) .content textarea.form-control {
    background-color: #fff;
    border-color: var(--spec-panel-card-border) !important;
    color: #0f172a;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content .form-control::placeholder,
body.spec-dashboard-home:not(.spec-dashboard-dark) .content textarea.form-control::placeholder {
    color: #64748b;
    opacity: 1;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content .form-control:focus,
body.spec-dashboard-home:not(.spec-dashboard-dark) .content .form-select:focus,
body.spec-dashboard-home:not(.spec-dashboard-dark) .content textarea.form-control:focus {
    background-color: #fff;
    border-color: rgba(37, 99, 235, 0.55) !important;
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.12);
    color: #0f172a;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content .form-control:disabled,
body.spec-dashboard-home:not(.spec-dashboard-dark) .content .form-select:disabled,
body.spec-dashboard-home:not(.spec-dashboard-dark) .content .form-control[readonly] {
    background-color: #f1f5f9;
    color: #64748b;
    opacity: 1;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content .input-group-text {
    background-color: #f8fafc;
    border-color: var(--spec-panel-card-border) !important;
    color: #475569;
}

body.spec-dashboard-home.spec-dashboard-dark .content .form-control,
body.spec-dashboard-home.spec-dashboard-dark .content .form-select,
body.spec-dashboard-home.spec-dashboard-dark .content textarea.form-control {
    background-color: var(--spec-dd-elevated);
    border-color: var(--spec-panel-card-border) !important;
    color: var(--spec-dd-text);
}
body.spec-dashboard-home.spec-dashboard-dark .content .form-control::placeholder,
body.spec-dashboard-home.spec-dashboard-dark .content textarea.form-control::placeholder {
    color: var(--spec-dd-muted);
    opacity: 1;
}
body.spec-dashboard-home.spec-dashboard-dark .content .form-control:focus,
body.spec-dashboard-home.spec-dashboard-dark .content .form-select:focus,
body.spec-dashboard-home.spec-dashboard-dark .content textarea.form-control:focus {
    background-color: var(--spec-dd-elevated);
    border-color: rgba(167, 139, 250, 0.45) !important;
    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.15);
    color: var(--spec-dd-text);
}
body.spec-dashboard-home.spec-dashboard-dark .content .form-control:disabled,
body.spec-dashboard-home.spec-dashboard-dark .content .form-select:disabled,
body.spec-dashboard-home.spec-dashboard-dark .content .form-control[readonly] {
    background-color: var(--spec-dd-surface);
    color: var(--spec-dd-muted);
    border-color: var(--spec-panel-card-border) !important;
    opacity: 1;
}
body.spec-dashboard-home.spec-dashboard-dark .content .form-select option {
    background-color: var(--spec-dd-elevated);
    color: var(--spec-dd-text);
}
body.spec-dashboard-home.spec-dashboard-dark .content .input-group-text {
    background-color: var(--spec-dd-surface);
    border-color: var(--spec-panel-card-border) !important;
    color: var(--spec-dd-muted);
}

body.spec-dashboard-home.spec-dashboard-dark .body-content {
    background: linear-gradient(180deg, var(--spec-dd-bg) 0%, var(--spec-dd-bg-mid) 40%, #0b1222 100%);
}

/* Top toolbar — layouts 1–3 */
body.spec-dashboard-home.spec-dashboard-dark #header {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.06) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}
body.spec-dashboard-home.spec-dashboard-dark #header #logo.light-version {
    background: linear-gradient(160deg, #1e293b 0%, #172033 100%) !important;
    border-bottom: none !important;
    border-right: 1px solid rgba(148, 163, 184, 0.08) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04), 4px 0 24px rgba(0, 0, 0, 0.25) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header #logo.light-version span,
body.spec-dashboard-home.spec-dashboard-dark #header.spec-dash-toolbar-premium #logo.light-version .spec-dash-inl-logo-text {
    color: #e2e8f0 !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header .small-logo .text-primary {
    color: #c4b5fd !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header .header-link {
    background: rgba(30, 41, 59, 0.85) !important;
    border-color: rgba(148, 163, 184, 0.1) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    margin-top: 5px;
    margin-left: 10px;
}
body.spec-dashboard-home.spec-dashboard-dark #header .header-link:hover {
    background: rgba(51, 65, 85, 0.95) !important;
    border-color: rgba(167, 139, 250, 0.28) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header .navbar-toggler.mobile-menu-toggle {
    background: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    color: #cbd5e1 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header .navbar-toggler.mobile-menu-toggle:hover,
body.spec-dashboard-home.spec-dashboard-dark #header .navbar-toggler.mobile-menu-toggle:focus-visible {
    border-color: rgba(167, 139, 250, 0.45) !important;
    color: #f8fafc !important;
    outline: none;
}

/* Layouts 4–6 — account/menu toggler lives in .header-section (not #header) */
body.spec-dashboard-home:not(.spec-dashboard-dark) .header-section .navbar-toggler.mobile-menu-toggle {
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    padding: 0.42rem 0.55rem;
    color: var(--spec-header-muted, #64748b);
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .header-section .navbar-toggler.mobile-menu-toggle:hover,
body.spec-dashboard-home:not(.spec-dashboard-dark) .header-section .navbar-toggler.mobile-menu-toggle:focus-visible {
    border-color: rgba(169, 120, 209, 0.5);
    color: var(--spec-brand-deep, #6b4a9a);
    outline: none;
}
body.spec-dashboard-home.spec-dashboard-dark .header-section .navbar-toggler.mobile-menu-toggle {
    background: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    color: #cbd5e1 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .header-section .navbar-toggler.mobile-menu-toggle:hover,
body.spec-dashboard-home.spec-dashboard-dark .header-section .navbar-toggler.mobile-menu-toggle:focus-visible {
    border-color: rgba(167, 139, 250, 0.45) !important;
    color: #f8fafc !important;
    outline: none;
}
body.spec-dashboard-home.spec-dashboard-dark #header .dropdown-menu {
    background: #1e293b !important;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.35),
        0 20px 50px -12px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(148, 163, 184, 0.08) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header .dropdown-menu .title {
    color: #cbd5e1 !important;
    background: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important;
    border-bottom-color: rgba(148, 163, 184, 0.15) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header .dropdown-menu.hdropdown li {
    background: #1e293b !important;
    border-bottom-color: rgba(51, 65, 85, 0.8) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header .dropdown-menu.hdropdown li > a {
    color: #e2e8f0 !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header .dropdown-menu.hdropdown li > a:hover,
body.spec-dashboard-home.spec-dashboard-dark #header .dropdown-menu.hdropdown li > a:focus {
    background: linear-gradient(90deg, rgba(167, 139, 250, 0.15) 0%, transparent 100%) !important;
    color: #ddd6fe !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header .dropdown-menu.hdropdown li.summary > a {
    background: #0f172a !important;
    color: #c4b5fd !important;
    border-top-color: rgba(148, 163, 184, 0.12) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header .mobile-account-menu .dropdown-header {
    color: #94a3b8 !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header .mobile-account-menu .dropdown-item {
    color: #e2e8f0 !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header .mobile-account-menu .dropdown-item:hover {
    background: rgba(51, 65, 85, 0.85) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header .spec-dash-mega-menu .dropdown-menu.wide-full {
    background: #1e293b !important;
    border: 1px solid rgba(148, 163, 184, 0.1) !important;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.35),
        0 24px 48px -12px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(148, 163, 184, 0.06) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header .spec-dash-mega-menu .yamm-content {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header .spec-dash-mega-menu .yamm-content ul.list-unstyled > li > a:hover,
body.spec-dashboard-home.spec-dashboard-dark #header .spec-dash-mega-menu .yamm-content ul.list-unstyled > li > a:focus {
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.12) 0%, transparent 100%) !important;
    color: #5eead4 !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header .spec-dash-mega-menu .yamm-content .row > ul:nth-child(2) .d-title {
    color: #f1f5f9 !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header .spec-dash-mega-menu .yamm-content .text-muted {
    color: #94a3b8 !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header .yamm-content .title {
    color: #cbd5e1 !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header .yamm-content ul.list-unstyled > li > a,
body.spec-dashboard-home.spec-dashboard-dark #header .yamm-content .d-title {
    color: #e2e8f0 !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header .yamm-content .d-desk,
body.spec-dashboard-home.spec-dashboard-dark #header .yamm-content .custom-nav-img .desk {
    color: #94a3b8 !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header .language-switch.spec-oc-premium-lang-menu {
    background: #1e293b !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header .language-switch.spec-oc-premium-lang-menu > li > a {
    color: #e2e8f0 !important;
}

/* Premium header + logo rail — layouts 4–6 */
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
    border-bottom-color: rgba(148, 163, 184, 0.12) !important;
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.4);
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium.sticky-header .header-section.spec-oc-premium-header .logo a .brand-name,
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium.sticky-header .header-section.spec-oc-premium-header .spec-oc-premium-brand-text {
    color: #e2e8f0 !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium.sticky-header .header-section.spec-oc-premium-header .spec-oc-premium-icon-mark {
    color: #cbd5e1 !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium.sticky-header .logo {
    background: linear-gradient(180deg, #1e293b 0%, #172033 100%) !important;
    border-right-color: rgba(148, 163, 184, 0.12) !important;
    border-bottom-color: rgba(148, 163, 184, 0.1) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .dropdown-menu.wide-full,
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .dropdown-menu.language-switch {
    background: #1e293b !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .yamm-content .title,
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .yamm-content a {
    color: #e2e8f0 !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .yamm-content .d-desk {
    color: #94a3b8 !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .right-notification .dropdown-menu {
    background: #1e293b !important;
}

/* index-4 premium header — toolbar dark (beats offcanvascss .mega-menu .nav .show>a { background:#fff }) */
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .nav .show > a,
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .nav .show > a:hover,
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .nav .show > a:focus,
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .nav .open > a,
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .nav .open > a:hover,
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .nav .open > a:focus {
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.95) 0%, rgba(30, 41, 59, 0.98) 100%) !important;
    background-color: rgba(30, 41, 59, 0.95) !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .navbar-nav > li > a.dropdown-toggle {
    color: #e2e8f0 !important;
    background: rgba(51, 65, 85, 0.45) !important;
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
    box-shadow: none !important;
    margin-top: 10px;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .navbar-nav > li > a.dropdown-toggle:hover,
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .navbar-nav > li.dropdown.show > a.dropdown-toggle {
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.98) 0%, rgba(30, 41, 59, 1) 100%) !important;
    border-color: rgba(167, 139, 250, 0.32) !important;
    color: #f8fafc !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35) !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium.sticky-header .header-section.spec-oc-premium-header .toggle-btn.spec-oc-premium-toggle {
    background: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    color: #cbd5e1 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium.sticky-header .header-section.spec-oc-premium-header .toggle-btn.spec-oc-premium-toggle:hover {
    border-color: rgba(167, 139, 250, 0.4) !important;
    color: #f8fafc !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium.sidebar-collapsed.sticky-header .header-section.spec-oc-premium-header .icon-logo {
    background: linear-gradient(180deg, #1e293b 0%, #172033 100%) !important;
    border-right-color: rgba(148, 163, 184, 0.12) !important;
    border-bottom-color: rgba(148, 163, 184, 0.1) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .navbar-nav > li > a,
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .navbar-nav > li > .dropdown-toggle {
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #cbd5e1 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .navbar-nav > li > a:hover,
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .navbar-nav > li > .dropdown-toggle:hover,
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .navbar-nav > li.dropdown.show > a,
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .navbar-nav > li.dropdown.show > .dropdown-toggle {
    background: rgba(51, 65, 85, 0.55) !important;
    border-color: rgba(148, 163, 184, 0.12) !important;
    color: #f8fafc !important;
}

/* Layout 6 — classic sticky header */
body.spec-dashboard-home.spec-dashboard-dark.sticky-header:not(.spec-oc-sidebar-premium) .header-section {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
}
body.spec-dashboard-home.spec-dashboard-dark.sticky-header:not(.spec-oc-sidebar-premium) .header-section .brand-name-light {
    color: #e2e8f0 !important;
}
/* Layout 6 — classic header mega + tray (not premium rail) */
body.spec-dashboard-home.spec-dashboard-dark.sticky-header:not(.spec-oc-sidebar-premium) .header-section .mega-menu .dropdown-menu.wide-full {
    background: #1e293b !important;
    border: 1px solid rgba(148, 163, 184, 0.1) !important;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.35),
        0 24px 48px -12px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(148, 163, 184, 0.06) !important;
}
body.spec-dashboard-home.spec-dashboard-dark.sticky-header:not(.spec-oc-sidebar-premium) .header-section .mega-menu .yamm-content {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
}
body.spec-dashboard-home.spec-dashboard-dark.sticky-header:not(.spec-oc-sidebar-premium) .header-section .mega-menu .yamm-content .title,
body.spec-dashboard-home.spec-dashboard-dark.sticky-header:not(.spec-oc-sidebar-premium) .header-section .mega-menu .yamm-content p.title {
    color: #cbd5e1 !important;
    border-bottom-color: rgba(148, 163, 184, 0.15) !important;
}
body.spec-dashboard-home.spec-dashboard-dark.sticky-header:not(.spec-oc-sidebar-premium) .header-section .mega-menu .yamm-content ul.list-unstyled > li > a,
body.spec-dashboard-home.spec-dashboard-dark.sticky-header:not(.spec-oc-sidebar-premium) .header-section .mega-menu .yamm-content .d-title {
    color: #e2e8f0 !important;
}
body.spec-dashboard-home.spec-dashboard-dark.sticky-header:not(.spec-oc-sidebar-premium) .header-section .mega-menu .yamm-content .d-desk,
body.spec-dashboard-home.spec-dashboard-dark.sticky-header:not(.spec-oc-sidebar-premium) .header-section .mega-menu .custom-nav-img .desk {
    color: #94a3b8 !important;
}
body.spec-dashboard-home.spec-dashboard-dark.sticky-header:not(.spec-oc-sidebar-premium) .header-section .mega-menu .yamm-content .text-muted {
    color: #94a3b8 !important;
}
body.spec-dashboard-home.spec-dashboard-dark.sticky-header:not(.spec-oc-sidebar-premium) .header-section .mega-menu .yamm-content ul.list-unstyled > li > a:hover,
body.spec-dashboard-home.spec-dashboard-dark.sticky-header:not(.spec-oc-sidebar-premium) .header-section .mega-menu .yamm-content ul.list-unstyled > li > a:focus {
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.12) 0%, transparent 100%) !important;
    color: #5eead4 !important;
}
body.spec-dashboard-home.spec-dashboard-dark.sticky-header:not(.spec-oc-sidebar-premium) .header-section .mega-menu .mega-bg {
    opacity: 0.22;
    filter: saturate(0.85);
}
body.spec-dashboard-home.spec-dashboard-dark.sticky-header:not(.spec-oc-sidebar-premium) .header-section .mega-menu .navbar-nav > li > a.dropdown-toggle {
    min-height: 38px !important;
    padding: 0.35rem 0.7rem !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    border-radius: 8px !important;
    border-color: rgba(148, 163, 184, 0.11) !important;
    color: #e2e8f0 !important;
    background: rgba(51, 65, 85, 0.45) !important;
    box-shadow: none !important;
}
body.spec-dashboard-home.spec-dashboard-dark.sticky-header:not(.spec-oc-sidebar-premium) .header-section .notification-wrap .navbar-nav > li > a,
body.spec-dashboard-home.spec-dashboard-dark.sticky-header:not(.spec-oc-sidebar-premium) .header-section .notification-wrap .navbar-nav > li > .dropdown-toggle {
    min-height: 52px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    border-radius: 10px !important;
}
body.spec-dashboard-home.spec-dashboard-dark.sticky-header:not(.spec-oc-sidebar-premium) .header-section .notification-wrap a.right-sidebar-toggle {
    border-color: rgba(148, 163, 184, 0.1) !important;
    box-shadow: none !important;
}
body.spec-dashboard-home.spec-dashboard-dark.sticky-header:not(.spec-oc-sidebar-premium) .header-section .label-menu-corner .badge {
    border: 1px solid rgba(15, 23, 42, 0.9) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
body.spec-dashboard-home.spec-dashboard-dark.sticky-header:not(.spec-oc-sidebar-premium) .header-section .dropdown-menu.language-switch {
    background: #1e293b !important;
    border: 1px solid rgba(148, 163, 184, 0.1) !important;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.35),
        0 18px 40px -12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(148, 163, 184, 0.08) !important;
}

/* Hero + canvas text */
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-hero {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 55%, rgba(30, 27, 75, 0.35) 100%) !important;
    border-color: var(--spec-dd-border) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-hero-kicker {
    color: #a78bfa !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-hero-title {
    color: #f8fafc !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-hero-lead {
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-hero-pill {
    color: #cbd5e1 !important;
    background: rgba(30, 41, 59, 0.9) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-hero-pill strong {
    color: #f1f5f9 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-hero-pill--live {
    color: #6ee7b7 !important;
    background: linear-gradient(90deg, rgba(6, 78, 59, 0.5), rgba(30, 41, 59, 0.95)) !important;
    border-color: rgba(52, 211, 153, 0.35) !important;
}

/* Generic panels */
body.spec-dashboard-home.spec-dashboard-dark .specpanel {
    background: var(--spec-dd-surface) !important;
    border: 1px solid var(--spec-dd-border) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28) !important;
    color: var(--spec-dd-text);
}
body.spec-dashboard-home.spec-dashboard-dark .specpanel > .card-body + .card-body {
    border-top-color: var(--spec-panel-card-border) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .specpanel .card .card-body {
    border-top-color: var(--spec-panel-card-border) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .specpanel > .card-header {
    background: linear-gradient(180deg, var(--spec-dd-elevated) 0%, var(--spec-dd-surface) 100%) !important;
    border-bottom-color: var(--spec-dd-border) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .specpanel > .card-body:not(.colorplate1):not(.colorplate2):not(.colorplate3):not(.colorplate4) {
    background: var(--spec-dd-surface) !important;
    color: var(--spec-dd-text);
    border: 1px solid var(--spec-panel-card-border) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .specpanel > .card-footer,
body.spec-dashboard-home.spec-dashboard-dark .specpanel > .panel-section {
    background: var(--spec-dd-elevated) !important;
    border: 1px solid var(--spec-panel-card-border) !important;
    border-top: 0 !important;
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .specpanel .small,
body.spec-dashboard-home.spec-dashboard-dark .specpanel small {
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content .text-muted {
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .specpanel .panel-tools a {
    color: #94a3b8 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .specpanel .panel-tools a:hover {
    color: #e2e8f0 !important;
}

/* KPI row */
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-kpi-row .specpanel {
    background: var(--spec-dd-surface) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-kpi-row .specpanel > .card-header {
    background: linear-gradient(180deg, var(--spec-dd-elevated) 0%, var(--spec-dd-surface) 100%) !important;
}

/* Chart row headers + bodies */
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel--sales > .spec-dash-chart-card-header {
    background: linear-gradient(125deg, rgba(30, 58, 138, 0.35) 0%, rgba(30, 41, 59, 0.95) 100%) !important;
    border-bottom-color: rgba(96, 165, 250, 0.2) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel--monitor > .spec-dash-chart-card-header {
    background: linear-gradient(125deg, rgba(22, 78, 99, 0.35) 0%, rgba(30, 41, 59, 0.95) 100%) !important;
    border-bottom-color: rgba(45, 212, 191, 0.18) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-title,
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-kicker {
    color: #f1f5f9 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-sub {
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel > .card-body {
    background: var(--spec-dd-surface) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel--sales > .card-body .text-center.small,
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel--monitor > .card-body .text-center.small {
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel .graph2under,
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel .graph1under {
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel .graph2under small,
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel .graph1under small {
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-inl-sales-stat-label {
    color: #6ee7b7 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-monitor-table-card {
    background: transparent !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-monitor-process-table {
    color: var(--spec-dd-text);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(30, 41, 59, 0.45);
    --bs-table-hover-bg: rgba(51, 65, 85, 0.5);
    --bs-table-border-color: var(--spec-dd-border);
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-monitor-process-table thead th {
    color: #cbd5e1 !important;
    border-color: var(--spec-dd-border) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-process-name {
    color: var(--spec-dd-text) !important;
}

/* Activity + todo + stats */
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-panel > .card-footer {
    background: var(--spec-dd-elevated) !important;
    border-top-color: var(--spec-dd-border) !important;
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-intro {
    border-bottom-color: var(--spec-dd-border) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-heading,
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-kicker {
    color: #f1f5f9 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-sub {
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-body .feed-element {
    border-color: var(--spec-dd-border) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-body .media-body,
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-body .media-body strong {
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-body .well {
    background: var(--spec-dd-elevated) !important;
    border-color: var(--spec-dd-border) !important;
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-todo-panel > .card-header.spec-dash-todo-card-header {
    background: linear-gradient(125deg, rgba(120, 53, 15, 0.35) 0%, rgba(30, 41, 59, 0.98) 100%) !important;
    border-bottom-color: rgba(245, 158, 11, 0.2) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-todo-panel > .card-body {
    background: var(--spec-dd-surface) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-todo-title {
    color: #f8fafc !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-todo-kicker {
    color: #fbbf24 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-todo-sub {
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-todo-panel .card-title,
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-todo-panel .fo {
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-todo-panel .list-group-item {
    background: var(--spec-dd-elevated) !important;
    border-color: var(--spec-dd-border) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-stat-card-body {
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.92) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-stat-card--due .spec-dash-stat-card-body,
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-stat-card--overdue .spec-dash-stat-card-body,
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-stat-card--tickets .spec-dash-stat-card-body,
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-stat-card--proposals .spec-dash-stat-card-body {
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.94) 100%) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-stat-label {
    color: #cbd5e1 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-stat-desc {
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-stat-number--success {
    color: #6ee7b7 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-stat-number--danger {
    color: #fca5a5 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-stat-number--amber {
    color: #fcd34d !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-stat-number--slate {
    color: #cbd5e1 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-stat-footer {
    background: var(--spec-dd-elevated) !important;
    border-top-color: var(--spec-dd-border) !important;
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .specpanel.stats .card-body.h-200 {
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.88) 100%) !important;
    border-color: var(--spec-dd-border) !important;
}

/* ========== Analytics page (spec-analytics-page): row rhythm + light/dark polish ========== */
body.spec-dashboard-home .spec-analytics-page > .row {
    margin-bottom: 1.25rem;
}
body.spec-dashboard-home .spec-analytics-page > .row:last-of-type {
    margin-bottom: 0;
}
@media (max-width: 991.98px) {
    body.spec-dashboard-home .spec-analytics-page > .row > [class*="col"] {
        margin-bottom: 1rem;
    }
    body.spec-dashboard-home .spec-analytics-page > .row > [class*="col"]:last-child {
        margin-bottom: 0;
    }
}
@media (min-width: 992px) {
    body.spec-dashboard-home .spec-analytics-page > .row > [class*="col"] {
        margin-bottom: 0;
    }
}

body.spec-dashboard-home:not(.spec-dashboard-dark) .spec-analytics-page > .row > [class*="col"] > .specpanel {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.07);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

body.spec-dashboard-home .spec-analytics-page .specpanel > .card-body[class*="colorplate"] {
    border-radius: 12px;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .spec-analytics-page .specpanel > .card-body[class*="colorplate"] {
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

body.spec-dashboard-home .spec-analytics-page .specpanel > .card-body[class*="colorplate"] .small .fa,
body.spec-dashboard-home .spec-analytics-page .specpanel > .card-body[class*="colorplate"] .fa {
    color: inherit !important;
    opacity: 0.95;
}

body.spec-dashboard-home.spec-dashboard-dark .spec-analytics-page .specpanel > .card-body[class*="colorplate"] {
    border: 1px solid rgba(0, 0, 0, 0.45) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-analytics-page .specpanel > .card-body[class*="colorplate"] strong {
    color: #fff !important;
}

body.spec-dashboard-home.spec-dashboard-dark .spec-analytics-page strong.m-xs {
    color: #e2e8f0 !important;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .spec-analytics-page strong.m-xs {
    color: #334155 !important;
}

body.spec-dashboard-home.spec-dashboard-dark .spec-analytics-page .graph2under,
body.spec-dashboard-home.spec-dashboard-dark .spec-analytics-page .graph1under,
body.spec-dashboard-home.spec-dashboard-dark .spec-analytics-page .graph2under h4,
body.spec-dashboard-home.spec-dashboard-dark .spec-analytics-page .graph1under h4 {
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-analytics-page .graph2under small,
body.spec-dashboard-home.spec-dashboard-dark .spec-analytics-page .graph1under small {
    color: var(--spec-dd-muted) !important;
}

body.spec-dashboard-home.spec-dashboard-dark .spec-analytics-page .table {
    color: var(--spec-dd-text);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(30, 41, 59, 0.42);
    --bs-table-hover-bg: rgba(51, 65, 85, 0.5);
    --bs-table-border-color: var(--spec-dd-border);
}
body.spec-dashboard-home.spec-dashboard-dark .spec-analytics-page .table thead th {
    color: #cbd5e1 !important;
    border-color: var(--spec-dd-border) !important;
}
body.spec-dashboard-home .spec-analytics-page .table-responsive.project-list .table {
    margin-bottom: 0 !important;
}

body.spec-dashboard-home.spec-dashboard-dark .spec-analytics-page .specpanel.stats .card-body.h-200 h3 {
    color: #f8fafc !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-analytics-page .specpanel.stats .card-body.h-200 .font-bold {
    color: #e2e8f0 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-analytics-page .specpanel.stats .card-body.h-200 small {
    color: var(--spec-dd-muted) !important;
}

body.spec-dashboard-home.spec-dashboard-dark .spec-analytics-page .specpanel .card-body.list > .card {
    background: var(--spec-dd-elevated) !important;
    border: 1px solid var(--spec-dd-border) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-analytics-page .specpanel .card-body.list > .card .card-header {
    background: var(--spec-dd-surface) !important;
    border-bottom-color: var(--spec-dd-border) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-analytics-page .specpanel .card-body.list > .card .card-title {
    color: var(--spec-dd-text) !important;
}

body.spec-dashboard-home.spec-dashboard-dark .spec-analytics-page .specpanel .list-group-item {
    background: var(--spec-dd-elevated) !important;
    border-color: var(--spec-dd-border) !important;
    color: var(--spec-dd-text) !important;
}

body.spec-dashboard-home.spec-dashboard-dark .spec-analytics-page .btn-link.text-semibold {
    color: #5eead4 !important;
}

body.spec-dashboard-home.spec-dashboard-dark .spec-analytics-page .specpanel.stats .card-footer {
    background: var(--spec-dd-elevated) !important;
    border-top-color: var(--spec-dd-border) !important;
    color: var(--spec-dd-muted) !important;
}

body.spec-dashboard-home.spec-dashboard-dark .spec-analytics-page .specpanel .progress {
    background: rgba(0, 0, 0, 0.25);
}

/* index-2 / index-3 widget rows */
body.spec-dashboard-home.spec-dashboard-dark .spec-index2-widgets > [class*="col"] > .specpanel,
body.spec-dashboard-home.spec-dashboard-dark .spec-index3-widgets > [class*="col"] > .specpanel {
    background: var(--spec-dd-surface) !important;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.35) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-i2-todo-header {
    background: linear-gradient(125deg, rgba(6, 78, 59, 0.35) 0%, rgba(30, 41, 59, 0.98) 100%) !important;
    border-bottom-color: rgba(45, 212, 191, 0.2) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-i2-todo-title {
    color: #f8fafc !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-i2-todo-kicker {
    color: #5eead4 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-i2-todo-sub {
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-i2-todo-body {
    background: linear-gradient(180deg, var(--spec-dd-elevated) 0%, var(--spec-dd-surface) 100%) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-i2-todo-input {
    background: var(--spec-dd-elevated) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-index2-widgets ul.spec-i2-todo-ul li,
body.spec-dashboard-home.spec-dashboard-dark .spec-index3-widgets ul.spec-i2-todo-ul li {
    background: var(--spec-dd-elevated) !important;
    border-color: var(--spec-dd-border) !important;
    color: var(--spec-dd-text) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-i2-todo-footer {
    background: var(--spec-dd-elevated) !important;
    border-top-color: var(--spec-dd-border) !important;
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-i2-todo-column-title {
    color: #cbd5e1 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-i2-todo-add {
    border-color: rgba(45, 212, 191, 0.22) !important;
}

/* Support chat widget — full dark surface (index-2 / index-3) */
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chat-panel {
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.35) !important;
    border: 1px solid var(--spec-dd-border) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chat-panel > .card-header.spec-dash-support-card-header {
    background: linear-gradient(125deg, rgba(49, 46, 129, 0.35) 0%, rgba(30, 41, 59, 0.98) 100%) !important;
    border-bottom-color: rgba(129, 140, 248, 0.15) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-support-kicker {
    color: #a5b4fc !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-support-title {
    color: #f8fafc !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-support-sub {
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chat-tabs {
    background: linear-gradient(180deg, var(--spec-dd-elevated) 0%, var(--spec-dd-surface) 100%) !important;
    border-bottom: 1px solid var(--spec-dd-border) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chat-tabs .nav-link {
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chat-tabs .nav-link:hover {
    color: #c4b5fd !important;
    background: rgba(51, 65, 85, 0.5) !important;
    border-color: transparent !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chat-tabs .nav-link.active {
    color: #e9d5ff !important;
    background: var(--spec-dd-surface) !important;
    border-color: var(--spec-dd-border) !important;
    border-bottom-color: transparent !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chat-panel .chat-wi .chat-content {
    background: linear-gradient(180deg, var(--spec-dd-elevated) 0%, var(--spec-dd-surface) 100%) !important;
    border-bottom-color: var(--spec-dd-border) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chat-panel .chat-wi .chat-conv .c-avatar {
    border-color: var(--spec-dd-surface) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chat-panel .chat-wi .chat-conv:not(.sent) .c-bubble {
    color: #e2e8f0 !important;
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: rgba(148, 163, 184, 0.12) !important;
    border-left-color: #2dd4bf !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chat-panel .chat-wi .chat-conv:not(.sent) .c-bubble small {
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chat-panel .chat-wi .sent .c-bubble {
    color: #f5f3ff !important;
    background: linear-gradient(180deg, rgba(76, 29, 149, 0.45) 0%, rgba(30, 41, 59, 0.92) 100%) !important;
    border-color: rgba(167, 139, 250, 0.22) !important;
    border-right-color: #a78bfa !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chat-panel .chat-wi .sent .c-bubble .msg {
    color: #f5f3ff !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chat-panel .chat-wi .sent .c-bubble small {
    color: #c4b5fd !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chat-panel .chat-wi .chat-in {
    background: linear-gradient(180deg, var(--spec-dd-surface) 0%, var(--spec-dd-elevated) 100%) !important;
    border-top-color: var(--spec-dd-border) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chat-panel .chat-wi .chat-in input[type="text"] {
    color: var(--spec-dd-text) !important;
    border-bottom-color: var(--spec-dd-border) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chat-panel .chat-wi .chat-tools {
    background: var(--spec-dd-surface) !important;
    border-top-color: var(--spec-dd-border) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chat-panel .chat-wi .chat-tools i {
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chat-panel .chat-wi .chat-tools i:hover {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #c4b5fd !important;
}

/* Recent orders — nested Bootstrap .card + table stays light without overrides */
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-orders-panel.spec-dash-todo-panel > .card-header.spec-dash-todo-card-header {
    background: linear-gradient(125deg, rgba(6, 78, 59, 0.32) 0%, rgba(30, 41, 59, 0.98) 100%) !important;
    border-bottom-color: rgba(52, 211, 153, 0.14) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-orders-panel .spec-dash-todo-kicker {
    color: #6ee7b7 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-orders-panel .card-body.list > .card {
    background: transparent !important;
    border: 1px solid var(--spec-dd-border) !important;
    border-radius: 14px !important;
    overflow: hidden;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-orders-panel .card-body.list > .card > .card-header {
    background: var(--spec-dd-elevated) !important;
    border-bottom: 1px solid var(--spec-dd-border) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-orders-panel .card-body.list > .card > .card-body {
    background: var(--spec-dd-surface) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-orders-panel .table {
    --bs-table-color: var(--spec-dd-text);
    --bs-table-striped-color: var(--spec-dd-text);
    --bs-table-hover-color: var(--spec-dd-text);
    --bs-table-active-color: var(--spec-dd-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--spec-dd-border);
    color: var(--spec-dd-text) !important;
}
/* BS5 sets color on direct cell descendants; inherit from table is not enough */
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-orders-panel .table > :not(caption) > * > * {
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-orders-panel .table thead th {
    color: #cbd5e1 !important;
    border-color: var(--spec-dd-border) !important;
    background: rgba(15, 23, 42, 0.5) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-orders-panel .table tbody td {
    border-color: var(--spec-dd-border) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-orders-panel .table .btn-link {
    color: #5eead4 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-orders-panel .card-body.list > .card > .card-header .card-title {
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-todo-panel .list-group-item.listitemactivty {
    background: var(--spec-dd-elevated) !important;
    border: 1px solid var(--spec-panel-card-border) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-todo-panel .btn.btn-xs.btn-secondary {
    background: var(--spec-dd-elevated) !important;
    border: 1px solid var(--spec-panel-card-border) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-todo-panel .btn.btn-xs.btn-secondary:hover {
    background: rgba(51, 65, 85, 0.85) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    color: #f8fafc !important;
}
body.spec-dashboard-home.spec-dashboard-dark .specpanel.stats .card-footer {
    background: var(--spec-dd-elevated) !important;
    border-top: 1px solid var(--spec-panel-card-border) !important;
    color: var(--spec-dd-muted) !important;
}

/* Services / profile cards in index-2/3 (spec-i2-*) */
body.spec-dashboard-home.spec-dashboard-dark .spec-i2-services-shell {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-i2-profile-card {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
}

/* Footer */
body.spec-dashboard-home.spec-dashboard-dark .footer {
    background: var(--spec-dd-elevated) !important;
    border-top: 1px solid var(--spec-dd-border) !important;
    color: var(--spec-dd-muted) !important;
}

/* Left drawer — layouts 1–3 */
body.spec-dashboard-home.spec-dashboard-dark #left-sidebar {
    background: linear-gradient(180deg, #0f172a 0%, #020617 55%, #0a0f1a 100%) !important;
    border-right-color: rgba(148, 163, 184, 0.12) !important;
    box-shadow: 6px 0 32px rgba(0, 0, 0, 0.45);
}
body.spec-dashboard-home.spec-dashboard-dark #left-sidebar > .p-m:first-of-type {
    background: linear-gradient(160deg, rgba(109, 40, 217, 0.2) 0%, rgba(15, 23, 42, 0.6) 50%, transparent 100%) !important;
    border-bottom-color: rgba(148, 163, 184, 0.12) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #left-sidebar #sidebar-close.sidebar-button {
    background: var(--spec-dd-elevated) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    color: #e2e8f0 !important;
}
body.spec-dashboard-home.spec-dashboard-dark #left-sidebar .stats-label .font-extra-bold {
    color: #f1f5f9 !important;
}
body.spec-dashboard-home.spec-dashboard-dark #left-sidebar > .p-m:first-of-type .row.m-t-sm h3 {
    color: #f8fafc !important;
}
body.spec-dashboard-home.spec-dashboard-dark #left-sidebar > .p-m:first-of-type .row.m-t-sm .font-bold {
    color: #94a3b8 !important;
}
body.spec-dashboard-home.spec-dashboard-dark #left-sidebar #side-menu > li > a {
    color: #cbd5e1 !important;
}
body.spec-dashboard-home.spec-dashboard-dark #left-sidebar #side-menu > li > a:hover,
body.spec-dashboard-home.spec-dashboard-dark #left-sidebar #side-menu > li > a:focus {
    background: rgba(51, 65, 85, 0.85) !important;
    color: #ddd6fe !important;
    border-color: rgba(167, 139, 250, 0.25) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #left-sidebar #side-menu > li.active > a {
    background: linear-gradient(135deg, rgba(109, 40, 217, 0.28) 0%, rgba(16, 185, 129, 0.12) 100%) !important;
    color: #e9d5ff !important;
    border-color: rgba(167, 139, 250, 0.35) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #left-sidebar #side-menu .nav-second-level > li > a {
    color: #94a3b8 !important;
}
body.spec-dashboard-home.spec-dashboard-dark #left-sidebar #side-menu .nav-second-level > li > a:hover {
    color: #e2e8f0 !important;
    background: rgba(30, 41, 59, 0.65) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #left-sidebar .dropdown-menu {
    background: #1e293b !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #left-sidebar .dropdown-menu > li > a {
    color: #e2e8f0 !important;
}
body.spec-dashboard-home.spec-dashboard-dark #left-sidebar #side-menu .nav-second-level {
    background: rgba(15, 23, 42, 0.92) !important;
    border: 1px solid var(--spec-dd-border) !important;
    border-top: none !important;
}
body.spec-dashboard-home.spec-dashboard-dark #left-sidebar #side-menu li .nav-second-level li a {
    color: #94a3b8 !important;
}
body.spec-dashboard-home.spec-dashboard-dark #left-sidebar #side-menu li .nav-second-level li a:hover,
body.spec-dashboard-home.spec-dashboard-dark #left-sidebar #side-menu li .nav-second-level li a:focus {
    background: rgba(51, 65, 85, 0.75) !important;
    color: #e9d5ff !important;
}
body.spec-dashboard-home.spec-dashboard-dark #left-sidebar #side-menu li .nav-second-level li.active a {
    background: rgba(109, 40, 217, 0.2) !important;
    color: #ddd6fe !important;
}
body.spec-dashboard-home.spec-dashboard-dark #left-sidebar #side-menu .nav-second-level > li.active {
    background: transparent !important;
}
body.spec-dashboard-home.spec-dashboard-dark #left-sidebar #side-menu > li:first-child {
    border-top: none !important;
    margin-top: 0 !important;
}
body.spec-dashboard-home.spec-dashboard-dark #left-sidebar #side-menu > li {
    border: none;
    background: transparent;
}
body.spec-dashboard-home.spec-dashboard-dark #side-menu li:first-child {
    border-top-color: var(--spec-dd-border) !important;
}

/* Right sidebar */
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar,
body.spec-dashboard-home.spec-dashboard-dark #aside-container,
body.spec-dashboard-home.spec-dashboard-dark #aside .nano-content {
    background: #0f172a !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar .nav-tabs {
    border-bottom-color: var(--spec-dd-border) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar .nav-tabs .nav-link {
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar .nav-tabs .nav-link.active {
    color: #f8fafc !important;
    background: var(--spec-dd-surface) !important;
    border-color: var(--spec-dd-border) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar .list-group-item {
    background: var(--spec-dd-surface) !important;
    border-color: var(--spec-dd-border) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar .text-muted,
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar .text-main,
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar p {
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar .spec-rs-b5-progress {
    background-color: rgba(51, 65, 85, 0.9) !important;
    border: 1px solid rgba(148, 163, 184, 0.12);
    box-sizing: border-box;
}
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar .spec-rs-b5-progress .progress-bar {
    color: #f8fafc !important;
}

/* Bootstrap .nav-pills in main column (sidebar uses .sidebar-left, not .body-content / #wrapper .content) */
body.spec-dashboard-home .body-content .nav-pills:not(.side-navigation),
body.spec-dashboard-home #wrapper .content .nav-pills:not(.side-navigation) {
    --bs-nav-pills-border-radius: 0.5rem;
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: #0d9488;
    row-gap: 0.35rem;
    column-gap: 0.35rem;
}
body.spec-dashboard-home .body-content .nav-pills:not(.side-navigation) .nav-link,
body.spec-dashboard-home #wrapper .content .nav-pills:not(.side-navigation) .nav-link {
    color: rgba(51, 65, 85, 0.92);
}
body.spec-dashboard-home .body-content .nav-pills:not(.side-navigation) .nav-link:hover,
body.spec-dashboard-home .body-content .nav-pills:not(.side-navigation) .nav-link:focus,
body.spec-dashboard-home #wrapper .content .nav-pills:not(.side-navigation) .nav-link:hover,
body.spec-dashboard-home #wrapper .content .nav-pills:not(.side-navigation) .nav-link:focus {
    color: #0f172a;
}
body.spec-dashboard-home.spec-dashboard-dark .body-content .nav-pills:not(.side-navigation),
body.spec-dashboard-home.spec-dashboard-dark #wrapper .content .nav-pills:not(.side-navigation) {
    --bs-nav-pills-link-active-color: #f0fdfa;
    --bs-nav-pills-link-active-bg: rgba(13, 148, 136, 0.55);
}
body.spec-dashboard-home.spec-dashboard-dark .body-content .nav-pills:not(.side-navigation) .nav-link,
body.spec-dashboard-home.spec-dashboard-dark #wrapper .content .nav-pills:not(.side-navigation) .nav-link {
    color: rgba(148, 163, 184, 0.95);
}
body.spec-dashboard-home.spec-dashboard-dark .body-content .nav-pills:not(.side-navigation) .nav-link:hover,
body.spec-dashboard-home.spec-dashboard-dark .body-content .nav-pills:not(.side-navigation) .nav-link:focus,
body.spec-dashboard-home.spec-dashboard-dark #wrapper .content .nav-pills:not(.side-navigation) .nav-link:hover,
body.spec-dashboard-home.spec-dashboard-dark #wrapper .content .nav-pills:not(.side-navigation) .nav-link:focus {
    color: #f1f5f9;
}
/* Legacy chat toolbars: <ul class="nav nav-pills"><li class="active"><i> — no .nav-link */
body.spec-dashboard-home.spec-dashboard-dark .body-content .nav-pills:not(.side-navigation) > li > i,
body.spec-dashboard-home.spec-dashboard-dark #wrapper .content .nav-pills:not(.side-navigation) > li > i {
    color: rgba(148, 163, 184, 0.9);
}
body.spec-dashboard-home.spec-dashboard-dark .body-content .nav-pills:not(.side-navigation) > li.active > i,
body.spec-dashboard-home.spec-dashboard-dark #wrapper .content .nav-pills:not(.side-navigation) > li.active > i {
    color: #5eead4;
}

/* ========== index-4 — premium off-canvas light sidebar (body.spec-oc-sidebar-premium) ========== */
body.spec-oc-sidebar-premium {
    --spec-oc-sidebar-w: 300px;
    /* Side nav — token colors for light sidebar (dark-mode: toggle via body.spec-oc-theme-dark + overrides below) */
    --spec-oc-sn-link: #475569;
    --spec-oc-sn-link-hover: #0f766e;
    --spec-oc-sn-link-active: #0f766e;
    --spec-oc-sn-icon: #64748b;
    --spec-oc-sn-icon-hover: #0d9488;
    --spec-oc-sn-icon-active: #0d9488;
    --spec-oc-sn-child: #64748b;
    --spec-oc-sn-child-hover: #334155;
    --spec-oc-sn-child-active: #0f766e;
    --spec-oc-sn-flyout-bg: #ffffff;
    --spec-oc-sn-flyout-text: #0f172a;
    --spec-oc-sn-flyout-border: rgba(148, 163, 184, 0.28);
    --spec-oc-sn-flyout-head-bg1: #f8fafc;
    --spec-oc-sn-flyout-head-bg2: #ffffff;
    --spec-oc-sn-flyout-w: min(280px, calc(100vw - 80px));
    --spec-oc-sn-flyout-head-h: 48px;
}

/* Dark sidebar surface: add class spec-oc-theme-dark on <body> (e.g. index-5.html) */
body.spec-oc-sidebar-premium.spec-oc-theme-dark {
    --spec-oc-sn-link: #cbd5e1;
    --spec-oc-sn-link-hover: #5eead4;
    --spec-oc-sn-link-active: #5eead4;
    --spec-oc-sn-icon: #94a3b8;
    --spec-oc-sn-icon-hover: #2dd4bf;
    --spec-oc-sn-icon-active: #2dd4bf;
    --spec-oc-sn-child: #94a3b8;
    --spec-oc-sn-child-hover: #e2e8f0;
    --spec-oc-sn-child-active: #5eead4;
    --spec-oc-sn-flyout-bg: #1e293b;
    --spec-oc-sn-flyout-text: #f8fafc;
    --spec-oc-sn-flyout-border: rgba(148, 163, 184, 0.22);
    --spec-oc-sn-flyout-head-bg1: #334155;
    --spec-oc-sn-flyout-head-bg2: #1e293b;
}
/* Wider rail + keep header / content aligned (default theme uses 240px) */
body.spec-oc-sidebar-premium .body-content {
    margin-left: var(--spec-oc-sidebar-w);
}
body.spec-oc-sidebar-premium.sticky-header .logo {
    width: var(--spec-oc-sidebar-w);
}
body.spec-oc-sidebar-premium.sticky-header .header-section {
    left: var(--spec-oc-sidebar-w);
}
body.spec-oc-sidebar-premium.sticky-header .right-notification {
    margin-right: var(--spec-oc-sidebar-w);
}
@media screen and (max-width: 1024px) {
    /*
     * Mobile / tablet: premium layout must not keep desktop margin-left on .body-content
     * (theme + responsive.css lose specificity to body.spec-oc-sidebar-premium .body-content).
     * Drawer is off-canvas; main column stays full width.
     */
    body.spec-oc-sidebar-premium:not(.sidebar-open) .body-content,
    body.spec-oc-sidebar-premium.sidebar-open .body-content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Full-width toolbar; drawer slides above content (not beside) */
    body.spec-oc-sidebar-premium.sticky-header .header-section.spec-oc-premium-header,
    body.spec-oc-sidebar-premium.sticky-header.sidebar-open .header-section.spec-oc-premium-header {
        left: 0 !important;
        width: 100% !important;
        max-width: 100vw;
        box-sizing: border-box;
    }

    body.spec-oc-sidebar-premium.sticky-header:not(.sidebar-open) .right-notification,
    body.spec-oc-sidebar-premium.sticky-header.sidebar-open .right-notification {
        margin-right: 0.65rem !important;
    }

    body.spec-oc-sidebar-premium.sticky-header:not(.sidebar-open) .header-section.spec-oc-premium-header .logo,
    body.spec-oc-sidebar-premium.sticky-header:not(.sidebar-open) .header-section.spec-oc-premium-header .icon-logo {
        display: none !important;
        visibility: hidden;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden;
        pointer-events: none;
        border: none !important;
    }

    /* Off-canvas drawer below fixed header so the menu toggle stays reachable */
    body.spec-oc-sidebar-premium .sidebar-left.color-light-sidebar,
    body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left.color-dark-sidebar {
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        width: min(var(--spec-oc-sidebar-w), min(320px, 92vw)) !important;
        max-width: min(320px, 92vw) !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        z-index: 1060;
        margin: 0 !important;
        transform: translate3d(-105%, 0, 0);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        visibility: visible !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    body.spec-oc-sidebar-premium.sidebar-open .sidebar-left.color-light-sidebar,
    body.spec-oc-sidebar-premium.spec-oc-theme-dark.sidebar-open .sidebar-left.color-dark-sidebar {
        transform: translate3d(0, 0, 0);
        box-shadow: 10px 0 40px rgba(15, 23, 42, 0.2);
    }

    body.spec-oc-sidebar-premium.spec-oc-theme-dark.sidebar-open .sidebar-left.color-dark-sidebar {
        box-shadow: 10px 0 48px rgba(0, 0, 0, 0.55);
    }

    body.spec-oc-sidebar-premium.sidebar-open {
        overflow: hidden;
    }
}

/* Dimmed overlay behind drawer — below fixed header (1040) so menu toggle stays usable */
.spec-oc-sidebar-backdrop {
    display: none;
}

@media screen and (max-width: 1024px) {
    body.spec-oc-sidebar-premium.sidebar-open .spec-oc-sidebar-backdrop {
        display: block;
        position: fixed;
        top: 60px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1035;
        background: rgba(15, 23, 42, 0.42);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }
}

body.spec-oc-sidebar-premium .spec-oc-premium-avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}
body.spec-oc-sidebar-premium .spec-oc-premium-disk-b5 {
    height: 0.55rem;
    border-radius: 50rem;
    background-color: rgba(148, 163, 184, 0.22);
    overflow: hidden;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .spec-oc-premium-disk-b5 {
    background-color: rgba(51, 65, 85, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.12);
    box-sizing: border-box;
}
body.spec-oc-sidebar-premium .spec-oc-premium-disk-pbar {
    width: 45%;
    line-height: 1;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35);
}
body.spec-oc-sidebar-premium .spec-oc-premium-prog-fill--33 {
    width: 33% !important;
}
body.spec-oc-sidebar-premium .spec-oc-premium-prog-fill--65 {
    width: 65% !important;
}
body.spec-oc-sidebar-premium .spec-oc-premium-spark-offset {
    margin-left: 60px;
}

/* Shell — depth, edge, scroll (collapsed flyout z-index below) */
body.spec-oc-sidebar-premium .sidebar-left.color-light-sidebar {
    width: var(--spec-oc-sidebar-w);
    background: linear-gradient(185deg, #ffffff 0%, #f4f7fb 42%, #eef2f7 100%);
    border-right: 1px solid rgba(148, 163, 184, 0.32);
    box-shadow: 6px 0 36px rgba(15, 23, 42, 0.07);
}
body.spec-oc-sidebar-premium .sidebar-left.sticky-sidebar::-webkit-scrollbar {
    width: 6px;
}
body.spec-oc-sidebar-premium .sidebar-left.sticky-sidebar::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.35);
    border-radius: 99px;
}
body.spec-oc-sidebar-premium .sidebar-left.sticky-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

/* Align fixed logo strip with sidebar (width set above) */
body.spec-oc-sidebar-premium.sticky-header .logo {
    background: linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
    border-right: 1px solid rgba(148, 163, 184, 0.28);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

/* Top profile + metrics rail */
body.spec-oc-sidebar-premium .sidebar-left > .sidebar-widget.color-light-sidebar {
    padding: 1.2rem 16px 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(
        135deg,
        rgba(236, 253, 245, 0.55) 0%,
        rgba(255, 255, 255, 0.95) 38%,
        rgba(255, 255, 255, 1) 100%
    );
}

/* Dark premium sidebar shell (index-5 + spec-oc-theme-dark) */
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left.color-dark-sidebar {
    width: var(--spec-oc-sidebar-w);
    background: linear-gradient(185deg, #1e293b 0%, #0f172a 46%, #020617 100%);
    border-right: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 6px 0 40px rgba(0, 0, 0, 0.45);
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left > .sidebar-widget.color-dark-sidebar {
    padding: 1.2rem 16px 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.2) 0%, rgba(30, 41, 59, 0.95) 45%, rgba(15, 23, 42, 1) 100%);
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .spec-oc-premium-profile-name {
    color: #f1f5f9;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .spec-oc-premium-account-trigger {
    border-color: rgba(148, 163, 184, 0.22);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .spec-oc-premium-account-trigger:hover,
body.spec-oc-sidebar-premium.spec-oc-theme-dark .spec-oc-premium-account-dd.show .spec-oc-premium-account-trigger {
    border-color: rgba(45, 212, 191, 0.4);
    background: rgba(30, 41, 59, 0.98);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .spec-oc-premium-account-trigger-title {
    color: #5eead4;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .spec-oc-premium-account-trigger-sub {
    color: #94a3b8;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .spec-oc-premium-account-chevron {
    color: #64748b;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .spec-oc-premium-account-dd.show .spec-oc-premium-account-chevron {
    color: #2dd4bf;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left > .sidebar-widget > p {
    color: #94a3b8;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left > .sidebar-widget .row.m-t-sm h3.text-success,
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left > .sidebar-widget .row.m-t-sm .font-bold {
    color: #e2e8f0;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left > .sidebar-widget .row.m-t-sm .text-success {
    color: #5eead4 !important;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left-info.dark-color {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(2, 6, 23, 0.99) 100%);
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark:not(.sidebar-collapsed) .sidebar-left .side-navigation.spec-oc-side-nav > li.menu-list .child-list {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.99) 100%);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left .side-navigation.spec-oc-side-nav .child-list > li > a:hover,
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left .side-navigation.spec-oc-side-nav .child-list > li > a:focus {
    background: rgba(51, 65, 85, 0.65);
    border-left-color: rgba(45, 212, 191, 0.55);
}

/* offcanvascss/default-theme-light.css is always imported; it paints flat #fff + legacy #7cd8a9 on these selectors — neutralize on premium so token-based rules win (dark sidebar) */
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left.color-dark-sidebar .nav > li > a:hover,
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left.color-dark-sidebar .nav > li > a:focus,
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left.color-dark-sidebar .side-navigation > li.active > a,
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left.color-dark-sidebar .side-navigation > li.active > a:hover,
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left.color-dark-sidebar .side-navigation > li.active > a:focus,
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left.color-dark-sidebar .side-navigation > li.menu-list > a:hover,
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left.color-dark-sidebar .side-navigation > li.nav-active > a,
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left.color-dark-sidebar .side-navigation .child-list,
body.spec-oc-sidebar-premium.spec-oc-theme-dark.sidebar-collapsed .sidebar-left.color-dark-sidebar .side-navigation > li.nav-hover > a,
body.spec-oc-sidebar-premium.spec-oc-theme-dark.sidebar-collapsed .sidebar-left.color-dark-sidebar .side-navigation > li.nav-hover.active > a,
body.spec-oc-sidebar-premium.spec-oc-theme-dark.sidebar-collapsed .sidebar-left.color-dark-sidebar .side-navigation li.nav-hover.active a span,
body.spec-oc-sidebar-premium.spec-oc-theme-dark.sidebar-collapsed .sidebar-left.color-dark-sidebar .side-navigation li a span,
body.spec-oc-sidebar-premium.spec-oc-theme-dark.sidebar-collapsed .sidebar-left.color-dark-sidebar .side-navigation li.nav-hover ul {
    background-color: transparent !important;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left.color-dark-sidebar .side-navigation > li > a:hover,
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left.color-dark-sidebar .side-navigation > li > a:active,
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left.color-dark-sidebar .side-navigation > li.nav-active > a,
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left.color-dark-sidebar .side-navigation > li.nav-active > a:after {
    color: var(--spec-oc-sn-link-hover) !important;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left.color-dark-sidebar .side-navigation > li.active > a,
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left.color-dark-sidebar .side-navigation > li.active > a:hover,
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left.color-dark-sidebar .side-navigation > li.active > a:focus {
    color: var(--spec-oc-sn-link-active) !important;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left.color-dark-sidebar .side-navigation .child-list > li > a:hover,
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left.color-dark-sidebar .side-navigation .child-list > li > a:active,
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left.color-dark-sidebar .side-navigation .child-list > li > a:focus {
    color: var(--spec-oc-sn-child-hover) !important;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left.color-dark-sidebar .side-navigation.spec-oc-side-nav .child-list > li.active > a {
    color: var(--spec-oc-sn-child-active) !important;
}

/* Light sidebar (theme toggle): replace legacy mint on hovers; let child-list use premium gradient below */
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .sidebar-left.color-light-sidebar .side-navigation > li > a:hover,
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .sidebar-left.color-light-sidebar .side-navigation > li > a:active,
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .sidebar-left.color-light-sidebar .side-navigation > li.nav-active > a,
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .sidebar-left.color-light-sidebar .side-navigation > li.nav-active > a:after {
    color: var(--spec-oc-sn-link-hover) !important;
}
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .sidebar-left.color-light-sidebar .side-navigation > li.active > a,
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .sidebar-left.color-light-sidebar .side-navigation > li.active > a:hover,
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .sidebar-left.color-light-sidebar .side-navigation > li.active > a:focus {
    color: var(--spec-oc-sn-link-active) !important;
}
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .sidebar-left.color-light-sidebar .nav > li > a:hover,
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .sidebar-left.color-light-sidebar .nav > li > a:focus,
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .sidebar-left.color-light-sidebar .side-navigation > li.menu-list > a:hover,
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .sidebar-left.color-light-sidebar .side-navigation > li.nav-active > a,
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .sidebar-left.color-light-sidebar .side-navigation .child-list,
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark).sidebar-collapsed .sidebar-left.color-light-sidebar .side-navigation > li.nav-hover > a,
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark).sidebar-collapsed .sidebar-left.color-light-sidebar .side-navigation > li.nav-hover.active > a,
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark).sidebar-collapsed .sidebar-left.color-light-sidebar .side-navigation li.nav-hover.active a span,
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark).sidebar-collapsed .sidebar-left.color-light-sidebar .side-navigation li a span,
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark).sidebar-collapsed .sidebar-left.color-light-sidebar .side-navigation li.nav-hover ul {
    background-color: transparent !important;
}

body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left-info .sidebar-widget.color-dark-sidebar {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 1) 100%);
    border-color: rgba(148, 163, 184, 0.14);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4);
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left-info .sidebar-widget.color-dark-sidebar h4 {
    color: #94a3b8;
    border-bottom-color: rgba(148, 163, 184, 0.12);
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left-info .sidebar-widget ul.list-group > li {
    border-bottom-color: rgba(148, 163, 184, 0.1);
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left-info .sidebar-widget ul.list-group > li p {
    color: #cbd5e1;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left-info .sidebar-widget .p-m {
    background: rgba(15, 23, 42, 0.75);
    border-color: rgba(148, 163, 184, 0.12);
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left-info .sidebar-widget .p-m .font-bold {
    color: #e2e8f0;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .spec-oc-premium-avatar {
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

/* Profile row — room for name + account control */
body.spec-oc-sidebar-premium .spec-oc-premium-profile {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 12px;
}
body.spec-oc-sidebar-premium .spec-oc-premium-profile-avatar-link {
    flex-shrink: 0;
}
body.spec-oc-sidebar-premium .spec-oc-premium-profile-meta {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}
body.spec-oc-sidebar-premium .spec-oc-premium-profile-name {
    display: block;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: #0f172a;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}
/* Account dropdown */
body.spec-oc-sidebar-premium .spec-oc-premium-account-dd {
    width: 100%;
    margin-top: 10px;
}
body.spec-oc-sidebar-premium .spec-oc-premium-account-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
body.spec-oc-sidebar-premium .spec-oc-premium-account-trigger:hover,
body.spec-oc-sidebar-premium .spec-oc-premium-account-dd.show .spec-oc-premium-account-trigger {
    border-color: rgba(20, 184, 166, 0.45);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    background: #fff;
}
body.spec-oc-sidebar-premium .spec-oc-premium-account-trigger-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
body.spec-oc-sidebar-premium .spec-oc-premium-account-trigger-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0f766e;
}
body.spec-oc-sidebar-premium .spec-oc-premium-account-trigger-sub {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.35;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
body.spec-oc-sidebar-premium .spec-oc-premium-account-chevron {
    flex-shrink: 0;
    font-size: 14px;
    color: #94a3b8;
    transition: transform 0.2s ease, color 0.15s ease;
}
body.spec-oc-sidebar-premium .spec-oc-premium-account-dd.show .spec-oc-premium-account-chevron {
    transform: rotate(180deg);
    color: #0d9488;
}
/* Light sidebar (default premium toggle): account dropdown */
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .spec-oc-premium-account-menu {
    width: 100%;
    min-width: min(272px, calc(100vw - 1.5rem));
    margin-top: 8px !important;
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .spec-oc-premium-account-menu .dropdown-header.spec-oc-premium-account-menu-brand {
    padding: 12px 12px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    background: linear-gradient(125deg, rgba(236, 253, 245, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 10px;
}
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .spec-oc-premium-account-menu-name {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
}
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .spec-oc-premium-account-menu-role {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-top: 2px;
    text-transform: none;
    letter-spacing: 0;
}
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .spec-oc-premium-account-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    transition: background 0.12s ease, color 0.12s ease;
}
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .spec-oc-premium-account-menu .dropdown-item i {
    width: 1.1em;
    text-align: center;
    color: #64748b;
}
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .spec-oc-premium-account-menu .dropdown-item:hover,
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .spec-oc-premium-account-menu .dropdown-item:focus {
    background: rgba(16, 185, 129, 0.12);
    color: #0f766e;
}
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .spec-oc-premium-account-menu .dropdown-item:hover i,
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .spec-oc-premium-account-menu .dropdown-item:focus i {
    color: #0d9488;
}
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .spec-oc-premium-account-menu .spec-oc-premium-account-logout {
    color: #b91c1c;
}
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .spec-oc-premium-account-menu .spec-oc-premium-account-logout:hover,
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .spec-oc-premium-account-menu .spec-oc-premium-account-logout:focus {
    background: rgba(254, 226, 226, 0.85);
    color: #991b1b;
}
body.spec-oc-sidebar-premium:not(.spec-oc-theme-dark) .spec-oc-premium-account-menu .dropdown-divider {
    margin: 8px 6px;
    border-color: rgba(148, 163, 184, 0.2);
}

/* Dark sidebar (spec-oc-theme-dark): same dropdown, slate surface + teal accents */
body.spec-oc-sidebar-premium.spec-oc-theme-dark .spec-oc-premium-account-menu {
    width: 100%;
    min-width: min(272px, calc(100vw - 1.5rem));
    margin-top: 8px !important;
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 55%, #020617 100%);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .spec-oc-premium-account-menu .dropdown-header.spec-oc-premium-account-menu-brand {
    padding: 12px 12px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(125deg, rgba(45, 212, 191, 0.12) 0%, rgba(15, 23, 42, 0) 100%);
    border-radius: 10px;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .spec-oc-premium-account-menu-name {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: -0.01em;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .spec-oc-premium-account-menu-role {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    margin-top: 2px;
    text-transform: none;
    letter-spacing: 0;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .spec-oc-premium-account-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #e2e8f0;
    transition: background 0.12s ease, color 0.12s ease;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .spec-oc-premium-account-menu .dropdown-item i {
    width: 1.1em;
    text-align: center;
    color: #94a3b8;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .spec-oc-premium-account-menu .dropdown-item:hover,
body.spec-oc-sidebar-premium.spec-oc-theme-dark .spec-oc-premium-account-menu .dropdown-item:focus {
    background: rgba(45, 212, 191, 0.14);
    color: #5eead4;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .spec-oc-premium-account-menu .dropdown-item:hover i,
body.spec-oc-sidebar-premium.spec-oc-theme-dark .spec-oc-premium-account-menu .dropdown-item:focus i {
    color: #2dd4bf;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .spec-oc-premium-account-menu .spec-oc-premium-account-logout {
    color: #fca5a5;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .spec-oc-premium-account-menu .spec-oc-premium-account-logout:hover,
body.spec-oc-sidebar-premium.spec-oc-theme-dark .spec-oc-premium-account-menu .spec-oc-premium-account-logout:focus {
    background: rgba(127, 29, 29, 0.45);
    color: #fecaca;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .spec-oc-premium-account-menu .dropdown-divider {
    margin: 8px 6px;
    border-color: rgba(148, 163, 184, 0.18);
}
body.spec-oc-sidebar-premium .sidebar-left > .sidebar-widget > p {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin-top: 0.75rem;
}
body.spec-oc-sidebar-premium .sidebar-left > .sidebar-widget .progress.m-t-xs.full.progress-small {
    height: 8px;
    border-radius: 99px;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.22);
    margin-top: 0.5rem;
}
body.spec-oc-sidebar-premium .sidebar-left > .sidebar-widget .progress-bar-success {
    border-radius: 99px;
    background: linear-gradient(90deg, #34d399 0%, #3fb68b 100%);
}
body.spec-oc-sidebar-premium .sidebar-left > .sidebar-widget .row.m-t-sm h3 {
    font-size: clamp(1rem, 4vw, 1.35rem);
    word-break: break-word;
    line-height: 1.2;
}
body.spec-oc-sidebar-premium .sidebar-left > .sidebar-widget .row.m-t-sm .font-bold {
    font-size: 11px;
    white-space: normal;
}

/* Nav stack */
body.spec-oc-sidebar-premium .sidebar-left-info.light-color {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.98) 100%);
}
body.spec-oc-sidebar-premium .sidebar-left .side-navigation {
    background: transparent;
    margin-top: 0.25rem;
    padding-bottom: 0.5rem;
}
/* Bootstrap 5 .nav-pills on premium sidebar: column stack + pill tokens follow --spec-oc-sn-* (light / dark with spec-oc-theme-dark) */
body.spec-oc-sidebar-premium .sidebar-left .side-navigation.nav-pills {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    --bs-nav-pills-border-radius: 10px;
    --bs-nav-pills-link-active-color: var(--spec-oc-sn-link-active);
    --bs-nav-pills-link-active-bg: rgba(16, 185, 129, 0.18);
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left .side-navigation.nav-pills {
    --bs-nav-pills-link-active-bg: rgba(45, 212, 191, 0.14);
}
body.spec-oc-sidebar-premium .sidebar-left .side-navigation.nav-pills .nav-link {
    margin: 2px 10px;
    padding: 12px 14px;
    border-radius: var(--bs-nav-pills-border-radius);
    font-weight: 600;
    font-size: 13px;
    color: var(--spec-oc-sn-link);
    background: transparent;
    border: 0;
    text-align: start;
    width: auto;
    align-self: stretch;
}
body.spec-oc-sidebar-premium .sidebar-left .side-navigation.nav-pills .nav-link:hover,
body.spec-oc-sidebar-premium .sidebar-left .side-navigation.nav-pills .nav-link:focus {
    background: rgba(16, 185, 129, 0.1);
    color: var(--spec-oc-sn-link-hover);
}
body.spec-oc-sidebar-premium .sidebar-left .side-navigation.nav-pills .nav-link.active,
body.spec-oc-sidebar-premium .sidebar-left .side-navigation.nav-pills .show > .nav-link {
    color: var(--spec-oc-sn-link-active);
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.14) 0%, rgba(16, 185, 129, 0.04) 100%);
    box-shadow: inset 3px 0 0 #14b8a6;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left .side-navigation.nav-pills .nav-link.active,
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left .side-navigation.nav-pills .show > .nav-link {
    box-shadow: inset 3px 0 0 #2dd4bf;
}
body.spec-oc-sidebar-premium .sidebar-left .side-navigation .navigation-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: #94a3b8;
    padding: 16px 20px 6px;
    margin-top: 0.25rem;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark .sidebar-left.color-dark-sidebar .side-navigation .navigation-title {
    color: #94a3b8;
    border-top-color: rgba(148, 163, 184, 0.22) !important;
    border-bottom-color: rgba(148, 163, 184, 0.22) !important;
}

/* Section headings + open submenus stack above rows below (later <li> wins paint order by default) */
body.spec-oc-sidebar-premium:not(.sidebar-collapsed) .sidebar-left .side-navigation.spec-oc-side-nav > li.menu-list {
    position: relative;
    z-index: 1;
}
body.spec-oc-sidebar-premium:not(.sidebar-collapsed) .sidebar-left .side-navigation.spec-oc-side-nav > li.menu-list.nav-active,
body.spec-oc-sidebar-premium:not(.sidebar-collapsed) .sidebar-left .side-navigation.spec-oc-side-nav > li.menu-list.active {
    z-index: 40;
}
/* Keep section expanded when the current page is a child link (matches .nav-active open state; :has() avoids FOUC before offcanvas.js). .spec-oc-submenu-collapsed = user closed it via parent row (offcanvas.js). */
body.spec-oc-sidebar-premium:not(.sidebar-collapsed) .sidebar-left .side-navigation.spec-oc-side-nav > li.menu-list:has(> ul.child-list > li.active):not(.spec-oc-submenu-collapsed) {
    z-index: 40;
}
body.spec-oc-sidebar-premium:not(.sidebar-collapsed) .sidebar-left .side-navigation.spec-oc-side-nav > li.menu-list:has(> ul.child-list > li.active):not(.spec-oc-submenu-collapsed) > ul.child-list {
    display: block !important;
}
body.spec-oc-sidebar-premium:not(.sidebar-collapsed) .sidebar-left .side-navigation.spec-oc-side-nav > li.menu-list:has(> ul.child-list > li.active):not(.spec-oc-submenu-collapsed) > a:after {
    content: "\f107";
}
body.spec-oc-sidebar-premium:not(.sidebar-collapsed) .sidebar-left .side-navigation.spec-oc-side-nav > li.menu-list .child-list {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.98) 0%, rgba(255, 255, 255, 0.99) 100%);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.07);
}

/* ul.side-navigation.spec-oc-side-nav: token-based colors. Optional a.spec-oc-side-nav-link on items for hooks / overrides */
body.spec-oc-sidebar-premium .sidebar-left .side-navigation.spec-oc-side-nav > li > a {
    margin: 2px 10px;
    padding: 12px 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    color: var(--spec-oc-sn-link);
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
body.spec-oc-sidebar-premium .sidebar-left .side-navigation.spec-oc-side-nav > li > a:hover,
body.spec-oc-sidebar-premium .sidebar-left .side-navigation.spec-oc-side-nav > li > a:focus {
    background: rgba(16, 185, 129, 0.1);
    color: var(--spec-oc-sn-link-hover);
    box-shadow: none;
}
body.spec-oc-sidebar-premium .sidebar-left .side-navigation li .fa,
body.spec-oc-sidebar-premium .sidebar-left .side-navigation li .ico {
    color: var(--spec-oc-sn-icon);
    transition: color 0.15s ease;
}
body.spec-oc-sidebar-premium .sidebar-left .side-navigation.spec-oc-side-nav > li > a:hover .fa,
body.spec-oc-sidebar-premium .sidebar-left .side-navigation.spec-oc-side-nav > li > a:focus .fa {
    color: var(--spec-oc-sn-icon-hover);
}
body.spec-oc-sidebar-premium .sidebar-left .side-navigation.spec-oc-side-nav > li.menu-list.active > a,
body.spec-oc-sidebar-premium .sidebar-left .side-navigation.spec-oc-side-nav > li.nav-active > a {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.14) 0%, rgba(16, 185, 129, 0.04) 100%);
    color: var(--spec-oc-sn-link-active);
    box-shadow: inset 3px 0 0 #14b8a6;
}
body.spec-oc-sidebar-premium .sidebar-left .side-navigation.spec-oc-side-nav > li.menu-list.active > a .fa,
body.spec-oc-sidebar-premium .sidebar-left .side-navigation.spec-oc-side-nav > li.nav-active > a .fa {
    color: var(--spec-oc-sn-icon-active);
}
/* Long labels: wrap instead of clipping */
body.spec-oc-sidebar-premium .sidebar-left .side-navigation > li > a span {
    white-space: normal;
    line-height: 1.35;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}
body.spec-oc-sidebar-premium .sidebar-left .side-navigation > li > a .badge,
body.spec-oc-sidebar-premium .sidebar-left .side-navigation > li > a .label {
    white-space: normal;
    max-width: 100%;
    line-height: 1.25;
}
body.spec-oc-sidebar-premium .sidebar-left .side-navigation.spec-oc-side-nav .child-list > li > a {
    border-left: 3px solid transparent;
    margin: 1px 10px 1px 8px;
    padding: 10px 12px 10px 44px;
    border-radius: 0 10px 10px 0;
    font-size: 12.5px;
    color: var(--spec-oc-sn-child);
    white-space: normal;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.spec-oc-sidebar-premium .sidebar-left .side-navigation.spec-oc-side-nav .child-list > li > a:hover,
body.spec-oc-sidebar-premium .sidebar-left .side-navigation.spec-oc-side-nav .child-list > li > a:focus {
    background: rgba(241, 245, 249, 0.95);
    border-left-color: rgba(20, 184, 166, 0.45);
    color: var(--spec-oc-sn-child-hover);
}
body.spec-oc-sidebar-premium .sidebar-left .side-navigation.spec-oc-side-nav .child-list > li.active > a {
    color: var(--spec-oc-sn-child-active) !important;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.12);
    border-left-color: #14b8a6;
}

/* Server status + sparkline card */
body.spec-oc-sidebar-premium .sidebar-left-info .sidebar-widget.color-light-sidebar {
    margin: 14px 12px 22px;
    padding: 16px 14px 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}
body.spec-oc-sidebar-premium .sidebar-left-info .sidebar-widget.color-light-sidebar h4 {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #64748b;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
body.spec-oc-sidebar-premium .sidebar-left-info .sidebar-widget ul.list-group {
    list-style: none;
    padding: 0;
    margin: 0;
}
body.spec-oc-sidebar-premium .sidebar-left-info .sidebar-widget ul.list-group > li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
body.spec-oc-sidebar-premium .sidebar-left-info .sidebar-widget ul.list-group > li:last-child {
    border-bottom: none;
    padding-top: 14px;
}
body.spec-oc-sidebar-premium .sidebar-left-info .sidebar-widget ul.list-group > li p {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}
body.spec-oc-sidebar-premium .sidebar-left-info .sidebar-widget .progress.progress-xs {
    height: 8px;
    border-radius: 99px;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.22);
    display: flex;
    align-items: stretch;
}
body.spec-oc-sidebar-premium .sidebar-left-info .sidebar-widget .progress-bar {
    border-radius: 99px;
    flex-grow: 0;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(15, 23, 42, 0.08);
}
/* BS5 has no .progress-bar-danger / .progress-bar-warning fills; theme only colored .full — paint fills here */
body.spec-oc-sidebar-premium .sidebar-left-info .sidebar-widget .progress-bar.progress-bar-danger,
body.spec-oc-sidebar-premium .sidebar-left-info .sidebar-widget .progress-bar.spec-oc-premium-prog-fill--33 {
    background: linear-gradient(90deg, #f87171 0%, #dc2626 55%, #b91c1c 100%);
    color: transparent;
}
body.spec-oc-sidebar-premium .sidebar-left-info .sidebar-widget .progress-bar.progress-bar-warning,
body.spec-oc-sidebar-premium .sidebar-left-info .sidebar-widget .progress-bar.spec-oc-premium-prog-fill--65 {
    background: linear-gradient(90deg, #fcd34d 0%, #f59e0b 50%, #d97706 100%);
    color: rgba(15, 23, 42, 0.35);
}
body.spec-oc-sidebar-premium .sidebar-left-info .sidebar-widget .btn.btn-success.btn-sm {
    border-radius: 8px;
    font-weight: 700;
    padding: 0.35rem 0.85rem;
    box-shadow: 0 4px 12px rgba(63, 182, 139, 0.35);
}
body.spec-oc-sidebar-premium .sidebar-left-info .sidebar-widget .p-m {
    margin-top: 0.75rem;
    padding: 12px 10px !important;
    border-radius: 12px;
    background: rgba(241, 245, 249, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.12);
}
body.spec-oc-sidebar-premium .sidebar-left-info .sidebar-widget .p-m .font-bold {
    color: #334155;
    font-size: 12px;
    letter-spacing: 0.02em;
}

/* Collapsed: keep icons readable */
body.spec-oc-sidebar-premium.sidebar-collapsed .sidebar-left .side-navigation > li > a {
    margin: 2px 6px;
    border-radius: 8px;
}

/*
 * Collapsed dark rail: default-theme-light.css paints #fff on .active > a / .nav-hover > a / li a span.
 * Keep the icon column on the slate gradient; use a teal tint for active / hover instead of a white tile.
 */
body.spec-oc-sidebar-premium.spec-oc-theme-dark.sidebar-collapsed .sidebar-left.color-dark-sidebar .side-navigation.spec-oc-side-nav > li > a {
    background-color: transparent !important;
    background-image: none !important;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark.sidebar-collapsed .sidebar-left.color-dark-sidebar .side-navigation.spec-oc-side-nav > li.active > a,
body.spec-oc-sidebar-premium.spec-oc-theme-dark.sidebar-collapsed .sidebar-left.color-dark-sidebar .side-navigation.spec-oc-side-nav > li.nav-active > a {
    background-color: rgba(45, 212, 191, 0.14) !important;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark.sidebar-collapsed .sidebar-left.color-dark-sidebar .side-navigation.spec-oc-side-nav > li.nav-hover > a {
    background-color: rgba(51, 65, 85, 0.55) !important;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark.sidebar-collapsed .sidebar-left.color-dark-sidebar .side-navigation.spec-oc-side-nav > li.menu-list.nav-hover.active > a,
body.spec-oc-sidebar-premium.spec-oc-theme-dark.sidebar-collapsed .sidebar-left.color-dark-sidebar .side-navigation.spec-oc-side-nav > li.active.menu-list.nav-hover > a {
    background-color: rgba(45, 212, 191, 0.2) !important;
}

/* Collapsed rail: style-light uses color:#fff for nav-hover (dark sidebar) — restore contrast on light */
body.spec-oc-sidebar-premium.sidebar-collapsed .sidebar-left.color-light-sidebar .side-navigation.spec-oc-side-nav > li.nav-hover > a,
body.spec-oc-sidebar-premium.sidebar-collapsed .sidebar-left.color-light-sidebar .side-navigation.spec-oc-side-nav > li.nav-hover.active > a,
body.spec-oc-sidebar-premium.spec-oc-theme-dark.sidebar-collapsed .sidebar-left.color-dark-sidebar .side-navigation.spec-oc-side-nav > li.nav-hover > a,
body.spec-oc-sidebar-premium.spec-oc-theme-dark.sidebar-collapsed .sidebar-left.color-dark-sidebar .side-navigation.spec-oc-side-nav > li.nav-hover.active > a {
    color: var(--spec-oc-sn-link-hover);
}

/* Collapsed: single-link rows — pill tooltip (unchanged pattern) */
body.spec-oc-sidebar-premium.sidebar-collapsed .sidebar-left.color-light-sidebar .side-navigation.spec-oc-side-nav > li:not(.menu-list).nav-hover > a > span,
body.spec-oc-sidebar-premium.sidebar-collapsed .sidebar-left.color-light-sidebar .side-navigation.spec-oc-side-nav > li:not(.menu-list).nav-hover.active > a > span,
body.spec-oc-sidebar-premium.spec-oc-theme-dark.sidebar-collapsed .sidebar-left.color-dark-sidebar .side-navigation.spec-oc-side-nav > li:not(.menu-list).nav-hover > a > span,
body.spec-oc-sidebar-premium.spec-oc-theme-dark.sidebar-collapsed .sidebar-left.color-dark-sidebar .side-navigation.spec-oc-side-nav > li:not(.menu-list).nav-hover.active > a > span {
    color: var(--spec-oc-sn-flyout-text);
    background-color: var(--spec-oc-sn-flyout-bg);
    border: 1px solid var(--spec-oc-sn-flyout-border);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
}

/*
 * Collapsed menu-list: theme anchors the title <span> to <a> and the submenu ul to a different box,
 * so the label sits on top of the links. Anchor both to the <li>: heading row at top, list below.
 */
body.spec-oc-sidebar-premium.sidebar-collapsed .sidebar-left .side-navigation.spec-oc-side-nav > li.menu-list.nav-hover {
    position: relative;
}
body.spec-oc-sidebar-premium.sidebar-collapsed .sidebar-left .side-navigation.spec-oc-side-nav > li.menu-list.nav-hover > a {
    position: static;
}
body.spec-oc-sidebar-premium.sidebar-collapsed .sidebar-left .side-navigation.spec-oc-side-nav > li.menu-list.nav-hover > a > span {
    position: absolute;
    left: 52px;
    top: 0;
    width: var(--spec-oc-sn-flyout-w);
    min-width: 200px;
    height: var(--spec-oc-sn-flyout-head-h);
    min-height: var(--spec-oc-sn-flyout-head-h);
    display: flex;
    align-items: center;
    padding: 0 14px;
    box-sizing: border-box;
    margin: 0;
    text-align: left;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--spec-oc-sn-flyout-text);
    background: linear-gradient(180deg, var(--spec-oc-sn-flyout-head-bg1) 0%, var(--spec-oc-sn-flyout-head-bg2) 100%);
    border: 1px solid var(--spec-oc-sn-flyout-border);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    box-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 164;
}
body.spec-oc-sidebar-premium.sidebar-collapsed .sidebar-left .side-navigation.spec-oc-side-nav > li.menu-list.nav-hover > ul.child-list {
    position: absolute !important;
    top: var(--spec-oc-sn-flyout-head-h) !important;
    left: 52px !important;
    width: var(--spec-oc-sn-flyout-w) !important;
    min-width: 220px !important;
    max-width: min(280px, calc(100vw - 72px)) !important;
    margin: 0 !important;
    padding: 6px 0 8px !important;
    background: var(--spec-oc-sn-flyout-bg) !important;
    border: 1px solid var(--spec-oc-sn-flyout-border) !important;
    border-top: 1px solid rgba(148, 163, 184, 0.2) !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12) !important;
    z-index: 400 !important;
    box-sizing: border-box !important;
    max-height: min(70vh, 560px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark.sidebar-collapsed .sidebar-left.color-dark-sidebar .side-navigation.spec-oc-side-nav > li.menu-list.nav-hover > ul.child-list {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}
body.spec-oc-sidebar-premium.spec-oc-theme-dark.sidebar-collapsed .sidebar-left.color-dark-sidebar .side-navigation.spec-oc-side-nav ul.child-list a:hover,
body.spec-oc-sidebar-premium.spec-oc-theme-dark.sidebar-collapsed .sidebar-left.color-dark-sidebar .side-navigation.spec-oc-side-nav ul.child-list a:focus {
    background-color: rgba(51, 65, 85, 0.75) !important;
}

body.spec-oc-sidebar-premium.sidebar-collapsed .sidebar-left.color-light-sidebar .side-navigation.spec-oc-side-nav > li.nav-hover > a .fa,
body.spec-oc-sidebar-premium.spec-oc-theme-dark.sidebar-collapsed .sidebar-left.color-dark-sidebar .side-navigation.spec-oc-side-nav > li.nav-hover > a .fa {
    color: var(--spec-oc-sn-icon-hover);
}

/* Collapsed rail: hovered / flyout row above siblings (theme z-index:100 on ul can tie with sticky chrome) */
body.spec-oc-sidebar-premium.sidebar-collapsed .sidebar-left .side-navigation.spec-oc-side-nav > li.menu-list.nav-hover,
body.spec-oc-sidebar-premium.sidebar-collapsed .sidebar-left .side-navigation.spec-oc-side-nav > li.menu-list.nav-active {
    z-index: 160;
}

/* Collapsed rail: premium 300px width was overriding theme 52px — restore icon-only sidebar.
   Lift above .body-content so flyout panels receive pointer events (sibling paints on top by default). */
body.spec-oc-sidebar-premium.sidebar-collapsed .sidebar-left.color-light-sidebar,
body.spec-oc-sidebar-premium.spec-oc-theme-dark.sidebar-collapsed .sidebar-left.color-dark-sidebar {
    width: 52px !important;
    /*
     * Above .body-content (sibling paints later and would otherwise cover the flyout panel).
     * Below .header-section.spec-oc-premium-header (1040) so the top bar stays on top.
     */
    z-index: 1025 !important;
    /*
     * Flyout submenus use position:absolute; left:52px — they extend past the rail.
     * If the rail clips overflow (e.g. sticky-sidebar overflow-y:auto), only a ~1px
     * sliver shows and long labels like "Dashboard Layout 1" stack one character wide.
     */
    overflow-x: visible !important;
    overflow-y: visible !important;
}
body.spec-oc-sidebar-premium.sidebar-collapsed .body-content {
    margin-left: 52px !important;
    position: relative;
    z-index: 0;
}
body.spec-oc-sidebar-premium.sidebar-collapsed.sticky-header .header-section {
    left: 52px !important;
}
body.spec-oc-sidebar-premium.sidebar-collapsed.sticky-header .right-notification {
    margin-right: 52px !important;
}

/* ========== index-4 — premium header toolbar (spec-oc-premium-header) ========== */
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: 0.35rem 0.65rem;
    padding-right: 0.65rem;
    padding-left: 0.5rem;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 60px;
    align-items: center;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05);
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Below BS5 modal (1055); above sidebar flyout (260) */
    z-index: 1040;
    isolation: auto;
    overflow: visible !important;
}

/* Fixed brand rail: match sidebar width; never overlap the toolbar (theme .logo can stay 300px when collapsed if utilities fight .sidebar-collapsed) */
body.spec-oc-sidebar-premium.sticky-header .header-section.spec-oc-premium-header .logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: var(--spec-oc-sidebar-w) !important;
    height: 60px;
    line-height: normal;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 1.15rem;
    padding-right: 0.75rem;
    box-sizing: border-box;
    z-index: 1035;
}
body.spec-oc-sidebar-premium.sticky-header .header-section.spec-oc-premium-header .logo a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    min-height: 60px;
    height: 100%;
    line-height: 1.2;
    float: none;
    box-sizing: border-box;
}
body.spec-oc-sidebar-premium.sticky-header .header-section.spec-oc-premium-header .logo a .brand-name {
    float: none !important;
    margin: 0;
    padding: 0;
    line-height: 1.25;
    display: inline-block;
    vertical-align: middle;
}
body.spec-oc-sidebar-premium.sidebar-collapsed.sticky-header .header-section.spec-oc-premium-header .logo {
    display: none !important;
}
/* SA mark: collapsed rail only — d-md-block would otherwise show both logos */
body.spec-oc-sidebar-premium.sticky-header:not(.sidebar-collapsed) .header-section.spec-oc-premium-header .icon-logo {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
body.spec-oc-sidebar-premium.sticky-header .header-section.spec-oc-premium-header .icon-logo {
    align-items: center;
    justify-content: center;
    width: 52px !important;
    height: 60px;
    line-height: normal;
    padding: 0;
    box-sizing: border-box;
    z-index: 1035;
}
body.spec-oc-sidebar-premium.sidebar-collapsed.sticky-header .header-section.spec-oc-premium-header .icon-logo {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    margin: 0;
    text-align: center;
    border-right: 1px solid rgba(148, 163, 184, 0.28);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    background: linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
}
body.spec-oc-sidebar-premium.sidebar-collapsed.sticky-header .header-section.spec-oc-premium-header .icon-logo a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
}

/* YAMM sets .dropdown { position: static } — breaks BS5 Popper / static menus (panel jumps to viewport top). */
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu.yamm .navbar-nav > li.dropdown {
    position: relative !important;
    z-index: 1;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu.yamm .navbar-nav > li.dropdown.show {
    z-index: 1085;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    order: 2;
}
/* Theme locks nav to 60px tall — breaks vertical center with pill toggles */
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .navbar-nav {
    height: auto !important;
    min-height: 0;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.2rem;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .navbar-nav > li.dropdown {
    flex: 0 0 auto;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .navbar-nav > li > a.dropdown-toggle {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Right cluster: pin to end of header bar (flex) */
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .notification-wrap {
    order: 3;
    margin-left: auto !important;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    width: auto;
    max-width: none;
}

body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification {
    float: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    display: flex !important;
    align-items: center;
    height: 60px;
}

body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .navbar-right {
    float: none !important;
    display: flex !important;
    align-items: center;
    margin: 0;
}

body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .nav.navbar-nav {
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    width: auto;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .navbar-nav,
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .nav.navbar-nav {
    gap: 0.2rem;
    isolation: auto;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .navbar-nav > li,
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .nav.navbar-nav > li {
    position: relative;
    z-index: 1;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .navbar-nav > li.dropdown.show,
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .nav.navbar-nav > li.dropdown.show {
    z-index: 1090;
}
/* Anchor notification / inbox menus to their icons (BS5 + static display) */
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    margin-top: 0.35rem !important;
    transform: none !important;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .dropdown-menu.dropdown-menu-end {
    left: auto !important;
    right: 0 !important;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .navbar-nav > li > a,
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .navbar-nav > li > .dropdown-toggle {
    min-width: 42px;
    min-height: 42px;
    justify-content: center;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .spec-oc-premium-brand-text {
    font-weight: 800;
    letter-spacing: 0.04em;
    font-size: 13px;
    color: #334155 !important;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .spec-oc-premium-icon-mark {
    display: inline-block;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #0f766e;
    line-height: 1;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .toggle-btn.spec-oc-premium-toggle {
    order: 1;
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 4px 0 2px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.12s ease;
    color: #475569;
    flex-shrink: 0;
    align-self: center;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .toggle-btn.spec-oc-premium-toggle:hover {
    border-color: rgba(20, 184, 166, 0.45);
    color: #0f766e;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .toggle-btn.spec-oc-premium-toggle:active {
    transform: scale(0.97);
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .navbar-nav > li > a.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem !important;
    margin: 0 0.15rem;
    border-radius: 999px;
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #475569 !important;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .navbar-nav > li > a.dropdown-toggle b {
    font-family: "FontAwesome" !important;
    font-weight: normal;
    font-style: normal;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .navbar-nav > li > a.dropdown-toggle .spec-oc-premium-dd-chevron {
    font-size: 11px;
    opacity: 0.65;
    margin-left: 2px;
    transition: transform 0.2s ease;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .navbar-nav > li.dropdown.show > a.dropdown-toggle .spec-oc-premium-dd-chevron {
    transform: rotate(180deg);
    opacity: 1;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .navbar-nav > li > a.dropdown-toggle:hover,
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .navbar-nav > li.dropdown.show > a.dropdown-toggle {
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.65) 0%, rgba(255, 255, 255, 0.95) 100%) !important;
    border-color: rgba(148, 163, 184, 0.25);
    color: #0f172a !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .dropdown-menu.wide-full {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    width: min(920px, calc(100vw - 1.5rem));
    max-width: calc(100vw - 1.5rem);
    margin-top: -4px !important;
    padding: 10px 0 0 !important;
    border: none !important;
    border-radius: 16px !important;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: min(75vh, 640px);
    transform: none !important;
    box-shadow:
        0 4px 6px -1px rgba(15, 23, 42, 0.06),
        0 24px 48px -12px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(148, 163, 184, 0.12);
}

/* Desktop / tablet with fixed rail: keep mega panel inside viewport (header is offset by sidebar width) */
@media (min-width: 1025px) {
    body.spec-oc-sidebar-premium:not(.sidebar-collapsed) .header-section.spec-oc-premium-header .mega-menu .dropdown-menu.wide-full {
        width: min(920px, calc(100vw - var(--spec-oc-sidebar-w) - 1.5rem));
        max-width: calc(100vw - var(--spec-oc-sidebar-w) - 1.5rem);
    }
    body.spec-oc-sidebar-premium.sidebar-collapsed .header-section.spec-oc-premium-header .mega-menu .dropdown-menu.wide-full {
        width: min(920px, calc(100vw - 52px - 1.5rem));
        max-width: calc(100vw - 52px - 1.5rem);
    }
}

/* Mobile / narrow: sidebar overlay — full header width for dropdown bounds */
@media (max-width: 1024px) {
    body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .dropdown-menu.wide-full {
        width: min(920px, calc(100vw - 1rem)) !important;
        max-width: calc(100vw - 1rem) !important;
    }
    /* Drawer overlays content — mega panel uses full viewport width (no sidebar gutter) */
    body.spec-oc-sidebar-premium.sidebar-open .header-section.spec-oc-premium-header .mega-menu .dropdown-menu.wide-full {
        width: min(920px, calc(100vw - 1rem)) !important;
        max-width: calc(100vw - 1rem) !important;
    }
    /* If rail is still icon-only while this breakpoint applies (resize), avoid clipping past the notch */
    body.spec-oc-sidebar-premium.sidebar-collapsed:not(.sidebar-open) .header-section.spec-oc-premium-header .mega-menu .dropdown-menu.wide-full {
        width: min(920px, calc(100vw - 52px - 1rem)) !important;
        max-width: calc(100vw - 52px - 1rem) !important;
    }
}

/* Narrow header: row 1 = toggle + notification tray (end); row 2 = Large menu + English */
@media (max-width: 991.98px) {
    body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .toggle-btn.spec-oc-premium-toggle {
        order: 1;
    }
    body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .notification-wrap {
        order: 1;
        margin-left: auto !important;
    }
    body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu {
        flex: 1 1 100%;
        order: 2;
        min-width: 0;
    }
    body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.25rem;
    }
    body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .navbar-nav > li.dropdown {
        width: 100%;
    }
    body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .navbar-nav > li > a.dropdown-toggle {
        width: 100%;
        justify-content: space-between;
        margin: 0 !important;
    }
    body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .dropdown-menu.wide-full,
    body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .language-switch.spec-oc-premium-lang-menu {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content .row {
        margin-left: 0;
        margin-right: 0;
    }
    body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
}

/* Phones: hide bulky mega / language row — full nav lives in the drawer */
@media (max-width: 767.98px) {
    body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu {
        display: none !important;
    }
}

body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .dropdown-menu.wide-full > li {
    list-style: none;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content {
    padding: 1.25rem 1.35rem 1.5rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content .title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    padding-bottom: 0.65rem;
    margin-bottom: 0.5rem;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content ul.list-unstyled > li > a {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.45rem 0.35rem !important;
    margin-bottom: 0 !important;
    border-radius: 8px;
    color: #334155 !important;
    font-size: 13px;
    transition: background 0.12s ease, color 0.12s ease;
}
/* Description column: title + subtitle stacked */
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content .row > ul:nth-child(2) > li > a {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content .row > ul:nth-child(2) .d-title {
    font-weight: 700;
    color: #1e293b !important;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content .row > ul:nth-child(2) .d-desk {
    display: block;
    width: 100%;
    font-size: 12px;
    line-height: 1.4;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content ul.list-unstyled > li > a:hover,
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content ul.list-unstyled > li > a:focus {
    background: linear-gradient(90deg, rgba(236, 253, 245, 0.55) 0%, transparent 100%) !important;
    color: #0f766e !important;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .d-desk {
    color: #94a3b8 !important;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .custom-nav-img .desk {
    line-height: 1.55;
    color: #64748b !important;
}

/* index-4 header mega — Image & About columns (style-light loads .mega-bg absolute to .yamm-content) */
body.spec-dashboard-home.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content .row {
    align-items: flex-start;
}
body.spec-dashboard-home.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content .row > ul[class*="col-"] {
    min-width: 0;
}
body.spec-dashboard-home.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content .row > ul.col-sm-3.list-unstyled:not(.custom-nav-img) > li > a {
    display: flex !important;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
body.spec-dashboard-home.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content .row > ul.col-sm-3.list-unstyled:not(.custom-nav-img) .icon-img {
    float: none !important;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    max-width: 44px;
    object-fit: cover;
    border-radius: 12px;
    margin: 0 !important;
    vertical-align: middle;
}
body.spec-dashboard-home.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content .row > ul.col-sm-3.list-unstyled:not(.custom-nav-img) .icon-desk {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.2rem;
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}
body.spec-dashboard-home.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content .row > ul.col-sm-3.list-unstyled:not(.custom-nav-img) .icon-desk .d-title {
    display: block;
    width: 100%;
    font-weight: 700;
    line-height: 1.25;
}
body.spec-dashboard-home.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content .row > ul.col-sm-3.list-unstyled:not(.custom-nav-img) .icon-desk .d-desk {
    display: block;
    width: 100%;
    font-size: 12px;
    line-height: 1.35;
}
body.spec-dashboard-home.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content ul.custom-nav-img {
    position: relative;
    align-self: flex-start;
    padding-bottom: 7rem;
}
body.spec-dashboard-home.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content ul.custom-nav-img > li:last-child {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 130px;
    margin: 0;
    padding: 0;
    pointer-events: none;
    z-index: 0;
    list-style: none;
}
body.spec-dashboard-home.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content ul.custom-nav-img > li > p.desk {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    max-width: 100%;
}
body.spec-dashboard-home.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content ul.custom-nav-img .mega-bg {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    top: auto !important;
    width: min(100%, 260px) !important;
    height: 120px !important;
    background-size: contain;
    background-position: bottom right;
    opacity: 0.42;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content ul.custom-nav-img .mega-bg {
    opacity: 0.26;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content ul.custom-nav-img > li > p.desk {
    color: #cbd5e1 !important;
}

body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .language-switch.spec-oc-premium-lang-menu {
    position: absolute !important;
    top: 100% !important;
    left: auto !important;
    right: 0 !important;
    min-width: 220px;
    padding: 0.5rem !important;
    margin-top: -4px !important;
    padding-top: 0.65rem !important;
    border: none !important;
    border-radius: 14px !important;
    transform: none !important;
    box-shadow:
        0 4px 6px -1px rgba(15, 23, 42, 0.06),
        0 18px 40px -12px rgba(15, 23, 42, 0.16),
        0 0 0 1px rgba(148, 163, 184, 0.12);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .language-switch.spec-oc-premium-lang-menu > li {
    list-style: none;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .language-switch.spec-oc-premium-lang-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem !important;
    margin: 0.15rem 0;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #334155 !important;
    border: 1px solid transparent;
    transition: background 0.12s ease, border-color 0.12s ease;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .language-switch.spec-oc-premium-lang-menu > li > a:hover,
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .language-switch.spec-oc-premium-lang-menu > li > a:focus {
    background: rgba(236, 253, 245, 0.55) !important;
    border-color: rgba(20, 184, 166, 0.2);
    color: #0f766e !important;
}
body.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .language-switch.spec-oc-premium-lang-menu > li > a img {
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

@media screen and (max-width: 1024px) {
    body.spec-oc-sidebar-premium.sidebar-collapsed .header-section.spec-oc-premium-header {
        overflow-x: visible !important;
    }
}

/* ========== spec-dashboard-dark — EOF overrides (beat later premium + panel rules) ========== */
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .dropdown-menu,
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .dropdown-menu.dropdown-menu-end {
    background: #1e293b !important;
    border: 1px solid rgba(148, 163, 184, 0.1) !important;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.35),
        0 20px 50px -12px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(148, 163, 184, 0.07) !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .dropdown-menu .title {
    color: #cbd5e1 !important;
    background: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important;
    border-bottom-color: rgba(148, 163, 184, 0.15) !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .dropdown-menu.hdropdown li {
    background: #1e293b !important;
    border-bottom-color: rgba(51, 65, 85, 0.85) !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .dropdown-menu.hdropdown li > a {
    color: #e2e8f0 !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .dropdown-menu.hdropdown li > a:hover,
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .dropdown-menu.hdropdown li > a:focus {
    background: linear-gradient(90deg, rgba(167, 139, 250, 0.18) 0%, transparent 100%) !important;
    color: #f5f3ff !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .dropdown-menu.hdropdown li.summary > a {
    background: #0f172a !important;
    color: #c4b5fd !important;
    border-top-color: rgba(148, 163, 184, 0.12) !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .dropdown-menu.hdropdown li.summary > a:hover {
    background: rgba(51, 65, 85, 0.9) !important;
    color: #ddd6fe !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .dropdown-menu.wide-full {
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.35),
        0 24px 48px -12px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(148, 163, 184, 0.06) !important;
    border: 1px solid rgba(148, 163, 184, 0.1) !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .mega-bg {
    opacity: 0.22;
    filter: saturate(0.85);
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content .text-muted {
    color: #94a3b8 !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content .title {
    color: #94a3b8 !important;
    border-bottom-color: rgba(148, 163, 184, 0.15) !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content ul.list-unstyled > li > a {
    color: #e2e8f0 !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content .row > ul:nth-child(2) .d-title {
    color: #f1f5f9 !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content ul.list-unstyled > li > a:hover,
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content ul.list-unstyled > li > a:focus {
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.12) 0%, transparent 100%) !important;
    color: #5eead4 !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .d-desk,
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .custom-nav-img .desk {
    color: #94a3b8 !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .language-switch.spec-oc-premium-lang-menu {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.35),
        0 18px 40px -12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(148, 163, 184, 0.08) !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .language-switch.spec-oc-premium-lang-menu > li > a {
    color: #e2e8f0 !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .language-switch.spec-oc-premium-lang-menu > li > a:hover,
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .language-switch.spec-oc-premium-lang-menu > li > a:focus {
    background: rgba(51, 65, 85, 0.85) !important;
    color: #5eead4 !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .spec-oc-premium-brand-text {
    color: #e2e8f0 !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .spec-oc-premium-icon-mark {
    color: #5eead4 !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .toggle-btn.spec-oc-premium-toggle {
    border-color: rgba(148, 163, 184, 0.22) !important;
    background: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important;
    color: #cbd5e1 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .toggle-btn.spec-oc-premium-toggle:hover {
    border-color: rgba(45, 212, 191, 0.45) !important;
    color: #5eead4 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .navbar-nav > li > a.dropdown-toggle {
    color: #cbd5e1 !important;
    max-height: 34px !important;
    padding: 0.35rem 0.7rem !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    border-radius: 8px !important;
    border-color: rgba(148, 163, 184, 0.11) !important;
    box-shadow: none !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .navbar-nav > li > a,
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification .navbar-nav > li > .dropdown-toggle {
    min-height: 52px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    border-radius: 10px !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .right-notification a.right-sidebar-toggle {
    border-color: rgba(148, 163, 184, 0.1) !important;
    box-shadow: none !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .label-menu-corner .badge {
    border: 1px solid rgba(15, 23, 42, 0.9) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mobile-account-menu {
    background: #1e293b !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mobile-account-menu .dropdown-item {
    color: #e2e8f0 !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mobile-account-menu .dropdown-item:hover {
    background: rgba(51, 65, 85, 0.85) !important;
}

/* Dashboard chart panels — inner chrome */
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-row .spec-dash-chart-panel > .card-body {
    background: linear-gradient(180deg, rgba(19, 31, 48, 0.95) 0%, rgba(20, 31, 50, 1) 28%) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel--sales > .card-body .text-center.small {
    color: #6ee7b7 !important;
    background: linear-gradient(180deg, rgba(6, 78, 59, 0.45) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
    border-color: rgba(52, 211, 153, 0.28) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel--sales > .card-body > .row > .col-md-12 > .spec-dash-chart-canvas-host,
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel--sales > .card-body > .row > .col-md-12 > div:has(canvas) {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
    border-color: rgba(148, 163, 184, 0.14) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 24px rgba(0, 0, 0, 0.35) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel--sales > .card-body .graph2under,
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel--sales > .card-body .graph1under {
    background: linear-gradient(165deg, rgba(26, 39, 56, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    border-color: rgba(148, 163, 184, 0.14) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-row .graph2under strong,
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-row .graph1under strong {
    color: #f1f5f9 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel--monitor > .card-body .text-center.small {
    color: #a5b4fc !important;
    background: linear-gradient(180deg, rgba(49, 46, 129, 0.45) 0%, rgba(15, 23, 42, 0.92) 100%) !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel--monitor > .card-body .text-center.small .fa {
    color: #818cf8 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel--sales > .card-body .text-center.small .fa {
    color: #34d399 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel--monitor > .card-body > .row > .col-md-12 > .spec-dash-chart-canvas-host,
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel--monitor > .card-body > .row > .col-md-12 > div:has(canvas) {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
    border-color: rgba(148, 163, 184, 0.14) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 24px rgba(0, 0, 0, 0.35) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel--monitor .project-list {
    background: linear-gradient(180deg, rgba(26, 39, 56, 0.98) 0%, rgba(15, 23, 42, 0.94) 100%) !important;
    border-color: rgba(148, 163, 184, 0.14) !important;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel--monitor .project-list .table thead th {
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.9) 0%, rgba(30, 41, 59, 0.95) 100%) !important;
    color: #cbd5e1 !important;
    border-color: rgba(148, 163, 184, 0.12) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel--monitor .project-list .table tbody td {
    background-color: transparent !important;
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, 0.1) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel--monitor .project-list .table.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(30, 41, 59, 0.65) !important;
    background-color: rgba(30, 41, 59, 0.55) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel--monitor .project-list .table.table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: rgba(15, 23, 42, 0.4) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-chart-panel--monitor .project-list .table a {
    color: #5eead4 !important;
}

/* Activity / Last active */
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-panel > .card-header {
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.12) 0%, rgba(109, 40, 217, 0.1) 45%, rgba(26, 39, 56, 0.98) 100%) !important;
    border-bottom-color: rgba(148, 163, 184, 0.14) !important;
    color: #f1f5f9 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-intro {
    background: linear-gradient(125deg, rgba(15, 118, 110, 0.2) 0%, rgba(30, 41, 59, 0.95) 50%, rgba(15, 23, 42, 0.98) 100%) !important;
    border-bottom-color: rgba(148, 163, 184, 0.14) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-kicker {
    color: #5eead4 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-heading {
    color: #f8fafc !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-sub {
    color: #94a3b8 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-feed {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.65) 0%, rgba(19, 31, 48, 0.88) 100%) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-panel .feed-element {
    background: rgba(26, 39, 56, 0.95) !important;
    border-color: rgba(148, 163, 184, 0.14) !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-panel .feed-element:hover {
    border-color: rgba(45, 212, 191, 0.45) !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-panel .feed-element .media-body {
    color: #e2e8f0 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-panel .feed-element .media-body strong {
    color: #f8fafc !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-panel .feed-element .media-body > small.float-end {
    color: #94a3b8 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-panel .feed-element .media-body .text-muted {
    color: #94a3b8 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-panel .feed-element .rounded-circle {
    border-color: rgba(30, 41, 59, 0.95) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-metrics {
    background: rgba(19, 31, 48, 0.92) !important;
    border-top-color: rgba(148, 163, 184, 0.14) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-metrics .marginactivysec,
body.spec-dashboard-home.spec-dashboard-dark .marginactivysec {
    background: linear-gradient(180deg, rgba(26, 39, 56, 0.95) 0%, rgba(15, 23, 42, 0.88) 100%) !important;
    border-color: rgba(148, 163, 184, 0.14) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-metrics .font-bold,
body.spec-dashboard-home.spec-dashboard-dark .marginactivysec .font-bold {
    color: #cbd5e1 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-metrics h3,
body.spec-dashboard-home.spec-dashboard-dark .marginactivysec h3 {
    color: #f1f5f9 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-panel .well {
    background: rgba(15, 23, 42, 0.92) !important;
    border-color: rgba(148, 163, 184, 0.14) !important;
    color: #cbd5e1 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-activity-panel .btn.btn-xs.btn-white {
    background: rgba(51, 65, 85, 0.9) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    color: #e2e8f0 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content .text-navy {
    color: #93c5fd !important;
}

/* Process table (spec-dash-monitor-process-table) — force row paints */
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-monitor-process-table tbody tr > * {
    color: #e2e8f0 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-monitor-process-table.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(30, 41, 59, 0.55) !important;
    background-color: rgba(30, 41, 59, 0.5) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-dash-monitor-process-table.table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: rgba(15, 23, 42, 0.35) !important;
}

/* —— Dark: mega pills hover / open (compact sizing above) —— */
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .navbar-nav > li > a.dropdown-toggle:hover,
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .navbar-nav > li.dropdown.show > a.dropdown-toggle {
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.92) 0%, rgba(30, 41, 59, 0.98) 100%) !important;
    border-color: rgba(45, 212, 191, 0.3) !important;
    color: #f8fafc !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .navbar-nav > li > a.dropdown-toggle .spec-oc-premium-dd-chevron {
    color: #94a3b8 !important;
    opacity: 1 !important;
}
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .navbar-nav > li.dropdown.show > a.dropdown-toggle .spec-oc-premium-dd-chevron {
    color: #5eead4 !important;
}

/* Mega column headers — compact chips on dark yamm */
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content p.title,
body.spec-dashboard-home.spec-dashboard-dark.spec-oc-sidebar-premium .header-section.spec-oc-premium-header .mega-menu .yamm-content .title {
    color: #cbd5e1 !important;
    background: rgba(15, 23, 42, 0.72) !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    border-radius: 8px !important;
    padding: 0.4rem 0.55rem !important;
    margin-bottom: 0.5rem !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    font-size: 10px !important;
}

/* Right sidebar — tab strip + active tab + list rows */
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar .spec-right-sidebar-tabs {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(19, 31, 48, 0.95) 100%) !important;
    box-shadow: 0 1px 0 rgba(148, 163, 184, 0.12) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar .spec-right-sidebar-tabs .nav-link {
    color: #94a3b8 !important;
}
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar .spec-right-sidebar-tabs .nav-link:hover {
    color: #c4b5fd !important;
    background: rgba(51, 65, 85, 0.65) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar .spec-right-sidebar-tabs .nav-link.active {
    color: #f8fafc !important;
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.95) 0%, rgba(30, 41, 59, 0.98) 100%) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    border-bottom-color: rgba(15, 23, 42, 0.95) !important;
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.35) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar .list-group.bg-trans .list-group-item {
    background: rgba(26, 39, 56, 0.88) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(148, 163, 184, 0.1) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar .list-group.bg-trans .list-group-item:hover {
    background: rgba(51, 65, 85, 0.92) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar .list-group.bg-trans .list-group-item .media-body p.mar-no {
    color: #f1f5f9 !important;
}
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar .list-group.bg-trans .list-group-item .text-muted {
    color: #94a3b8 !important;
}

/* Family block — replace light pink gradient */
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar .rs-section-family {
    background: linear-gradient(155deg, rgba(88, 28, 135, 0.35) 0%, rgba(30, 41, 59, 0.92) 45%, rgba(15, 23, 42, 0.95) 100%) !important;
    border-color: rgba(167, 139, 250, 0.25) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar .rs-section-family-header {
    border-bottom-color: rgba(148, 163, 184, 0.14) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar .rs-section-family-label {
    color: #e9d5ff !important;
}
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar .rs-section-family-tagline {
    color: #c4b5fd !important;
    opacity: 0.95 !important;
}
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar .rs-section-family-list .list-group-item {
    background: rgba(15, 23, 42, 0.65) !important;
    border-color: rgba(167, 139, 250, 0.2) !important;
    border-left-color: rgba(167, 139, 250, 0.45) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar .rs-section-family-list .list-group-item:hover {
    background: rgba(51, 65, 85, 0.9) !important;
    border-color: rgba(244, 114, 182, 0.3) !important;
    border-left-color: rgba(244, 114, 182, 0.55) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar .rs-section-family-list .media-body p.mar-no {
    color: #f1f5f9 !important;
}
body.spec-dashboard-home.spec-dashboard-dark #right-sidebar .rs-section-family-list .media-body small.text-muted {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

/* Layouts 1–3 — compact mega pills + column titles (#header.spec-dash-toolbar-premium) */
body.spec-dashboard-home.spec-dashboard-dark #header.spec-dash-toolbar-premium .spec-dash-mega-menu .navbar-nav > li > a.dropdown-toggle {
    color: #e2e8f0 !important;
    background: rgba(51, 65, 85, 0.45) !important;
    border-color: rgba(148, 163, 184, 0.11) !important;
    min-height: 36px !important;
    height: auto !important;
    padding: 0.3rem 0.65rem !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    border-radius: 8px !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    margin-top: 8px;
}
body.spec-dashboard-home.spec-dashboard-dark #header.spec-dash-toolbar-premium .spec-dash-mega-menu .navbar-nav > li > a.dropdown-toggle:hover,
body.spec-dashboard-home.spec-dashboard-dark #header.spec-dash-toolbar-premium .spec-dash-mega-menu .navbar-nav > li.dropdown.show > a.dropdown-toggle {
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.88) 0%, rgba(30, 41, 59, 0.95) 100%) !important;
    border-color: rgba(167, 139, 250, 0.28) !important;
    color: #f8fafc !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header.spec-dash-toolbar-premium .spec-dash-notification-wrap .navbar-right .navbar-nav > li > a,
body.spec-dashboard-home.spec-dashboard-dark #header.spec-dash-toolbar-premium .spec-dash-notification-wrap .navbar-right .navbar-nav > li > .dropdown-toggle {
    min-height: 40px !important;
    height: 40px;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    box-sizing: border-box;
}
body.spec-dashboard-home.spec-dashboard-dark #header.spec-dash-toolbar-premium .spec-dash-notification-wrap .navbar-right .navbar-nav > li > a:hover,
body.spec-dashboard-home.spec-dashboard-dark #header.spec-dash-toolbar-premium .spec-dash-notification-wrap .navbar-right .navbar-nav > li.dropdown.show > a {
    background: rgba(51, 65, 85, 0.38) !important;
    border-color: rgba(148, 163, 184, 0.09) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header.spec-dash-toolbar-premium a.right-sidebar-toggle {
    border-color: rgba(148, 163, 184, 0.1) !important;
    box-shadow: none !important;
}
body.spec-dashboard-home.spec-dashboard-dark #header .label-menu-corner .badge {
    border: 1px solid rgba(15, 23, 42, 0.9) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
body.spec-dashboard-home.spec-dashboard-dark #header .spec-dash-mega-menu .yamm-content p.title,
body.spec-dashboard-home.spec-dashboard-dark #header .spec-dash-mega-menu .yamm-content .title {
    color: #cbd5e1 !important;
    background: rgba(15, 23, 42, 0.72) !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    border-radius: 8px !important;
    padding: 0.4rem 0.55rem !important;
    margin-bottom: 0.5rem !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    font-size: 10px !important;
}

/* Floating theme toggle (all dashboards) — keep header tray uncluttered */
.spec-theme-fab {
    position: fixed;
    bottom: 1.35rem;
    right: 1.35rem;
    z-index: 1110;
    width: 3rem;
    height: 3rem;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(145deg, #334155 0%, #1e293b 100%);
    color: #e2e8f0;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}
.spec-theme-fab:hover {
    border-color: rgba(167, 139, 250, 0.4);
    color: #fff;
    transform: scale(1.06);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.48);
}
.spec-theme-fab:focus-visible {
    outline: 2px solid rgba(94, 234, 212, 0.55);
    outline-offset: 2px;
}
.spec-theme-fab .spec-theme-toggle-icon {
    font-size: 1.125rem;
    line-height: 1;
    margin: 0;
    pointer-events: none;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .spec-theme-fab {
    background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
    color: #334155;
    border-color: rgba(148, 163, 184, 0.28);
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12);
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .spec-theme-fab:hover {
    border-color: rgba(99, 102, 241, 0.35);
    color: #1e293b;
}
@media (max-width: 575.98px) {
    .spec-theme-fab {
        bottom: 1rem;
        right: 1rem;
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* ========== Premium layout variants — index-4 / 5 / 6 (distinct structure + skin) ========== */

/* --- Layout 4 · “Aurora split” — violet / cyan, wide activity + narrow rail, 8+4 charts --- */
body.spec-dash-page-v4.spec-dashboard-home.spec-dashboard-dark {
    --spec-dash-v-accent: #a78bfa;
    --spec-dash-v-accent2: #22d3ee;
    --spec-dash-v-glow: rgba(167, 139, 250, 0.12);
}
body.spec-dash-page-v4.spec-dashboard-home:not(.spec-dashboard-dark) {
    --spec-dash-v-accent: #7c3aed;
    --spec-dash-v-accent2: #0891b2;
    --spec-dash-v-glow: rgba(124, 58, 237, 0.08);
}
body.spec-dash-page-v4.spec-dashboard-home.spec-dashboard-dark #wrapper {
    background: radial-gradient(1200px 500px at 12% -10%, var(--spec-dash-v-glow), transparent 55%),
        radial-gradient(900px 400px at 92% 20%, rgba(34, 211, 238, 0.08), transparent 50%),
        linear-gradient(180deg, var(--spec-dd-bg) 0%, var(--spec-dd-bg-mid) 55%, #0a1020 100%) !important;
}
body.spec-dash-page-v4.spec-dashboard-home:not(.spec-dashboard-dark) #wrapper {
    background: radial-gradient(1000px 480px at 8% 0%, var(--spec-dash-v-glow), transparent 50%),
        linear-gradient(180deg, #f5f3ff 0%, #eef2f6 45%, #e8ecf1 100%) !important;
}
.spec-dash-layout-v4 .spec-dash-hero {
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-left: 5px solid var(--spec-dash-v-accent);
    padding: 1.35rem 1.5rem;
    background: linear-gradient(105deg, rgba(167, 139, 250, 0.14) 0%, rgba(15, 23, 42, 0.35) 38%, transparent 100%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
body.spec-dash-page-v4.spec-dashboard-home:not(.spec-dashboard-dark) .spec-dash-layout-v4 .spec-dash-hero {
    background: linear-gradient(105deg, rgba(124, 58, 237, 0.1) 0%, rgba(255, 255, 255, 0.95) 45%, #fff 100%);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.1);
}
.spec-dash-layout-v4 .spec-dash-hero-kicker {
    color: var(--spec-dash-v-accent2) !important;
}
.spec-dash-layout-v4 .spec-dash-kpi-row--v4 > .col-lg-6 > .row {
    height: 100%;
}
.spec-dash-layout-v4 .spec-dash-kpi-row--v4 .specpanel {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
body.spec-dash-page-v4.spec-dashboard-home:not(.spec-dashboard-dark) .spec-dash-layout-v4 .spec-dash-kpi-row--v4 .specpanel {
    box-shadow: 0 10px 28px rgba(124, 58, 237, 0.08);
}
.spec-dash-layout-v4 .spec-dash-chart-row .col-lg-8 .spec-dash-chart-panel--sales {
    border-radius: 22px;
    box-shadow: 0 16px 48px rgba(167, 139, 250, 0.12);
}
.spec-dash-layout-v4 .spec-dash-chart-row .col-lg-4 .spec-dash-chart-panel--monitor {
    border-radius: 22px;
    min-height: 100%;
}
.spec-dash-layout-v4 .spec-dash-chart-row .col-lg-4 .spec-dash-chart-canvas-host canvas {
    max-height: 160px;
}

/* --- Layout 5 · “Horizon band” — orange / teal, charts reversed, stacked lower zone --- */
body.spec-dash-page-v5.spec-dashboard-home.spec-dashboard-dark {
    --spec-dash-v-accent: #fb923c;
    --spec-dash-v-accent2: #2dd4bf;
    --spec-dash-v-glow: rgba(251, 146, 60, 0.1);
}
body.spec-dash-page-v5.spec-dashboard-home:not(.spec-dashboard-dark) {
    --spec-dash-v-accent: #ea580c;
    --spec-dash-v-accent2: #0d9488;
    --spec-dash-v-glow: rgba(234, 88, 12, 0.07);
}
body.spec-dash-page-v5.spec-dashboard-home.spec-dashboard-dark #wrapper {
    background: linear-gradient(180deg, #0c1220 0%, var(--spec-dd-bg-mid) 28%, var(--spec-dd-bg) 100%) !important;
    border-left-color: rgba(251, 146, 60, 0.12) !important;
}
body.spec-dash-page-v5.spec-dashboard-home:not(.spec-dashboard-dark) #wrapper {
    background: linear-gradient(180deg, #fff7ed 0%, #f8fafc 35%, #f1f5f9 100%) !important;
}
.spec-dash-layout-v5 .spec-dash-hero {
    border-radius: 0;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 1.75rem 1.75rem 2rem;
    background: linear-gradient(90deg, rgba(251, 146, 60, 0.2) 0%, rgba(45, 212, 191, 0.12) 55%, transparent 100%);
    border-bottom: 3px solid var(--spec-dash-v-accent);
}
@media (min-width: 992px) {
    .spec-dash-layout-v5 .spec-dash-hero {
        margin-left: -2rem;
        margin-right: -2rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
body.spec-dash-page-v5.spec-dashboard-home:not(.spec-dashboard-dark) .spec-dash-layout-v5 .spec-dash-hero {
    background: linear-gradient(90deg, rgba(251, 146, 60, 0.18) 0%, rgba(13, 148, 136, 0.1) 50%, #fff 100%);
}
.spec-dash-layout-v5 .spec-dash-hero-kicker {
    color: var(--spec-dash-v-accent) !important;
}
.spec-dash-layout-v5 .spec-dash-chart-row {
    flex-direction: row-reverse;
}
.spec-dash-layout-v5 .spec-dash-kpi-row .specpanel {
    border-radius: 14px 14px 14px 4px;
    border-top: 3px solid var(--spec-dash-v-accent2);
}
/* Mirror lower zone: wide to-do left, activity rail right (same widths as default, reversed order) */
.spec-dash-layout-v5 .spec-dash-lower > .col-lg-4 {
    order: 2;
}
.spec-dash-layout-v5 .spec-dash-lower > .col-lg-8 {
    order: 1;
}
@media (max-width: 991.98px) {
    .spec-dash-layout-v5 .spec-dash-lower > .col-lg-4,
    .spec-dash-layout-v5 .spec-dash-lower > .col-lg-8 {
        order: 0;
    }
}

/* --- Layout 6 · “Pulse stack” — pink / fuchsia, vertical charts, dense KPI strip --- */
body.spec-dash-page-v6.spec-dashboard-home.spec-dashboard-dark {
    --spec-dash-v-accent: #f472b6;
    --spec-dash-v-accent2: #c084fc;
    --spec-dash-v-glow: rgba(244, 114, 182, 0.1);
}
body.spec-dash-page-v6.spec-dashboard-home:not(.spec-dashboard-dark) {
    --spec-dash-v-accent: #db2777;
    --spec-dash-v-accent2: #9333ea;
    --spec-dash-v-glow: rgba(219, 39, 119, 0.06);
}
body.spec-dash-page-v6.spec-dashboard-home.spec-dashboard-dark #wrapper {
    background: radial-gradient(ellipse 80% 50% at 50% -20%, var(--spec-dash-v-glow), transparent 60%),
        linear-gradient(180deg, #0a0a12 0%, var(--spec-dd-bg-mid) 40%, var(--spec-dd-bg) 100%) !important;
}
body.spec-dash-page-v6.spec-dashboard-home:not(.spec-dashboard-dark) #wrapper {
    background: linear-gradient(180deg, #fdf2f8 0%, #faf5ff 40%, #f1f5f9 100%) !important;
}
.spec-dash-layout-v6 .content {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.spec-dash-layout-v6 .spec-dash-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 999px;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(244, 114, 182, 0.35);
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.15) 0%, rgba(192, 132, 252, 0.1) 100%);
    box-shadow: 0 8px 32px rgba(244, 114, 182, 0.15);
}
.spec-dash-layout-v6 .spec-dash-hero-main {
    flex: 0 1 auto;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}
.spec-dash-layout-v6 .spec-dash-hero-lead {
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}
.spec-dash-layout-v6 .spec-dash-hero-meta {
    justify-content: center;
    width: 100%;
}
.spec-dash-layout-v6 .spec-dash-kpi-row--v6 .specpanel .card-header {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}
.spec-dash-layout-v6 .spec-dash-kpi-row--v6 .specpanel {
    border-radius: 16px;
    border: 1px solid rgba(244, 114, 182, 0.25);
}
.spec-dash-layout-v6 .spec-dash-chart-row {
    flex-direction: column;
    gap: 0 !important;
}
.spec-dash-layout-v6 .spec-dash-chart-row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}
.spec-dash-layout-v6 .spec-dash-chart-panel .spec-dash-chart-canvas-host canvas {
    max-height: 220px;
}

/* --- UI Elements (.spec-ui-page) — page strip under premium chrome --- */
.spec-dashboard-home .content.spec-ui-page {
    padding-top: 0.25rem;
}
.spec-dashboard-home .spec-ui-page-header {
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.55);
}
body.spec-dashboard-home.spec-dashboard-dark .spec-ui-page-header {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.45);
}
.spec-ui-page-kicker {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--spec-dd-muted, #64748b);
    margin-bottom: 0.35rem;
}
.spec-ui-page-title {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
}
.spec-ui-page-lead {
    margin: 0;
    font-size: 0.9rem;
    color: var(--spec-dd-muted, #64748b);
    max-width: 42rem;
}
body.spec-dashboard-home.spec-dashboard-dark .spec-ui-page-lead {
    color: rgba(226, 232, 240, 0.75);
}

/* Bootstrap modals above premium sticky header; backdrop tucks under modal */
body.spec-oc-sidebar-premium.spec-dashboard-home .modal {
    z-index: 1080;
}
body.spec-oc-sidebar-premium.spec-dashboard-home .modal-backdrop {
    z-index: 1075;
}

/* --- UI Elements demos: tables, lists, panels, code, nestable (light + dark) --- */
body.spec-dashboard-home .content.spec-ui-page {
    --spec-ui-demo-surface: rgba(248, 250, 252, 0.85);
    --spec-ui-demo-border: rgba(148, 163, 184, 0.35);
    --spec-ui-demo-code-bg: #f1f5f9;
    --spec-ui-demo-table-head: #f8fafc;
    padding-left: clamp(0.75rem, 2vw, 1.25rem);
    padding-right: clamp(0.75rem, 2vw, 1.25rem);
    box-sizing: border-box;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page {
    --spec-ui-demo-surface: var(--spec-dd-surface);
    --spec-ui-demo-border: rgba(148, 163, 184, 0.18);
    --spec-ui-demo-code-bg: var(--spec-dd-elevated);
    --spec-ui-demo-table-head: var(--spec-dd-elevated);
}

/* Main column rhythm */
body.spec-dashboard-home .content.spec-ui-page > .row {
    --bs-gutter-y: 1.25rem;
}
body.spec-dashboard-home .content.spec-ui-page .row {
    row-gap: 1.25rem;
}

/* Stacked .card / .specpanel inside grid columns (panels, buttons, typography demos) */
body.spec-dashboard-home .content.spec-ui-page [class*="col-"] > .card,
body.spec-dashboard-home .content.spec-ui-page [class*="col-"] > .specpanel,
body.spec-dashboard-home .content.spec-ui-page .eq-height > [class*="col-"] > .card {
    margin-bottom: 1.5rem !important;
}

/* Full-width cards stacked directly under .content (e.g. alerts.html) */
body.spec-dashboard-home .content.spec-ui-page > .card {
    margin-bottom: 1.5rem !important;
}

body.spec-dashboard-home .content.spec-ui-page .specpanel {
    border-radius: 12px;
    overflow: hidden;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .specpanel {
    background: var(--spec-dd-surface) !important;
    border-color: var(--spec-ui-demo-border) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .specpanel > .card-header {
    background: linear-gradient(180deg, var(--spec-dd-elevated) 0%, var(--spec-dd-surface) 100%) !important;
    border-bottom-color: var(--spec-ui-demo-border) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .specpanel > .card-footer {
    background: var(--spec-dd-elevated) !important;
    border-top-color: var(--spec-ui-demo-border) !important;
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .specpanel > .card-body {
    color: var(--spec-dd-text);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .card .card-header,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .card .card-title {
    color: var(--spec-dd-text);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .card {
    background: var(--spec-dd-surface) !important;
    border-color: var(--spec-ui-demo-border) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .card .card-header {
    background: linear-gradient(180deg, var(--spec-dd-elevated) 0%, var(--spec-dd-surface) 100%) !important;
    border-bottom-color: var(--spec-ui-demo-border) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .card .card-body {
    color: var(--spec-dd-text);
}

/* Spec Pages: boxed article width under Layout 4 chrome */
body.spec-oc-sidebar-premium .content.spec-ui-page.content-boxed {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0.35rem;
}

/* --- Contacts page: #browser-bar, #contentMap, #right (Spec Pages light + dark) --- */
body.spec-dashboard-home .content.spec-ui-page #browser {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page #browser {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page #browser-bar {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    color: #334155;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page #browser-bar h5 {
    margin: 0;
    font-weight: 600;
    color: #0f172a;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page #contentMap {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-top: none;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page #contentMap #right {
    background: #f8fafc;
    color: #334155;
    border-left: 1px solid rgba(148, 163, 184, 0.28);
}
@media (max-width: 780px) {
    body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page #contentMap #right {
        border-left: none;
        border-top: 1px solid rgba(148, 163, 184, 0.28);
    }
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page #contentMap #right h5,
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page #contentMap #right h6 {
    color: #0f172a;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page #contentMap #right p {
    color: #475569;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page #contentMap #right p.other,
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page #contentMap #right p.other a {
    color: #64748b;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page #contentMap #right form input,
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page #contentMap #right form textarea {
    background: #fff;
    color: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.45);
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page #contentMap #right a:hover {
    color: #0284c7;
}

body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page #browser-bar {
    background: linear-gradient(180deg, var(--spec-dd-elevated) 0%, var(--spec-dd-surface) 100%);
    border-bottom: 1px solid var(--spec-ui-demo-border);
    color: var(--spec-dd-text);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page #browser-bar h5 {
    margin: 0;
    font-weight: 600;
    color: var(--spec-dd-text);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page #contentMap {
    background: var(--spec-dd-surface);
    border: 1px solid var(--spec-ui-demo-border);
    border-top: none;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page #contentMap #right {
    background: var(--spec-dd-elevated);
    color: var(--spec-dd-text);
    border-left: 1px solid var(--spec-ui-demo-border);
}
@media (max-width: 780px) {
    body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page #contentMap #right {
        border-left: none;
        border-top: 1px solid var(--spec-ui-demo-border);
    }
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page #contentMap #right h5,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page #contentMap #right h6 {
    color: var(--spec-dd-text);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page #contentMap #right p {
    color: var(--spec-dd-muted);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page #contentMap #right p.other,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page #contentMap #right p.other a {
    color: var(--spec-dd-muted);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page #contentMap #right a:hover {
    color: #7dd3fc;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page #contentMap #right form input,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page #contentMap #right form textarea {
    background: var(--spec-dd-surface);
    color: var(--spec-dd-text);
    border-color: var(--spec-ui-demo-border);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page #contentMap #right form input::placeholder,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page #contentMap #right form textarea::placeholder {
    color: var(--spec-dd-muted);
    opacity: 0.9;
}

/* --- Plans: pricingtable2 content area (Spec Pages light + dark) + layout fix --- */
body.spec-dashboard-home .content.spec-ui-page .pricingtable2 {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .pricingtable2 {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .pricingtable2 .contentpricing .sub-title {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #0f172a;
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 0;
    font-weight: 700;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .pricingtable2 .contentpricing .sub-title i {
    color: #64748b;
    font-weight: 500;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .pricingtable2 .contentpricing ul {
    background: #fff;
    color: #334155;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .pricingtable2 .contentpricing ul li:nth-child(2n) {
    background: #f8fafc;
}

body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .pricingtable2 .contentpricing .sub-title {
    background: var(--spec-dd-elevated);
    color: var(--spec-dd-text);
    border-bottom: 1px solid var(--spec-ui-demo-border);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .pricingtable2 .contentpricing .sub-title i {
    color: var(--spec-dd-muted);
    font-weight: 500;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .pricingtable2 .contentpricing ul {
    background: var(--spec-dd-surface);
    color: var(--spec-dd-text);
    border-bottom: 1px solid var(--spec-ui-demo-border);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .pricingtable2 .contentpricing ul li:nth-child(2n) {
    background: rgba(26, 39, 56, 0.65);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .pricingtable2 .contentpricing ul li {
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .pricingtable2 .contentpricing ul li:last-child {
    border-bottom: none;
}

/* --- Timeline: .timeline2, .timeline2-label, .timeline2-icon (Spec Pages light + dark) --- */
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .timeline2 {
    background-color: #f1f5f9;
    color: #475569;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .timeline2:before,
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .timeline2:after {
    background-color: #cbd5e1;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .timeline2:after {
    border-color: #cbd5e1;
    background-color: #f1f5f9;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .timeline2-time {
    background-color: #e2e8f0;
    color: #475569;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .timeline2-icon:not([class*="bg-"]) {
    background-color: #e2e8f0;
    color: #334155;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .timeline2-icon:empty {
    border-color: #94a3b8;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .timeline2-label {
    background-color: #fff;
    border-color: rgba(148, 163, 184, 0.35);
    border-bottom-color: rgba(15, 23, 42, 0.1);
    color: #334155;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .timeline2-label:before {
    border-right-color: #e2e8f0;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .timeline2-label:after {
    border-right-color: #fff;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .timeline2-label .text-main,
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .timeline2-label span {
    color: #475569;
}
body.spec-dashboard-home .content.spec-ui-page .timeline2-label img.img-xs.rounded-circle {
    width: 28px;
    height: 28px;
    max-width: 28px;
    object-fit: cover;
    vertical-align: middle;
}

body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .timeline2 {
    background-color: var(--spec-dd-surface);
    color: var(--spec-dd-muted);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .timeline2:before {
    background-color: rgba(148, 163, 184, 0.35);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .timeline2:after {
    background-color: var(--spec-dd-surface);
    border-color: rgba(148, 163, 184, 0.45);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .timeline2-time {
    background-color: var(--spec-dd-elevated);
    color: var(--spec-dd-muted);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .timeline2-icon:not([class*="bg-"]) {
    background-color: var(--spec-dd-elevated);
    color: var(--spec-dd-text);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .timeline2-icon:empty {
    border-color: rgba(148, 163, 184, 0.45);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .timeline2-label {
    background-color: var(--spec-dd-elevated);
    border-color: var(--spec-ui-demo-border);
    border-bottom-color: rgba(0, 0, 0, 0.35);
    color: var(--spec-dd-text);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .timeline2-label:before {
    border-right-color: rgba(148, 163, 184, 0.28);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .timeline2-label:after {
    border-right-color: var(--spec-dd-elevated);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .timeline2-label .text-main,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .timeline2-label a:not(.btn) {
    color: var(--spec-dd-text);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .timeline2-label a:not(.btn):hover {
    color: #5eead4;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .timeline2-label span {
    color: var(--spec-dd-muted);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .timeline2-label blockquote,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .timeline2-label .bq-sm {
    border-color: var(--spec-ui-demo-border);
    color: var(--spec-dd-muted);
}

body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .card .timeline2,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .card .timeline2:after,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .card .timeline2-time,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .card .timeline2-icon:not([class^="bg-"]):not([class*=" bg-"]) {
    background-color: var(--spec-dd-surface);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .card .timeline2-label {
    background-color: var(--spec-dd-elevated);
    color: var(--spec-dd-text);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .card .timeline2-label:before {
    border-right-color: rgba(148, 163, 184, 0.28);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .card .timeline2-label:after {
    border-right-color: var(--spec-dd-elevated);
}

@media (min-width: 768px) {
    body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .two-column.timeline2 .timeline2-entry:nth-child(even) .timeline2-label:before {
        border-left-color: #e2e8f0;
    }
    body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .two-column.timeline2 .timeline2-entry:nth-child(even) .timeline2-label:after {
        border-left-color: #fff;
    }
    body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .two-column.timeline2 .timeline2-entry:nth-child(even) .timeline2-label:before {
        border-left-color: rgba(148, 163, 184, 0.28);
    }
    body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .two-column.timeline2 .timeline2-entry:nth-child(even) .timeline2-label:after {
        border-left-color: var(--spec-dd-elevated);
    }
}

/* --- Vertical timeline (.v-timeline, .vertical-timeline-*) — Spec Pages light + dark --- */
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .v-timeline::before {
    background: #e2e8f0;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .vertical-timeline-icon {
    border-color: rgba(148, 163, 184, 0.45);
    background: #fff;
    color: #334155;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .vertical-timeline-content {
    background: #fff;
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .vertical-timeline-content:after {
    border-right-color: #fff;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .vertical-timeline-content:before {
    border-right-color: rgba(148, 163, 184, 0.35);
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .vertical-timeline-content h2 {
    color: #0f172a;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .vertical-timeline-content p {
    color: #475569;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .vertical-timeline-content .vertical-date {
    color: #64748b;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .vertical-timeline-content > .card-footer {
    background: #f8fafc;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
    color: #64748b;
}

body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .v-timeline::before {
    background: rgba(148, 163, 184, 0.22);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .vertical-timeline-icon {
    border-color: var(--spec-ui-demo-border);
    background: var(--spec-dd-elevated);
    color: var(--spec-dd-text);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .vertical-timeline-icon.navy-bg {
    background: linear-gradient(145deg, #1e3a5f 0%, #172554 100%);
    border-color: rgba(56, 189, 248, 0.35);
    color: #e2e8f0;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .vertical-timeline-content {
    background: var(--spec-dd-elevated);
    border-color: var(--spec-ui-demo-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .vertical-timeline-content:after {
    border-right-color: var(--spec-dd-elevated);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .vertical-timeline-content:before {
    border-right-color: var(--spec-ui-demo-border);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .vertical-timeline-content h2 {
    color: var(--spec-dd-text);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .vertical-timeline-content p {
    color: var(--spec-dd-muted);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .vertical-timeline-content .vertical-date {
    color: var(--spec-dd-muted);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .vertical-date small {
    color: #5eead4;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .vertical-timeline-content > .card-footer {
    background: var(--spec-dd-surface);
    border-top-color: var(--spec-ui-demo-border);
    color: var(--spec-dd-muted);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .vertical-timeline-content .btn {
    color: inherit;
}

/* --- Notes page (spec-page-notes): small-header, list, editor — light + dark --- */
body.spec-page-notes .spec-notes-search-label {
    letter-spacing: 0.06em;
}

/* Top strip: title + breadcrumb (Notes + Profile — matches spec-ui-breadcrumb / spec-ui-page-subtitle) */
body.spec-page-notes:not(.spec-dashboard-dark) #wrapper > .small-header .specpanel .card-body,
body.spec-page-profile:not(.spec-dashboard-dark) #wrapper > .small-header .specpanel .card-body {
    background: #fff;
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
}
body.spec-page-notes:not(.spec-dashboard-dark) #wrapper > .small-header .card-body h2,
body.spec-page-profile:not(.spec-dashboard-dark) #wrapper > .small-header .card-body h2 {
    color: #0f172a;
}
body.spec-page-notes:not(.spec-dashboard-dark) #wrapper > .small-header .card-body .spec-ui-page-subtitle,
body.spec-page-profile:not(.spec-dashboard-dark) #wrapper > .small-header .card-body .spec-ui-page-subtitle {
    color: #64748b !important;
    font-size: 0.875rem;
}
body.spec-page-notes:not(.spec-dashboard-dark) #wrapper > .small-header .spec-ui-breadcrumb,
body.spec-page-profile:not(.spec-dashboard-dark) #wrapper > .small-header .spec-ui-breadcrumb {
    --bs-breadcrumb-divider-color: #94a3b8;
    background: #f1f5f9 !important;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 0.8125rem;
}
body.spec-page-notes:not(.spec-dashboard-dark) #wrapper > .small-header .spec-ui-breadcrumb a,
body.spec-page-profile:not(.spec-dashboard-dark) #wrapper > .small-header .spec-ui-breadcrumb a {
    color: #475569;
    text-decoration: none;
}
body.spec-page-notes:not(.spec-dashboard-dark) #wrapper > .small-header .spec-ui-breadcrumb a:hover,
body.spec-page-profile:not(.spec-dashboard-dark) #wrapper > .small-header .spec-ui-breadcrumb a:hover {
    color: #0f766e;
    text-decoration: underline;
}
body.spec-page-notes:not(.spec-dashboard-dark) #wrapper > .small-header .spec-ui-breadcrumb .breadcrumb-item.active,
body.spec-page-profile:not(.spec-dashboard-dark) #wrapper > .small-header .spec-ui-breadcrumb .breadcrumb-item.active {
    color: #0f172a;
    font-weight: 600;
}
body.spec-page-notes:not(.spec-dashboard-dark) #wrapper > .small-header .spec-ui-breadcrumb .breadcrumb-item:not(.active) span,
body.spec-page-profile:not(.spec-dashboard-dark) #wrapper > .small-header .spec-ui-breadcrumb .breadcrumb-item:not(.active) span {
    color: #64748b;
}

body.spec-page-notes.spec-dashboard-dark #wrapper > .small-header .specpanel .card-body,
body.spec-page-profile.spec-dashboard-dark #wrapper > .small-header .specpanel .card-body {
    background: var(--spec-dd-surface);
    border-bottom: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.18));
}
body.spec-page-notes.spec-dashboard-dark #wrapper > .small-header .card-body h2,
body.spec-page-profile.spec-dashboard-dark #wrapper > .small-header .card-body h2 {
    color: var(--spec-dd-text);
}
body.spec-page-notes.spec-dashboard-dark #wrapper > .small-header .card-body .spec-ui-page-subtitle,
body.spec-page-profile.spec-dashboard-dark #wrapper > .small-header .card-body .spec-ui-page-subtitle {
    color: #cbd5e1 !important;
    font-size: 0.875rem;
}
body.spec-page-notes.spec-dashboard-dark #wrapper > .small-header .spec-ui-breadcrumb,
body.spec-page-profile.spec-dashboard-dark #wrapper > .small-header .spec-ui-breadcrumb {
    --bs-breadcrumb-divider-color: rgba(148, 163, 184, 0.65);
    --bs-breadcrumb-item-active-color: var(--spec-dd-text);
    background: rgba(30, 41, 59, 0.92) !important;
    border: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22));
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 0.8125rem;
}
body.spec-page-notes.spec-dashboard-dark #wrapper > .small-header .spec-ui-breadcrumb a,
body.spec-page-profile.spec-dashboard-dark #wrapper > .small-header .spec-ui-breadcrumb a {
    color: #94a3b8;
    text-decoration: none;
}
body.spec-page-notes.spec-dashboard-dark #wrapper > .small-header .spec-ui-breadcrumb a:hover,
body.spec-page-profile.spec-dashboard-dark #wrapper > .small-header .spec-ui-breadcrumb a:hover {
    color: #5eead4;
    text-decoration: underline;
}
body.spec-page-notes.spec-dashboard-dark #wrapper > .small-header .spec-ui-breadcrumb .breadcrumb-item.active,
body.spec-page-profile.spec-dashboard-dark #wrapper > .small-header .spec-ui-breadcrumb .breadcrumb-item.active {
    color: var(--spec-dd-text) !important;
    font-weight: 600;
}
body.spec-page-notes.spec-dashboard-dark #wrapper > .small-header .spec-ui-breadcrumb .breadcrumb-item:not(.active) span,
body.spec-page-profile.spec-dashboard-dark #wrapper > .small-header .spec-ui-breadcrumb .breadcrumb-item:not(.active) span {
    color: #94a3b8;
}
body.spec-page-notes:not(.spec-dashboard-dark) #wrapper > .small-header .clip-header,
body.spec-page-profile:not(.spec-dashboard-dark) #wrapper > .small-header .clip-header {
    background: #f1f5f9;
    border-color: rgba(148, 163, 184, 0.35);
    color: #475569;
}
body.spec-page-notes.spec-dashboard-dark #wrapper > .small-header .clip-header,
body.spec-page-profile.spec-dashboard-dark #wrapper > .small-header .clip-header {
    background: var(--spec-dd-elevated);
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22));
    color: var(--spec-dd-muted);
}

/* Forms demo pages: same top strip + breadcrumb as Profile */
body.spec-page-forms:not(.spec-dashboard-dark) #wrapper > .small-header .specpanel .card-body {
    background: #fff;
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
}
body.spec-page-forms:not(.spec-dashboard-dark) #wrapper > .small-header .card-body h2 {
    color: #0f172a;
}
body.spec-page-forms:not(.spec-dashboard-dark) #wrapper > .small-header .card-body .spec-ui-page-subtitle {
    color: #64748b !important;
    font-size: 0.875rem;
}
body.spec-page-forms:not(.spec-dashboard-dark) #wrapper > .small-header .spec-ui-breadcrumb {
    --bs-breadcrumb-divider-color: #94a3b8;
    background: #f1f5f9 !important;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 0.8125rem;
}
body.spec-page-forms:not(.spec-dashboard-dark) #wrapper > .small-header .spec-ui-breadcrumb a {
    color: #475569;
    text-decoration: none;
}
body.spec-page-forms:not(.spec-dashboard-dark) #wrapper > .small-header .spec-ui-breadcrumb a:hover {
    color: #0f766e;
    text-decoration: underline;
}
body.spec-page-forms:not(.spec-dashboard-dark) #wrapper > .small-header .spec-ui-breadcrumb .breadcrumb-item.active {
    color: #0f172a;
    font-weight: 600;
}
body.spec-page-forms:not(.spec-dashboard-dark) #wrapper > .small-header .spec-ui-breadcrumb .breadcrumb-item:not(.active) span {
    color: #64748b;
}
body.spec-page-forms.spec-dashboard-dark #wrapper > .small-header .specpanel .card-body {
    background: var(--spec-dd-surface);
    border-bottom: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.18));
}
body.spec-page-forms.spec-dashboard-dark #wrapper > .small-header .card-body h2 {
    color: var(--spec-dd-text);
}
body.spec-page-forms.spec-dashboard-dark #wrapper > .small-header .card-body .spec-ui-page-subtitle {
    color: #cbd5e1 !important;
    font-size: 0.875rem;
}
body.spec-page-forms.spec-dashboard-dark #wrapper > .small-header .spec-ui-breadcrumb {
    --bs-breadcrumb-divider-color: rgba(148, 163, 184, 0.65);
    --bs-breadcrumb-item-active-color: var(--spec-dd-text);
    background: rgba(30, 41, 59, 0.92) !important;
    border: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22));
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 0.8125rem;
}
body.spec-page-forms.spec-dashboard-dark #wrapper > .small-header .spec-ui-breadcrumb a {
    color: #94a3b8;
    text-decoration: none;
}
body.spec-page-forms.spec-dashboard-dark #wrapper > .small-header .spec-ui-breadcrumb a:hover {
    color: #5eead4;
    text-decoration: underline;
}
body.spec-page-forms.spec-dashboard-dark #wrapper > .small-header .spec-ui-breadcrumb .breadcrumb-item.active {
    color: var(--spec-dd-text) !important;
    font-weight: 600;
}
body.spec-page-forms.spec-dashboard-dark #wrapper > .small-header .spec-ui-breadcrumb .breadcrumb-item:not(.active) span {
    color: #94a3b8;
}
body.spec-page-forms:not(.spec-dashboard-dark) #wrapper > .small-header .clip-header {
    background: #f1f5f9;
    border-color: rgba(148, 163, 184, 0.35);
    color: #475569;
}
body.spec-page-forms.spec-dashboard-dark #wrapper > .small-header .clip-header {
    background: var(--spec-dd-elevated);
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22));
    color: var(--spec-dd-muted);
}

/* Summernote icon font (vendored CSS references ./font/ which is missing in this bundle) */
@font-face {
    font-family: summernote;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/font/summernote.woff2") format("woff2"),
        url("https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/font/summernote.woff") format("woff"),
        url("https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/font/summernote.ttf") format("truetype");
}

/* Native selects: dark mode */
body.spec-page-forms.spec-dashboard-dark .form-select,
body.spec-page-forms.spec-dashboard-dark select.form-control {
    background-color: var(--spec-dd-elevated);
    border-color: rgba(148, 163, 184, 0.28);
    color: var(--spec-dd-text);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
body.spec-page-forms.spec-dashboard-dark .form-select:focus,
body.spec-page-forms.spec-dashboard-dark select.form-control:focus {
    border-color: #5eead4;
    box-shadow: 0 0 0 0.2rem rgba(94, 234, 212, 0.2);
}

/* Select2 Bootstrap 5 theme — dark dashboard */
body.spec-dashboard-dark .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--spec-dd-elevated) !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-dark .select2-container--bootstrap-5 .select2-selection__rendered {
    color: var(--spec-dd-text) !important;
}

/* Select2 default theme (select2.css) — light mode surfaces */
body.spec-page-forms:not(.spec-dashboard-dark) .select2-container--default .select2-selection--single,
body.spec-page-forms:not(.spec-dashboard-dark) .select2-container--default .select2-selection--multiple,
body.spec-page-search:not(.spec-dashboard-dark) .select2-container--default .select2-selection--single,
body.spec-page-search:not(.spec-dashboard-dark) .select2-container--default .select2-selection--multiple {
    background-color: #fff;
    border-color: rgba(148, 163, 184, 0.42);
}
body.spec-page-forms:not(.spec-dashboard-dark) .select2-container--default .select2-selection--single .select2-selection__rendered,
body.spec-page-search:not(.spec-dashboard-dark) .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #0f172a;
}
body.spec-page-forms:not(.spec-dashboard-dark) .select2-container--default .select2-selection--multiple .select2-selection__choice,
body.spec-page-search:not(.spec-dashboard-dark) .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #f1f5f9;
    border-color: rgba(148, 163, 184, 0.4);
    color: #0f172a;
}

/* Select2 default theme — dark dashboard (single + multiple) */
body.spec-dashboard-dark .select2-container--default .select2-selection--single,
body.spec-dashboard-dark .select2-container--default .select2-selection--multiple {
    background-color: var(--spec-dd-elevated) !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
}
body.spec-dashboard-dark .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-dark .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-dark .select2-container--default .select2-selection__placeholder {
    color: #94a3b8 !important;
}
body.spec-dashboard-dark .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #94a3b8 transparent transparent transparent !important;
}
body.spec-dashboard-dark .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #94a3b8 transparent !important;
}
body.spec-dashboard-dark .select2-container--default.select2-container--focus .select2-selection--single,
body.spec-dashboard-dark .select2-container--default.select2-container--open .select2-selection--single,
body.spec-dashboard-dark .select2-container--default.select2-container--focus .select2-selection--multiple,
body.spec-dashboard-dark .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: rgba(94, 234, 212, 0.55) !important;
    box-shadow: 0 0 0 0.15rem rgba(94, 234, 212, 0.12);
}
body.spec-dashboard-dark .select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid rgba(94, 234, 212, 0.55) !important;
    outline: 0;
}
body.spec-dashboard-dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(148, 163, 184, 0.14) !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #94a3b8 !important;
}
body.spec-dashboard-dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fca5a5 !important;
}
body.spec-dashboard-dark .select2-container--default.select2-container--disabled .select2-selection--single,
body.spec-dashboard-dark .select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: rgba(15, 23, 42, 0.45) !important;
    border-color: rgba(148, 163, 184, 0.15) !important;
    opacity: 0.85;
}
body.spec-dashboard-dark .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--spec-dd-elevated) !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-dark .select2-container--default .select2-search--inline .select2-search__field {
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-dark .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: rgba(148, 163, 184, 0.14) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(94, 234, 212, 0.18) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-dark .select2-container--default .select2-results__group {
    color: #94a3b8 !important;
}

/* Select2 dropdown + list (all themes, dark dashboard) */
body.spec-dashboard-dark .select2-dropdown {
    background-color: var(--spec-dd-surface) !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
}
body.spec-dashboard-dark .select2-results__option {
    color: var(--spec-dd-text);
}
body.spec-dashboard-dark .select2-results__option--highlighted {
    background-color: rgba(94, 234, 212, 0.15) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-dark .select2-results__option[aria-disabled="true"] {
    color: #64748b !important;
}

/* Wizard + validation steppers */
body.spec-page-forms .spec-forms-wizard-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.35rem 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0.5rem 0 0;
    position: relative;
}
/* Track behind step circles */
body.spec-page-forms .spec-forms-wizard-nav::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: calc(0.5rem + 1.375rem);
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        rgba(148, 163, 184, 0.2) 0%,
        rgba(148, 163, 184, 0.45) 50%,
        rgba(148, 163, 184, 0.2) 100%
    );
    z-index: 0;
    pointer-events: none;
}
body.spec-page-forms.spec-dashboard-dark .spec-forms-wizard-nav::before {
    background: linear-gradient(
        90deg,
        rgba(148, 163, 184, 0.08) 0%,
        rgba(148, 163, 184, 0.22) 50%,
        rgba(148, 163, 184, 0.08) 100%
    );
}
body.spec-page-forms .spec-forms-wizard-nav .nav-item {
    flex: 1;
    text-align: center;
    min-width: 4.25rem;
    position: relative;
    z-index: 1;
}
body.spec-page-forms .spec-forms-wizard-nav .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 0.25rem 0.35rem 0.5rem;
    margin: 0 auto;
    max-width: 6.5rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent !important;
    color: var(--spec-dd-muted, #64748b);
    font-family: var(
        --bs-font-sans-serif,
        "Plus Jakarta Sans",
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        sans-serif
    );
    transition: color 0.2s ease, transform 0.2s ease;
}
body.spec-page-forms .spec-forms-wizard-nav .nav-link:hover:not(.disabled) {
    color: #0f766e;
}
body.spec-page-forms.spec-dashboard-dark .spec-forms-wizard-nav .nav-link:hover:not(.disabled) {
    color: #5eead4;
}
/* Step circle */
body.spec-page-forms .spec-forms-wizard-nav .spec-wizard-step-badge {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #475569;
    background: #fff;
    border: 2px solid rgba(148, 163, 184, 0.55);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
body.spec-page-forms.spec-dashboard-dark .spec-forms-wizard-nav .spec-wizard-step-badge {
    color: #cbd5e1;
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
body.spec-page-forms .spec-forms-wizard-nav .spec-wizard-step-badge--icon {
    font-size: 0.95rem;
}
body.spec-page-forms .spec-forms-wizard-nav .spec-wizard-step-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.25;
    color: inherit;
    opacity: 0.92;
}
/* Active step */
body.spec-page-forms .spec-forms-wizard-nav .nav-link.active {
    color: #0f766e !important;
    background: transparent !important;
    border: none !important;
}
body.spec-page-forms.spec-dashboard-dark .spec-forms-wizard-nav .nav-link.active {
    color: #5eead4 !important;
}
body.spec-page-forms .spec-forms-wizard-nav .nav-link.active .spec-wizard-step-badge {
    color: #fff !important;
    background: linear-gradient(160deg, #2dd4bf 0%, #0d9488 45%, #0f766e 100%) !important;
    border-color: #0f766e !important;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.38), 0 0 0 4px rgba(13, 148, 136, 0.18) !important;
}
body.spec-page-forms.spec-dashboard-dark .spec-forms-wizard-nav .nav-link.active .spec-wizard-step-badge {
    box-shadow: 0 4px 18px rgba(13, 148, 136, 0.35), 0 0 0 4px rgba(45, 212, 191, 0.15) !important;
}
body.spec-page-forms .spec-forms-wizard-nav .nav-link.active .spec-wizard-step-label {
    color: #0f766e !important;
    opacity: 1;
    font-weight: 700;
}
body.spec-page-forms.spec-dashboard-dark .spec-forms-wizard-nav .nav-link.active .spec-wizard-step-label {
    color: #5eead4 !important;
}
/* Completed steps */
body.spec-page-forms .spec-forms-wizard-nav .nav-link.done {
    color: #047857 !important;
    background: transparent !important;
    border: none !important;
}
body.spec-page-forms .spec-forms-wizard-nav .nav-link.done .spec-wizard-step-badge {
    color: #fff !important;
    background: linear-gradient(160deg, #34d399 0%, #10b981 50%, #059669 100%) !important;
    border-color: #059669 !important;
    box-shadow: 0 2px 10px rgba(5, 150, 105, 0.3), 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}
body.spec-page-forms .spec-forms-wizard-nav .nav-link.done .spec-wizard-step-label {
    color: #047857 !important;
    opacity: 1;
}
body.spec-page-forms.spec-dashboard-dark .spec-forms-wizard-nav .nav-link.done {
    color: #6ee7b7 !important;
}
body.spec-page-forms.spec-dashboard-dark .spec-forms-wizard-nav .nav-link.done .spec-wizard-step-badge {
    background: linear-gradient(160deg, #4ade80 0%, #22c55e 45%, #15803d 100%) !important;
    border-color: #22c55e !important;
    box-shadow: 0 2px 12px rgba(34, 197, 94, 0.25), 0 0 0 3px rgba(52, 211, 153, 0.12) !important;
}
body.spec-page-forms.spec-dashboard-dark .spec-forms-wizard-nav .nav-link.done .spec-wizard-step-label {
    color: #6ee7b7 !important;
}
/* Re-show teal “current” styling when .active and .done both apply */
body.spec-page-forms .spec-forms-wizard-nav .nav-link.active.done .spec-wizard-step-badge {
    color: #fff !important;
    background: linear-gradient(160deg, #2dd4bf 0%, #0d9488 45%, #0f766e 100%) !important;
    border-color: #0f766e !important;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.38), 0 0 0 4px rgba(13, 148, 136, 0.18) !important;
}
body.spec-page-forms.spec-dashboard-dark .spec-forms-wizard-nav .nav-link.active.done .spec-wizard-step-badge {
    box-shadow: 0 4px 18px rgba(13, 148, 136, 0.35), 0 0 0 4px rgba(45, 212, 191, 0.15) !important;
}
body.spec-page-forms .spec-forms-wizard-nav .nav-link.active.done .spec-wizard-step-label {
    color: #0f766e !important;
}
body.spec-page-forms.spec-dashboard-dark .spec-forms-wizard-nav .nav-link.active.done .spec-wizard-step-label {
    color: #5eead4 !important;
}
/* Locked / disabled upcoming steps */
body.spec-page-forms .spec-forms-wizard-nav .nav-item.disabled {
    pointer-events: none;
}
body.spec-page-forms .spec-forms-wizard-nav .nav-link.disabled,
body.spec-page-forms .spec-forms-wizard-nav .nav-link:disabled {
    opacity: 1;
    pointer-events: none;
}
body.spec-page-forms .spec-forms-wizard-nav .nav-link.disabled .spec-wizard-step-badge,
body.spec-page-forms .spec-forms-wizard-nav .nav-link:disabled .spec-wizard-step-badge {
    opacity: 0.42;
    filter: grayscale(0.15);
}
body.spec-page-forms .spec-forms-wizard-nav .nav-link.disabled .spec-wizard-step-label,
body.spec-page-forms .spec-forms-wizard-nav .nav-link:disabled .spec-wizard-step-label {
    opacity: 0.5;
}

/* Wizard page: panel, typography, light/dark (wizard.html) */
body.spec-page-forms .wizard {
    margin: 0 auto;
    max-width: 100%;
    font-family: var(--bs-font-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
body.spec-page-forms .wizard > p.text-muted {
    color: var(--spec-dd-muted, #64748b) !important;
}
body.spec-page-forms.spec-dashboard-dark .wizard > p.text-muted {
    color: #94a3b8 !important;
}
body.spec-page-forms .wizard .tab-content {
    border-radius: 0.5rem;
    padding: 1.25rem 1.35rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(248, 250, 252, 0.92);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
body.spec-page-forms.spec-dashboard-dark .wizard .tab-content {
    background: var(--spec-dd-elevated, #1e293b);
    border-color: rgba(148, 163, 184, 0.22);
    box-shadow: none;
}
body.spec-page-forms .wizard .tab-pane {
    padding-top: 0.5rem;
}
body.spec-page-forms .wizard h5 {
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--spec-dd-text, #0f172a);
}
body.spec-page-forms.spec-dashboard-dark .wizard h5 {
    color: var(--spec-dd-text, #f1f5f9);
}
body.spec-page-forms .wizard .step33,
body.spec-page-forms .wizard .step_21 {
    border-color: rgba(148, 163, 184, 0.35) !important;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 0.375rem;
    padding: 1rem !important;
}
body.spec-page-forms.spec-dashboard-dark .wizard .step33,
body.spec-page-forms.spec-dashboard-dark .wizard .step_21 {
    border-color: rgba(148, 163, 184, 0.2) !important;
    background: rgba(15, 23, 42, 0.35);
}
body.spec-page-forms .wizard hr {
    border-color: rgba(148, 163, 184, 0.25);
    opacity: 1;
}
body.spec-page-forms.spec-dashboard-dark .wizard hr {
    border-color: rgba(148, 163, 184, 0.2);
}
body.spec-page-forms .wizard .mar_ned p[align="right"] {
    text-align: end !important;
    margin-bottom: 0;
    padding-top: 0.375rem;
    color: var(--spec-dd-muted, #64748b);
    font-size: 0.875rem;
}
body.spec-page-forms.spec-dashboard-dark .wizard .mar_ned p[align="right"] {
    color: #94a3b8;
}
body.spec-page-forms .wizard label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--spec-dd-text, #334155);
}
body.spec-page-forms.spec-dashboard-dark .wizard label {
    color: #cbd5e1;
}

/* Sign-in inline / horizontal alignment helpers (forms_elements.html) */
body.spec-page-forms .spec-signin-inline .spec-signin-inline-input {
    min-width: min(100%, 14rem);
}

body.spec-page-forms .spec-validation-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    position: relative;
}
body.spec-page-forms .spec-validation-stepper::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 1.15rem;
    height: 2px;
    background: rgba(148, 163, 184, 0.35);
    z-index: 0;
}
body.spec-page-forms.spec-dashboard-dark .spec-validation-stepper::before {
    background: rgba(148, 163, 184, 0.2);
}
body.spec-page-forms .spec-validation-step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 1;
}
body.spec-page-forms .spec-validation-step .btn-circle {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    padding: 0;
    line-height: 2.35rem;
    font-weight: 600;
}
body.spec-page-forms .spec-validation-step.is-complete .btn-circle {
    background-color: #10b981;
    border-color: #059669;
    color: #fff;
}
body.spec-page-forms .spec-validation-step.is-active .btn-circle {
    background-color: #0d9488;
    border-color: #0f766e;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.25);
}
body.spec-page-forms .spec-validation-step p {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--spec-dd-muted, #64748b);
}
body.spec-page-forms.spec-dashboard-dark .spec-validation-step p {
    color: #94a3b8;
}
body.spec-page-forms .spec-validation-step.is-active p {
    color: var(--spec-dd-text, #0f172a);
    font-weight: 600;
}
body.spec-page-forms.spec-dashboard-dark .spec-validation-step.is-active p {
    color: #f1f5f9;
}

/* Sidebar note list */
body.spec-page-notes:not(.spec-dashboard-dark) .content.spec-ui-page #notes .note-link {
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    transition: background-color 0.15s ease;
}
body.spec-page-notes:not(.spec-dashboard-dark) .content.spec-ui-page #notes .note-link:hover {
    background: #f8fafc !important;
}
body.spec-page-notes:not(.spec-dashboard-dark) .content.spec-ui-page #notes .note-link:has(> a.active) {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.12) 0%, rgba(14, 165, 233, 0.04) 100%) !important;
    border-left: 3px solid #0ea5e9;
}
body.spec-page-notes:not(.spec-dashboard-dark) .content.spec-ui-page #notes .note-link h5 {
    color: #0f172a;
}

body.spec-page-notes.spec-dashboard-dark .content.spec-ui-page #notes .note-link {
    background: transparent !important;
    border-bottom: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.15));
    transition: background-color 0.15s ease;
}
body.spec-page-notes.spec-dashboard-dark .content.spec-ui-page #notes .note-link:hover {
    background: rgba(148, 163, 184, 0.08) !important;
}
body.spec-page-notes.spec-dashboard-dark .content.spec-ui-page #notes .note-link:has(> a.active) {
    background: rgba(56, 189, 248, 0.12) !important;
    border-left: 3px solid #38bdf8;
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.15);
}
body.spec-page-notes.spec-dashboard-dark .content.spec-ui-page #notes .note-link h5 {
    color: var(--spec-dd-text);
}
body.spec-page-notes.spec-dashboard-dark .content.spec-ui-page #notes .note-link .small,
body.spec-page-notes.spec-dashboard-dark .content.spec-ui-page #notes .note-link .text-muted {
    color: var(--spec-dd-muted) !important;
}

/* Detail panel */
body.spec-page-notes:not(.spec-dashboard-dark) .content.spec-ui-page .tab-content > .tab-pane h3 {
    color: #0f172a;
}
body.spec-page-notes:not(.spec-dashboard-dark) .content.spec-ui-page .tab-content > .tab-pane hr {
    border-color: rgba(148, 163, 184, 0.35);
    opacity: 1;
}

body.spec-page-notes.spec-dashboard-dark .content.spec-ui-page .tab-content > .tab-pane h3 {
    color: var(--spec-dd-text);
}
body.spec-page-notes.spec-dashboard-dark .content.spec-ui-page .tab-content > .tab-pane hr {
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.2));
    opacity: 1;
}

body.spec-page-notes .content.spec-ui-page .note-content textarea.form-control {
    border: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.35));
    border-radius: 10px;
    padding: 12px 14px;
    min-height: 280px;
    resize: vertical;
}
body.spec-page-notes:not(.spec-dashboard-dark) .content.spec-ui-page .note-content textarea.form-control {
    background: #fff;
    color: #0f172a;
}
body.spec-page-notes.spec-dashboard-dark .content.spec-ui-page .note-content textarea.form-control {
    background: var(--spec-dd-surface);
    color: var(--spec-dd-text);
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22));
}

/* Empty state (hidden by default; remove .d-none to show) */
body.spec-page-notes:not(.spec-dashboard-dark) .content.spec-ui-page .spec-notes-empty {
    background: #f8fafc;
    border-color: rgba(148, 163, 184, 0.3) !important;
}
body.spec-page-notes.spec-dashboard-dark .content.spec-ui-page .spec-notes-empty {
    background: var(--spec-dd-elevated);
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.2)) !important;
}
body.spec-page-notes.spec-dashboard-dark .content.spec-ui-page .spec-notes-empty .fw-semibold {
    color: var(--spec-dd-text);
}
body.spec-page-notes.spec-dashboard-dark .content.spec-ui-page .spec-notes-empty .text-muted {
    color: var(--spec-dd-muted) !important;
}

/* Add Notes header row */
body.spec-page-notes.spec-dashboard-dark .content.spec-ui-page .panel-section .text-center.text-muted {
    color: var(--spec-dd-muted) !important;
}

/* --- Profile page (spec-page-profile): sidebar, content, tabs — light + dark --- */
body.spec-page-profile .content.spec-ui-page .profile-usermenu .nav-link {
    margin-left: 0 !important;
    border-left: 0 !important;
}
body.spec-page-profile .content.spec-ui-page .profile-userbuttons .btn {
    margin-right: 0;
}
body.spec-page-profile .content.spec-ui-page .specpanel.hgreen > .card-body > .row.profile {
    width: 100%;
    max-width: 100%;
}
body.spec-page-profile .content.spec-ui-page .profile-content {
    min-width: 0;
    max-width: 100%;
}
body.spec-page-profile .content.spec-ui-page .spec-profile-dl {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(9rem, 32%) minmax(0, 1fr);
    column-gap: 1.25rem;
    row-gap: 0.75rem;
    align-items: start;
}
body.spec-page-profile .content.spec-ui-page .spec-profile-dl dt {
    margin: 0;
    font-weight: 600;
    line-height: 1.45;
    padding-top: 0.1rem;
    min-width: 0;
}
body.spec-page-profile .content.spec-ui-page .spec-profile-dl dd {
    margin: 0;
    line-height: 1.55;
    min-width: 0;
    overflow-wrap: break-word;
}
body.spec-page-profile .content.spec-ui-page .spec-profile-dl dd.spec-profile-dd-continued {
    grid-column: 2;
}
@media (max-width: 575.98px) {
    body.spec-page-profile .content.spec-ui-page .spec-profile-dl {
        grid-template-columns: 1fr;
    }
    body.spec-page-profile .content.spec-ui-page .spec-profile-dl dd.spec-profile-dd-continued {
        grid-column: 1;
        padding-left: 0.65rem;
        border-left: 2px solid rgba(148, 163, 184, 0.35);
    }
    body.spec-page-profile.spec-dashboard-dark .content.spec-ui-page .spec-profile-dl dd.spec-profile-dd-continued {
        border-left-color: rgba(148, 163, 184, 0.28);
    }
}

body.spec-page-profile:not(.spec-dashboard-dark) .content.spec-ui-page .profile-sidebar {
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.25);
}
body.spec-page-profile:not(.spec-dashboard-dark) .content.spec-ui-page .profile-content {
    background: #fff;
    border-color: rgba(148, 163, 184, 0.28) !important;
}
body.spec-page-profile:not(.spec-dashboard-dark) .content.spec-ui-page .profile-usertitle-name {
    color: #0f172a;
}
body.spec-page-profile:not(.spec-dashboard-dark) .content.spec-ui-page .profile-usertitle-job {
    color: #0d9488;
}
body.spec-page-profile:not(.spec-dashboard-dark) .content.spec-ui-page .profile-usermenu ul li {
    border-bottom-color: rgba(148, 163, 184, 0.2);
}
body.spec-page-profile:not(.spec-dashboard-dark) .content.spec-ui-page .profile-usermenu .nav-link {
    color: #64748b;
    border-radius: 8px;
}
body.spec-page-profile:not(.spec-dashboard-dark) .content.spec-ui-page .profile-usermenu .nav-link:hover {
    background: #f1f5f9;
    color: #0f766e;
}
body.spec-page-profile:not(.spec-dashboard-dark) .content.spec-ui-page .profile-usermenu .nav-link.active {
    background: #ecfeff;
    color: #0f766e;
    font-weight: 600;
}
body.spec-page-profile:not(.spec-dashboard-dark) .content.spec-ui-page .spec-profile-dl dt {
    color: #334155;
}
body.spec-page-profile:not(.spec-dashboard-dark) .content.spec-ui-page .spec-profile-dl dd {
    color: #475569;
}
body.spec-page-profile:not(.spec-dashboard-dark) .content.spec-ui-page .spec-profile-tabler-head {
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    padding-bottom: 0.35rem;
    margin-bottom: 0.5rem;
}
body.spec-page-profile:not(.spec-dashboard-dark) .content.spec-ui-page .tabler h3 {
    border-bottom: none;
    padding: 0;
    color: #0f766e;
    font-size: 1.125rem;
}
body.spec-page-profile:not(.spec-dashboard-dark) .content.spec-ui-page .tabler td {
    color: #334155;
}
body.spec-page-profile:not(.spec-dashboard-dark) .content.spec-ui-page .specpanel.hgreen > .contact-footer {
    background: #f1f5f9;
    border-top: 1px solid rgba(148, 163, 184, 0.25) !important;
}
body.spec-page-profile:not(.spec-dashboard-dark) .content.spec-ui-page .specpanel.hgreen > .contact-footer .contact-stat span {
    color: #64748b;
}
body.spec-page-profile:not(.spec-dashboard-dark) .content.spec-ui-page .specpanel.hgreen > .contact-footer .contact-stat strong {
    color: #0f172a;
}
body.spec-page-profile:not(.spec-dashboard-dark) .content.spec-ui-page .nav-tabs {
    border-bottom-color: rgba(148, 163, 184, 0.35);
}
body.spec-page-profile:not(.spec-dashboard-dark) .content.spec-ui-page .nav-tabs .nav-link {
    color: #64748b;
    border-radius: 8px 8px 0 0;
}
body.spec-page-profile:not(.spec-dashboard-dark) .content.spec-ui-page .nav-tabs .nav-link:hover {
    color: #0f766e;
    border-color: transparent;
}
body.spec-page-profile:not(.spec-dashboard-dark) .content.spec-ui-page .nav-tabs .nav-link.active {
    color: #0f172a;
    font-weight: 600;
    background: #fff;
    border-color: rgba(148, 163, 184, 0.35) rgba(148, 163, 184, 0.35) #fff;
}

body.spec-page-profile.spec-dashboard-dark .content.spec-ui-page .profile-sidebar {
    background: var(--spec-dd-elevated);
    border: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22));
    border-radius: 12px;
    color: var(--spec-dd-text);
}
body.spec-page-profile.spec-dashboard-dark .content.spec-ui-page .profile-content {
    background: var(--spec-dd-elevated) !important;
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22)) !important;
    color: var(--spec-dd-text);
}
body.spec-page-profile.spec-dashboard-dark .content.spec-ui-page .profile-usertitle-name {
    color: var(--spec-dd-text);
}
body.spec-page-profile.spec-dashboard-dark .content.spec-ui-page .profile-usertitle-job {
    color: #5eead4;
}
body.spec-page-profile.spec-dashboard-dark .content.spec-ui-page .profile-usermenu ul li {
    border-bottom-color: rgba(148, 163, 184, 0.15);
}
body.spec-page-profile.spec-dashboard-dark .content.spec-ui-page .profile-usermenu .nav-link {
    color: var(--spec-dd-muted);
    border-radius: 8px;
}
body.spec-page-profile.spec-dashboard-dark .content.spec-ui-page .profile-usermenu .nav-link:hover {
    background: rgba(148, 163, 184, 0.1);
    color: #5eead4;
}
body.spec-page-profile.spec-dashboard-dark .content.spec-ui-page .profile-usermenu .nav-link.active {
    background: rgba(94, 234, 212, 0.12);
    color: #5eead4;
    font-weight: 600;
}
body.spec-page-profile.spec-dashboard-dark .content.spec-ui-page .spec-profile-dl dt {
    color: var(--spec-dd-text);
}
body.spec-page-profile.spec-dashboard-dark .content.spec-ui-page .spec-profile-dl dd {
    color: var(--spec-dd-muted);
}
body.spec-page-profile.spec-dashboard-dark .content.spec-ui-page .spec-profile-tabler-head {
    border-bottom: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22));
    padding-bottom: 0.35rem;
    margin-bottom: 0.5rem;
}
body.spec-page-profile.spec-dashboard-dark .content.spec-ui-page .tabler h3 {
    border-bottom: none;
    padding: 0;
    color: #5eead4;
    font-size: 1.125rem;
}
body.spec-page-profile.spec-dashboard-dark .content.spec-ui-page .tabler td {
    color: var(--spec-dd-text) !important;
}
body.spec-page-profile.spec-dashboard-dark .content.spec-ui-page .folderTab h3 {
    color: var(--spec-dd-text);
}
body.spec-page-profile.spec-dashboard-dark .content.spec-ui-page .borderBox {
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22));
}
body.spec-page-profile.spec-dashboard-dark .content.spec-ui-page .specpanel.hgreen > .contact-footer {
    background: var(--spec-dd-surface) !important;
    border-top: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22)) !important;
}
body.spec-page-profile.spec-dashboard-dark .content.spec-ui-page .specpanel.hgreen > .contact-footer .contact-stat span {
    color: var(--spec-dd-muted) !important;
}
body.spec-page-profile.spec-dashboard-dark .content.spec-ui-page .specpanel.hgreen > .contact-footer .contact-stat strong {
    color: var(--spec-dd-text) !important;
}
body.spec-page-profile.spec-dashboard-dark .content.spec-ui-page .nav-tabs {
    border-bottom-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22));
}
body.spec-page-profile.spec-dashboard-dark .content.spec-ui-page .nav-tabs .nav-link {
    color: var(--spec-dd-muted);
    background: transparent;
    border-color: transparent transparent var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22));
}
body.spec-page-profile.spec-dashboard-dark .content.spec-ui-page .nav-tabs .nav-link:hover {
    color: #5eead4;
    border-color: rgba(148, 163, 184, 0.25);
}
body.spec-page-profile.spec-dashboard-dark .content.spec-ui-page .nav-tabs .nav-link.active {
    color: var(--spec-dd-text);
    background: var(--spec-dd-elevated);
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22)) var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22)) transparent;
    font-weight: 600;
}

/* Spec UI pages: chat discussion — .message bubbles (light + dark) */
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .chat-discussion {
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .chat-discussion .message,
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .chat-discussion .chat-message .message {
    background-color: #fff !important;
    color: #334155;
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .chat-discussion .message-author {
    color: #0f172a;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .chat-discussion .message-date {
    color: #64748b !important;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .chat-discussion .message-content {
    color: #475569;
}

body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .chat-discussion {
    background: rgba(15, 23, 42, 0.4);
    border-radius: 12px;
    border: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.18));
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .chat-discussion .message,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .chat-discussion .chat-message .message {
    background: var(--spec-dd-elevated) !important;
    color: var(--spec-dd-text);
    border: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22));
    box-shadow: none;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .chat-discussion .message-author {
    color: var(--spec-dd-text);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .chat-discussion .message-author:hover {
    color: #5eead4;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .chat-discussion .message-date {
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .chat-discussion .message-content {
    color: var(--spec-dd-muted);
}

/* --- Mailbox page (spec-page-mailbox): search, folders, chat list, table — light + dark --- */
body.spec-page-mailbox .content.spec-ui-page .spec-mailbox-search-inner {
    max-width: 42rem;
}
body.spec-page-mailbox .content.spec-ui-page .spec-mailbox-search-label {
    letter-spacing: 0.06em;
    font-size: 0.7rem;
}
body.spec-page-mailbox .content.spec-ui-page .spec-mailbox-chat-avatar {
    width: 32px;
    height: 32px;
    object-fit: cover;
    flex-shrink: 0;
}
body.spec-page-mailbox .content.spec-ui-page .spec-mailbox-presence {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-sizing: content-box;
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-presence {
    border-color: var(--spec-dd-elevated);
}
body.spec-page-mailbox .content.spec-ui-page .spec-mailbox-presence--success {
    background: #22c55e;
}
body.spec-page-mailbox .content.spec-ui-page .spec-mailbox-presence--info {
    background: #38bdf8;
}
body.spec-page-mailbox .content.spec-ui-page .spec-mailbox-presence--warning {
    background: #fbbf24;
}
body.spec-page-mailbox .content.spec-ui-page .spec-mailbox-presence--danger {
    background: #f87171;
}

body.spec-page-mailbox:not(.spec-dashboard-dark) .content.spec-ui-page .spec-mailbox-search-panel > .card-header {
    background: #f8fafc;
    border-bottom: 1px solid rgba(148, 163, 184, 0.28) !important;
}
body.spec-page-mailbox:not(.spec-dashboard-dark) .content.spec-ui-page .spec-mailbox-hr {
    border-color: rgba(148, 163, 184, 0.35);
    opacity: 1;
}
body.spec-page-mailbox:not(.spec-dashboard-dark) .content.spec-ui-page .spec-mailbox-chat-heading {
    color: #64748b;
    letter-spacing: 0.06em;
}
body.spec-page-mailbox:not(.spec-dashboard-dark) .content.spec-ui-page .spec-mailbox-chat-list {
    background: #fff;
    border-color: rgba(148, 163, 184, 0.35) !important;
}
body.spec-page-mailbox:not(.spec-dashboard-dark) .content.spec-ui-page .spec-mailbox-chat-list .list-group-item {
    border-color: rgba(148, 163, 184, 0.2);
    color: #0f172a;
}
body.spec-page-mailbox:not(.spec-dashboard-dark) .content.spec-ui-page .spec-mailbox-news {
    background: #f8fafc;
    border-color: rgba(148, 163, 184, 0.3) !important;
}
body.spec-page-mailbox:not(.spec-dashboard-dark) .content.spec-ui-page .spec-mailbox-news-title {
    color: #475569;
    letter-spacing: 0.05em;
}
body.spec-page-mailbox:not(.spec-dashboard-dark) .content.spec-ui-page .spec-mailbox-news-link {
    color: #0d9488;
}
body.spec-page-mailbox:not(.spec-dashboard-dark) .content.spec-ui-page ul.mailbox-list.spec-mailbox-folders li.active a {
    background: linear-gradient(90deg, rgba(13, 148, 136, 0.12), rgba(13, 148, 136, 0.04));
    border: 1px solid rgba(13, 148, 136, 0.35);
    color: #0f766e;
    border-radius: 8px;
    font-weight: 600;
}
body.spec-page-mailbox:not(.spec-dashboard-dark) .content.spec-ui-page ul.mailbox-list.spec-mailbox-folders li a {
    border-radius: 8px;
}
body.spec-page-mailbox:not(.spec-dashboard-dark) .content.spec-ui-page ul.mailbox-list.spec-mailbox-folders li:hover a {
    background: #f1f5f9;
    color: #0f172a;
}
body.spec-page-mailbox:not(.spec-dashboard-dark) .content.spec-ui-page .table-mailbox tbody tr {
    border-color: rgba(148, 163, 184, 0.22);
}
body.spec-page-mailbox:not(.spec-dashboard-dark) .content.spec-ui-page .table-mailbox tbody tr:hover td {
    background: rgba(241, 245, 249, 0.85);
}
body.spec-page-mailbox:not(.spec-dashboard-dark) .content.spec-ui-page .table-mailbox tr.active td {
    background: rgba(13, 148, 136, 0.08);
}
body.spec-page-mailbox:not(.spec-dashboard-dark) .content.spec-ui-page .table-mailbox tr.unread td a {
    color: #0f172a;
}
body.spec-page-mailbox:not(.spec-dashboard-dark) .content.spec-ui-page .table-mailbox .mail-date {
    color: #64748b;
    font-size: 0.8rem;
}

body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-search-panel > .card-header {
    background: var(--spec-dd-elevated);
    border-bottom: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22)) !important;
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-search-panel .form-control {
    background: var(--spec-dd-surface);
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.25));
    color: var(--spec-dd-text);
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-search-panel .form-control::placeholder {
    color: var(--spec-dd-muted);
    opacity: 0.85;
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-search-label {
    color: var(--spec-dd-muted) !important;
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-hr {
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22));
    opacity: 1;
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-chat-heading {
    color: var(--spec-dd-muted);
    letter-spacing: 0.06em;
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-chat-list {
    background: var(--spec-dd-surface);
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22)) !important;
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-chat-list .list-group-item {
    background: transparent;
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.15));
    color: var(--spec-dd-text);
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-chat-list .list-group-item:hover {
    background: rgba(148, 163, 184, 0.08);
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-chat-list .list-group-item .text-muted {
    color: var(--spec-dd-muted) !important;
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-news {
    background: rgba(15, 23, 42, 0.45);
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22)) !important;
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-news-title {
    color: var(--spec-dd-muted);
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-news .text-muted {
    color: var(--spec-dd-muted) !important;
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-news-link {
    color: #5eead4;
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page ul.mailbox-list.spec-mailbox-folders li.active a {
    background: rgba(94, 234, 212, 0.12);
    border: 1px solid rgba(94, 234, 212, 0.35);
    color: #5eead4;
    border-radius: 8px;
    font-weight: 600;
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page ul.mailbox-list.spec-mailbox-folders li a {
    color: var(--spec-dd-muted);
    border-radius: 8px;
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page ul.mailbox-list.spec-mailbox-folders li:hover a {
    background: rgba(148, 163, 184, 0.1);
    color: var(--spec-dd-text);
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .table-mailbox tbody tr {
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.18));
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .table-mailbox tbody td {
    background: transparent;
    color: var(--spec-dd-text) !important;
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.15)) !important;
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .table-mailbox tbody tr:hover td {
    background: rgba(148, 163, 184, 0.06) !important;
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .table-mailbox tr.active td {
    background: rgba(94, 234, 212, 0.08) !important;
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .table-mailbox td a {
    color: var(--spec-dd-text) !important;
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .table-mailbox tr.unread td a {
    color: #f1f5f9 !important;
    font-weight: 600;
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .table-mailbox td:nth-child(3) a {
    color: var(--spec-dd-muted) !important;
    font-weight: 400;
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .table-mailbox tr.unread td:nth-child(3) a {
    color: #cbd5e1 !important;
    font-weight: 500;
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .table-mailbox .mail-date {
    color: var(--spec-dd-muted) !important;
}
body.spec-page-mailbox.spec-dashboard-dark .content.spec-ui-page .table-mailbox td .fa-paperclip {
    color: var(--spec-dd-muted);
    opacity: 0.85;
}
body.spec-page-mailbox:not(.spec-dashboard-dark) .content.spec-ui-page .table-mailbox td .fa-paperclip {
    color: #64748b;
}

/* Mailbox compose — panel header, fields, Summernote, footer (light + dark) */
body.spec-page-mailbox-compose:not(.spec-dashboard-dark) .content.spec-ui-page .spec-mailbox-compose-panel > .spec-mailbox-compose-hd {
    background: #f8fafc;
    border-color: rgba(148, 163, 184, 0.28) !important;
}
body.spec-page-mailbox-compose:not(.spec-dashboard-dark) .content.spec-ui-page .spec-mailbox-compose-title {
    color: #0f172a;
    letter-spacing: 0.04em;
}
body.spec-page-mailbox-compose:not(.spec-dashboard-dark) .content.spec-ui-page .spec-mailbox-compose-fields {
    background: #fff;
    border-color: rgba(148, 163, 184, 0.22) !important;
}
body.spec-page-mailbox-compose.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-compose-panel > .spec-mailbox-compose-hd {
    background: var(--spec-dd-elevated);
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22)) !important;
}
body.spec-page-mailbox-compose.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-compose-title {
    color: var(--spec-dd-text);
    letter-spacing: 0.04em;
}
body.spec-page-mailbox-compose.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-compose-fields {
    background: var(--spec-dd-surface);
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.18)) !important;
}
body.spec-page-mailbox-compose.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-compose-fields .form-control {
    background: var(--spec-dd-elevated);
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.25));
    color: var(--spec-dd-text);
}
body.spec-page-mailbox-compose.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-compose-fields .form-control::placeholder {
    color: var(--spec-dd-muted);
    opacity: 0.85;
}
body.spec-page-mailbox-compose.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-compose-fields .col-form-label {
    color: var(--spec-dd-muted) !important;
}
body.spec-page-mailbox-compose:not(.spec-dashboard-dark) .content.spec-ui-page .spec-mailbox-compose-editor {
    background: #fff;
}
body.spec-page-mailbox-compose.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-compose-editor {
    background: var(--spec-dd-surface);
}
body.spec-page-mailbox-compose:not(.spec-dashboard-dark) .content.spec-ui-page .email-compose .note-editor.note-frame {
    border-color: rgba(148, 163, 184, 0.35) !important;
}
body.spec-page-mailbox-compose.spec-dashboard-dark .content.spec-ui-page .email-compose .note-editor.note-frame {
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22)) !important;
    background: var(--spec-dd-surface);
}
body.spec-page-mailbox-compose.spec-dashboard-dark .content.spec-ui-page .email-compose .note-editor .note-toolbar {
    background: var(--spec-dd-elevated) !important;
    border-bottom: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22)) !important;
}
body.spec-page-mailbox-compose.spec-dashboard-dark .content.spec-ui-page .email-compose .note-editor .note-toolbar .note-btn {
    color: var(--spec-dd-text);
    background: transparent;
    border-color: transparent;
}
body.spec-page-mailbox-compose.spec-dashboard-dark .content.spec-ui-page .email-compose .note-editor .note-toolbar .note-btn:hover {
    background: rgba(148, 163, 184, 0.12);
    color: #5eead4;
}
body.spec-page-mailbox-compose.spec-dashboard-dark .content.spec-ui-page .email-compose .note-editor .note-editable {
    background: var(--spec-dd-surface) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-page-mailbox-compose:not(.spec-dashboard-dark) .content.spec-ui-page .spec-mailbox-compose-footer {
    background: #f8fafc;
    border-top: 1px solid rgba(148, 163, 184, 0.28) !important;
}
body.spec-page-mailbox-compose.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-compose-footer {
    background: var(--spec-dd-elevated) !important;
    border-top: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22)) !important;
}

/* Mailbox view — read message panel (light + dark) */
body.spec-page-mailbox-view:not(.spec-dashboard-dark) .content.spec-ui-page .spec-mailbox-view-panel > .spec-mailbox-view-hd {
    background: #f8fafc;
    border-color: rgba(148, 163, 184, 0.28) !important;
}
body.spec-page-mailbox-view:not(.spec-dashboard-dark) .content.spec-ui-page .spec-mailbox-view-title {
    color: #0f172a;
}
body.spec-page-mailbox-view:not(.spec-dashboard-dark) .content.spec-ui-page .spec-mailbox-view-time {
    color: #64748b;
}
body.spec-page-mailbox-view:not(.spec-dashboard-dark) .content.spec-ui-page .spec-mailbox-view-meta {
    background: #f1f5f9;
    border-color: rgba(148, 163, 184, 0.22) !important;
}
body.spec-page-mailbox-view:not(.spec-dashboard-dark) .content.spec-ui-page .spec-mailbox-view-meta-label {
    color: #64748b;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
}
body.spec-page-mailbox-view:not(.spec-dashboard-dark) .content.spec-ui-page .spec-mailbox-view-meta-value {
    color: #334155;
}
body.spec-page-mailbox-view:not(.spec-dashboard-dark) .content.spec-ui-page .spec-mailbox-view-meta-link {
    color: #0d9488;
}
body.spec-page-mailbox-view:not(.spec-dashboard-dark) .content.spec-ui-page .spec-mailbox-view-body {
    background: #fff;
}
body.spec-page-mailbox-view:not(.spec-dashboard-dark) .content.spec-ui-page .spec-mailbox-view-message {
    color: #334155;
}
body.spec-page-mailbox-view:not(.spec-dashboard-dark) .content.spec-ui-page .spec-mailbox-view-attachments {
    background: #fafafa;
    border-color: rgba(148, 163, 184, 0.25) !important;
}
body.spec-page-mailbox-view:not(.spec-dashboard-dark) .content.spec-ui-page .spec-mailbox-view-footer {
    background: #f8fafc;
    border-top: 1px solid rgba(148, 163, 184, 0.28) !important;
}

body.spec-page-mailbox-view.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-view-panel > .spec-mailbox-view-hd {
    background: var(--spec-dd-elevated);
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22)) !important;
}
body.spec-page-mailbox-view.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-view-title {
    color: var(--spec-dd-text);
}
body.spec-page-mailbox-view.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-view-time {
    color: var(--spec-dd-muted) !important;
}
body.spec-page-mailbox-view.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-view-meta {
    background: var(--spec-dd-surface);
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.18)) !important;
}
body.spec-page-mailbox-view.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-view-meta-label {
    color: var(--spec-dd-muted);
    letter-spacing: 0.04em;
    font-size: 0.7rem;
}
body.spec-page-mailbox-view.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-view-meta-value {
    color: var(--spec-dd-text);
}
body.spec-page-mailbox-view.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-view-meta-link {
    color: #5eead4;
}
body.spec-page-mailbox-view.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-view-body {
    background: var(--spec-dd-surface);
    color: var(--spec-dd-text);
}
body.spec-page-mailbox-view.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-view-message {
    color: var(--spec-dd-text);
}
body.spec-page-mailbox-view.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-view-attachments {
    background: rgba(15, 23, 42, 0.4);
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22)) !important;
}
body.spec-page-mailbox-view.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-view-panel .spec-mailbox-view-attach-card {
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22)) !important;
    background: var(--spec-dd-surface) !important;
}
body.spec-page-mailbox-view.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-view-file-thumb {
    background: var(--spec-dd-elevated) !important;
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.15)) !important;
}
body.spec-page-mailbox-view.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-view-attach-card > .card-footer {
    background: var(--spec-dd-elevated) !important;
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.18)) !important;
}
body.spec-page-mailbox-view.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-view-attach-name {
    color: #5eead4 !important;
}
body.spec-page-mailbox-view.spec-dashboard-dark .content.spec-ui-page .spec-mailbox-view-footer {
    background: var(--spec-dd-elevated) !important;
    border-top: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22)) !important;
}

/* Blog listing (spec-page-blog) — cards, cover image, light + dark */
body.spec-page-blog .content.spec-ui-page .spec-blog-card {
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
body.spec-page-blog:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-card:hover {
    box-shadow: 0 14px 44px rgba(15, 23, 42, 0.1);
}
body.spec-page-blog.spec-dashboard-dark .content.spec-ui-page .spec-blog-card:hover {
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.4);
}
body.spec-page-blog .content.spec-ui-page .spec-blog-avatar {
    object-fit: cover;
}
body.spec-page-blog .content.spec-ui-page .spec-blog-cover {
    margin: 0;
}
body.spec-page-blog .content.spec-ui-page .spec-blog-cover-img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    max-height: 340px;
    display: block;
}
body.spec-page-blog:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-card-header {
    background: transparent !important;
    padding-bottom: 0.5rem !important;
}
body.spec-page-blog:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-card-body {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #334155;
}
body.spec-page-blog:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-title-link {
    color: #0f172a;
}
body.spec-page-blog:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-title-link:hover {
    color: #0d9488;
}
body.spec-page-blog:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-card-footer {
    background: #f8fafc !important;
    border-top: 1px solid rgba(148, 163, 184, 0.22) !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}
body.spec-page-blog.spec-dashboard-dark .content.spec-ui-page .spec-blog-card-header {
    background: transparent !important;
    border-color: transparent !important;
    padding-bottom: 0.5rem !important;
}
body.spec-page-blog.spec-dashboard-dark .content.spec-ui-page .spec-blog-card-body {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--spec-dd-text);
    background: transparent !important;
}
body.spec-page-blog.spec-dashboard-dark .content.spec-ui-page .spec-blog-title-link {
    color: var(--spec-dd-text);
}
body.spec-page-blog.spec-dashboard-dark .content.spec-ui-page .spec-blog-title-link:hover {
    color: #5eead4;
}
body.spec-page-blog.spec-dashboard-dark .content.spec-ui-page .spec-blog-excerpt {
    color: var(--spec-dd-muted) !important;
}
body.spec-page-blog:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-excerpt {
    color: #475569;
}
body.spec-page-blog.spec-dashboard-dark .content.spec-ui-page .spec-blog-card-footer {
    background: rgba(15, 23, 42, 0.45) !important;
    border-top: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.2)) !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}
body.spec-page-blog.spec-dashboard-dark .content.spec-ui-page .spec-blog-card-footer .text-muted {
    color: var(--spec-dd-muted) !important;
}

/* Blog article detail (spec-page-blog-detail) — prose, media, sidebar, light + dark */
body.spec-page-blog-detail .content.spec-ui-page .spec-blog-detail-article {
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
body.spec-page-blog-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-detail-article:hover {
    box-shadow: 0 14px 44px rgba(15, 23, 42, 0.08);
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-article:hover {
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.35);
}
body.spec-page-blog-detail .content.spec-ui-page .spec-blog-detail-hero-img,
body.spec-page-blog-detail .content.spec-ui-page .spec-blog-detail-inline-img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    max-height: 480px;
    display: block;
}
body.spec-page-blog-detail .content.spec-ui-page .spec-blog-detail-hero .spec-blog-detail-hero-img {
    max-height: 420px;
}
body.spec-page-blog-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-detail-breadcrumb {
    background: #f1f5f9;
    --bs-breadcrumb-divider-color: #94a3b8;
}
body.spec-page-blog-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-detail-breadcrumb .breadcrumb-item a {
    color: #0d9488;
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-breadcrumb {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.2));
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-breadcrumb .breadcrumb-item,
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-breadcrumb .breadcrumb-item.active {
    color: var(--spec-dd-muted);
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-breadcrumb .breadcrumb-item a {
    color: #5eead4;
}
body.spec-page-blog-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-detail-title {
    color: #0f172a;
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-title {
    color: var(--spec-dd-text);
}
body.spec-page-blog-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-detail-deck {
    color: #475569;
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-deck {
    color: var(--spec-dd-muted);
}
body.spec-page-blog-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-detail-author-link {
    color: inherit;
}
body.spec-page-blog-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-detail-author-link:hover {
    background: #f8fafc;
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-author-link {
    color: var(--spec-dd-text);
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-author-link:hover {
    background: rgba(148, 163, 184, 0.1);
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-author-name {
    color: var(--spec-dd-text);
}
body.spec-page-blog-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-detail-time {
    color: #64748b;
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-time {
    color: var(--spec-dd-muted);
}
body.spec-page-blog-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-detail-tag {
    background: rgba(13, 148, 136, 0.12);
    color: #0f766e;
    font-weight: 500;
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-tag {
    background: rgba(45, 212, 191, 0.15);
    color: #99f6e4;
    font-weight: 500;
}
body.spec-page-blog-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-detail-body {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: #334155;
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-body {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--spec-dd-text);
}
body.spec-page-blog-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-detail-lead {
    color: #1e293b;
    font-weight: 400;
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-lead {
    color: #e2e8f0;
}
body.spec-page-blog-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-detail-caption {
    color: #64748b;
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-caption {
    color: var(--spec-dd-muted);
}
body.spec-page-blog-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-detail-quote {
    margin: 1.75rem 0;
    padding: 1.25rem 1.25rem 1.25rem 1.5rem;
    border-left: 4px solid #0d9488;
    background: #f0fdfa;
    border-radius: 0 12px 12px 0;
    color: #134e4a;
}
body.spec-page-blog-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-detail-quote-footer {
    color: #0f766e;
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-quote {
    margin: 1.75rem 0;
    padding: 1.25rem 1.25rem 1.25rem 1.5rem;
    border-left: 4px solid #2dd4bf;
    background: rgba(45, 212, 191, 0.08);
    border-radius: 0 12px 12px 0;
    color: var(--spec-dd-text);
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-quote p {
    color: var(--spec-dd-text);
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-quote-footer {
    color: var(--spec-dd-muted);
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-quote cite {
    color: #5eead4;
}
body.spec-page-blog-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-detail-footer {
    background: #f8fafc !important;
    border-top: 1px solid rgba(148, 163, 184, 0.22) !important;
}
body.spec-page-blog-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-detail-stat {
    color: #64748b;
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-footer {
    background: rgba(15, 23, 42, 0.5) !important;
    border-top: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.2)) !important;
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-stat {
    color: var(--spec-dd-muted);
}
body.spec-page-blog-detail .content.spec-ui-page .spec-blog-detail-sidebar {
    border-radius: 14px;
    overflow: hidden;
}
body.spec-page-blog-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-detail-sidebar-title,
body.spec-page-blog-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-detail-sidebar-heading {
    color: #0f172a;
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-sidebar-title,
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-sidebar-heading {
    color: var(--spec-dd-text);
}
body.spec-page-blog-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-detail-author-card {
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.2);
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-author-card {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.2));
}
body.spec-page-blog-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-detail-author-bio {
    color: #475569;
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-author-bio {
    color: var(--spec-dd-muted);
}
body.spec-page-blog-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-detail-related-link {
    color: #0f172a;
}
body.spec-page-blog-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-detail-related-link:hover {
    color: #0d9488;
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-related-link {
    color: var(--spec-dd-text);
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-related-link:hover {
    color: #5eead4;
}
body.spec-page-blog-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-blog-detail-related-excerpt {
    color: #64748b;
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-related-excerpt {
    color: var(--spec-dd-muted);
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-search-input::placeholder {
    color: rgba(148, 163, 184, 0.75);
}
body.spec-page-blog-detail.spec-dashboard-dark .content.spec-ui-page .spec-blog-detail-search-input {
    background: rgba(15, 23, 42, 0.4);
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.25));
    color: var(--spec-dd-text);
}

/* Forum listing (spec-page-forum) — search, board, thread rows, light + dark */
body.spec-page-forum .content.spec-ui-page .spec-forum-search-panel,
body.spec-page-forum .content.spec-ui-page .spec-forum-board {
    border-radius: 14px;
    overflow: hidden;
}
body.spec-page-forum:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-search-label {
    color: #0f172a;
}
body.spec-page-forum.spec-dashboard-dark .content.spec-ui-page .spec-forum-search-label {
    color: var(--spec-dd-text);
}
body.spec-page-forum:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-search-icon {
    background: #f1f5f9;
    border-color: rgba(148, 163, 184, 0.35);
    color: #64748b;
}
body.spec-page-forum.spec-dashboard-dark .content.spec-ui-page .spec-forum-search-icon {
    background: rgba(15, 23, 42, 0.65);
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.25));
    color: var(--spec-dd-muted);
}
body.spec-page-forum:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-search-input {
    border-color: rgba(148, 163, 184, 0.35);
}
body.spec-page-forum.spec-dashboard-dark .content.spec-ui-page .spec-forum-search-input {
    background: rgba(15, 23, 42, 0.35);
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.25));
    color: var(--spec-dd-text);
}
body.spec-page-forum.spec-dashboard-dark .content.spec-ui-page .spec-forum-search-input::placeholder {
    color: rgba(148, 163, 184, 0.75);
}
body.spec-page-forum:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-board-header {
    background: #f8fafc !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
}
body.spec-page-forum.spec-dashboard-dark .content.spec-ui-page .spec-forum-board-header {
    background: rgba(15, 23, 42, 0.5) !important;
    border-bottom: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.2)) !important;
}
body.spec-page-forum:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-col-head {
    color: #64748b;
    letter-spacing: 0.04em;
}
body.spec-page-forum.spec-dashboard-dark .content.spec-ui-page .spec-forum-col-head {
    color: var(--spec-dd-muted);
    letter-spacing: 0.04em;
}
body.spec-page-forum:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-category-bar {
    background: linear-gradient(90deg, rgba(13, 148, 136, 0.12), rgba(13, 148, 136, 0.04));
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
body.spec-page-forum.spec-dashboard-dark .content.spec-ui-page .spec-forum-category-bar {
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.12), rgba(45, 212, 191, 0.03));
    border-bottom: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.18));
}
body.spec-page-forum:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-category-label {
    color: #0f766e;
    letter-spacing: 0.06em;
}
body.spec-page-forum.spec-dashboard-dark .content.spec-ui-page .spec-forum-category-label {
    color: #5eead4;
    letter-spacing: 0.06em;
}
body.spec-page-forum:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-thread-row {
    color: inherit;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    transition: background 0.15s ease;
}
body.spec-page-forum:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-thread-row:hover {
    background: #f8fafc;
}
body.spec-page-forum.spec-dashboard-dark .content.spec-ui-page .spec-forum-thread-row {
    border-bottom: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.15));
    transition: background 0.15s ease;
}
body.spec-page-forum.spec-dashboard-dark .content.spec-ui-page .spec-forum-thread-row:hover {
    background: rgba(148, 163, 184, 0.06);
}
body.spec-page-forum:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-thread-title {
    color: #0f172a;
}
body.spec-page-forum.spec-dashboard-dark .content.spec-ui-page .spec-forum-thread-title {
    color: var(--spec-dd-text);
}
body.spec-page-forum:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-thread-row:hover .spec-forum-thread-title {
    color: #0d9488;
}
body.spec-page-forum.spec-dashboard-dark .content.spec-ui-page .spec-forum-thread-row:hover .spec-forum-thread-title {
    color: #5eead4;
}
body.spec-page-forum:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-thread-excerpt {
    color: #64748b;
}
body.spec-page-forum.spec-dashboard-dark .content.spec-ui-page .spec-forum-thread-excerpt {
    color: var(--spec-dd-muted);
}
body.spec-page-forum:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-stat-value {
    font-weight: 700;
    font-size: 1.125rem;
    color: #0f172a;
}
body.spec-page-forum.spec-dashboard-dark .content.spec-ui-page .spec-forum-stat-value {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--spec-dd-text);
}
body.spec-page-forum:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-stat-label {
    color: #94a3b8;
}
body.spec-page-forum.spec-dashboard-dark .content.spec-ui-page .spec-forum-stat-label {
    color: var(--spec-dd-muted);
}
body.spec-page-forum:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-activity-time {
    color: #475569;
}
body.spec-page-forum.spec-dashboard-dark .content.spec-ui-page .spec-forum-activity-time {
    color: var(--spec-dd-muted);
}
body.spec-page-forum:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-activity-by {
    color: #64748b;
}
body.spec-page-forum.spec-dashboard-dark .content.spec-ui-page .spec-forum-activity-by {
    color: var(--spec-dd-muted);
}
body.spec-page-forum:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-activity-author {
    color: #0d9488;
    font-weight: 600;
}
body.spec-page-forum.spec-dashboard-dark .content.spec-ui-page .spec-forum-activity-author {
    color: #5eead4;
    font-weight: 600;
}

/* Forum thread detail (spec-page-forum-detail) — original post, replies, reply form */
body.spec-page-forum-detail .content.spec-ui-page .spec-forum-thread-panel.forum-box > .card-header.spec-forum-thread-toolbar {
    background: transparent !important;
    border: 0 !important;
    font-size: inherit;
}
body.spec-page-forum-detail .content.spec-ui-page .spec-forum-thread-panel.forum-box .card-body.spec-forum-op-body {
    border-bottom: none !important;
}
body.spec-page-forum-detail .content.spec-ui-page .spec-forum-thread-panel {
    border-radius: 14px;
    overflow: hidden;
}
body.spec-page-forum-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-breadcrumb {
    background: #f1f5f9;
    --bs-breadcrumb-divider-color: #94a3b8;
}
body.spec-page-forum-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-breadcrumb .breadcrumb-item a {
    color: #0d9488;
}
body.spec-page-forum-detail.spec-dashboard-dark .content.spec-ui-page .spec-forum-breadcrumb {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.2));
}
body.spec-page-forum-detail.spec-dashboard-dark .content.spec-ui-page .spec-forum-breadcrumb .breadcrumb-item,
body.spec-page-forum-detail.spec-dashboard-dark .content.spec-ui-page .spec-forum-breadcrumb .breadcrumb-item.active {
    color: var(--spec-dd-muted);
}
body.spec-page-forum-detail.spec-dashboard-dark .content.spec-ui-page .spec-forum-breadcrumb .breadcrumb-item a {
    color: #5eead4;
}
body.spec-page-forum-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-last-mod {
    color: #64748b;
}
body.spec-page-forum-detail.spec-dashboard-dark .content.spec-ui-page .spec-forum-last-mod {
    color: var(--spec-dd-muted);
}
body.spec-page-forum-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-op-body {
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}
body.spec-page-forum-detail.spec-dashboard-dark .content.spec-ui-page .spec-forum-op-body {
    border-top: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.15));
}
body.spec-page-forum-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-user-name {
    color: #0f172a;
}
body.spec-page-forum-detail.spec-dashboard-dark .content.spec-ui-page .spec-forum-user-name {
    color: var(--spec-dd-text);
}
body.spec-page-forum-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-user-date {
    color: #64748b;
}
body.spec-page-forum-detail.spec-dashboard-dark .content.spec-ui-page .spec-forum-user-date {
    color: var(--spec-dd-muted);
}
body.spec-page-forum-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-op-title {
    color: #0f172a;
}
body.spec-page-forum-detail.spec-dashboard-dark .content.spec-ui-page .spec-forum-op-title {
    color: var(--spec-dd-text);
}
body.spec-page-forum-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-prose {
    font-size: 1rem;
    line-height: 1.7;
    color: #334155;
}
body.spec-page-forum-detail.spec-dashboard-dark .content.spec-ui-page .spec-forum-prose {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--spec-dd-text);
}
body.spec-page-forum-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-signature {
    color: #64748b;
    margin-top: 1rem !important;
}
body.spec-page-forum-detail.spec-dashboard-dark .content.spec-ui-page .spec-forum-signature {
    color: var(--spec-dd-muted);
    margin-top: 1rem !important;
}
body.spec-page-forum-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-replies-title {
    color: #0f172a;
}
body.spec-page-forum-detail.spec-dashboard-dark .content.spec-ui-page .spec-forum-replies-title {
    color: var(--spec-dd-text);
}
body.spec-page-forum-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-replies-count {
    color: #64748b;
    font-weight: 500;
}
body.spec-page-forum-detail.spec-dashboard-dark .content.spec-ui-page .spec-forum-replies-count {
    color: var(--spec-dd-muted);
    font-weight: 500;
}
body.spec-page-forum-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-reply-card {
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: #fff;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
body.spec-page-forum-detail.spec-dashboard-dark .content.spec-ui-page .spec-forum-reply-card {
    border-radius: 12px;
    border: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.2));
    background: rgba(15, 23, 42, 0.35);
    box-shadow: none;
}
body.spec-page-forum-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-reply-author {
    color: #0f172a;
}
body.spec-page-forum-detail.spec-dashboard-dark .content.spec-ui-page .spec-forum-reply-author {
    color: var(--spec-dd-text);
}
body.spec-page-forum-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-reply-time {
    color: #94a3b8;
}
body.spec-page-forum-detail.spec-dashboard-dark .content.spec-ui-page .spec-forum-reply-time {
    color: var(--spec-dd-muted);
}
body.spec-page-forum-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-reply-body {
    color: #475569;
    line-height: 1.6;
}
body.spec-page-forum-detail.spec-dashboard-dark .content.spec-ui-page .spec-forum-reply-body {
    color: var(--spec-dd-muted);
    line-height: 1.6;
}
body.spec-page-forum-detail .content.spec-ui-page .spec-forum-compose {
    border-radius: 14px;
    overflow: hidden;
}
body.spec-page-forum-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-compose-title {
    color: #0f172a;
}
body.spec-page-forum-detail.spec-dashboard-dark .content.spec-ui-page .spec-forum-compose-title {
    color: var(--spec-dd-text);
}
body.spec-page-forum-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-compose-hint {
    color: #64748b;
}
body.spec-page-forum-detail.spec-dashboard-dark .content.spec-ui-page .spec-forum-compose-hint {
    color: var(--spec-dd-muted);
}
body.spec-page-forum-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-reply-label {
    color: #334155;
}
body.spec-page-forum-detail.spec-dashboard-dark .content.spec-ui-page .spec-forum-reply-label {
    color: var(--spec-dd-text);
}
body.spec-page-forum-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-reply-textarea {
    border-radius: 10px;
    border-color: rgba(148, 163, 184, 0.35);
    min-height: 140px;
    resize: vertical;
}
body.spec-page-forum-detail.spec-dashboard-dark .content.spec-ui-page .spec-forum-reply-textarea {
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.4);
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.28));
    color: var(--spec-dd-text);
    min-height: 140px;
    resize: vertical;
}
body.spec-page-forum-detail.spec-dashboard-dark .content.spec-ui-page .spec-forum-reply-textarea::placeholder {
    color: rgba(148, 163, 184, 0.7);
}
body.spec-page-forum-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-reply-actions {
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
}
body.spec-page-forum-detail.spec-dashboard-dark .content.spec-ui-page .spec-forum-reply-actions {
    padding-top: 1rem;
    border-top: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22));
}
body.spec-page-forum-detail:not(.spec-dashboard-dark) .content.spec-ui-page .spec-forum-reply-actions-hint {
    color: #64748b;
}
body.spec-page-forum-detail.spec-dashboard-dark .content.spec-ui-page .spec-forum-reply-actions-hint {
    color: var(--spec-dd-muted);
}

/* File manager (spec-page-file-manager) — dropzone, sidebar, file tiles */
body.spec-page-file-manager .content.spec-ui-page .spec-fm-dropzone.dropzone {
    border: 2px dashed rgba(13, 148, 136, 0.45);
    border-radius: 14px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(241, 245, 249, 0.65);
    transition: border-color 0.2s ease, background 0.2s ease;
}
body.spec-page-file-manager .content.spec-ui-page .spec-fm-dropzone.dropzone:hover,
body.spec-page-file-manager .content.spec-ui-page .spec-fm-dropzone.dropzone.dz-drag-hover {
    border-color: #0d9488;
    background: rgba(240, 253, 250, 0.9);
}
body.spec-page-file-manager.spec-dashboard-dark .content.spec-ui-page .spec-fm-dropzone.dropzone {
    border-color: rgba(45, 212, 191, 0.35);
    background: rgba(15, 23, 42, 0.55);
}
body.spec-page-file-manager.spec-dashboard-dark .content.spec-ui-page .spec-fm-dropzone.dropzone:hover,
body.spec-page-file-manager.spec-dashboard-dark .content.spec-ui-page .spec-fm-dropzone.dropzone.dz-drag-hover {
    border-color: #5eead4;
    background: rgba(30, 41, 59, 0.65);
}
body.spec-page-file-manager .content.spec-ui-page .spec-fm-dropzone-icon {
    margin-bottom: 0.75rem;
}
body.spec-page-file-manager .content.spec-ui-page .spec-fm-dropzone-icon i {
    font-size: 2.75rem;
    line-height: 1;
}
body.spec-page-file-manager:not(.spec-dashboard-dark) .content.spec-ui-page .spec-fm-dropzone-icon i {
    color: #0d9488;
    opacity: 0.85;
}
body.spec-page-file-manager.spec-dashboard-dark .content.spec-ui-page .spec-fm-dropzone-icon i {
    color: #5eead4;
    opacity: 0.9;
}
body.spec-page-file-manager:not(.spec-dashboard-dark) .content.spec-ui-page .spec-fm-dropzone-title {
    color: #0f172a;
    font-weight: 600;
}
body.spec-page-file-manager.spec-dashboard-dark .content.spec-ui-page .spec-fm-dropzone-title {
    color: var(--spec-dd-text);
    font-weight: 600;
}
body.spec-page-file-manager:not(.spec-dashboard-dark) .content.spec-ui-page .spec-fm-dropzone-sub {
    color: #64748b;
}
body.spec-page-file-manager.spec-dashboard-dark .content.spec-ui-page .spec-fm-dropzone-sub {
    color: var(--spec-dd-muted);
}
body.spec-page-file-manager.spec-dashboard-dark .content.spec-ui-page ul.h-list li.active > a {
    background: rgba(45, 212, 191, 0.12) !important;
    color: #5eead4 !important;
    border-radius: 8px;
}
body.spec-page-file-manager:not(.spec-dashboard-dark) .content.spec-ui-page ul.h-list li.active > a {
    background: rgba(13, 148, 136, 0.1) !important;
    color: #0f766e !important;
    border-radius: 8px;
}
body.spec-page-file-manager.spec-dashboard-dark .content.spec-ui-page ul.h-list li > a {
    color: var(--spec-dd-muted);
    border-radius: 6px;
}
body.spec-page-file-manager.spec-dashboard-dark .content.spec-ui-page ul.h-list li > a:hover {
    background: rgba(148, 163, 184, 0.08);
    color: var(--spec-dd-text);
}
body.spec-page-file-manager.spec-dashboard-dark .content.spec-ui-page .spec-fm-storage-title {
    color: var(--spec-dd-text);
}
body.spec-page-file-manager.spec-dashboard-dark .content.spec-ui-page .spec-fm-storage-panel p,
body.spec-page-file-manager.spec-dashboard-dark .content.spec-ui-page .spec-fm-storage-panel small {
    color: var(--spec-dd-muted);
}
body.spec-page-file-manager.spec-dashboard-dark .content.spec-ui-page .col-md-9 .row > .col-md-3 > .specpanel > .card-body.file-body {
    background: rgba(15, 23, 42, 0.45) !important;
    border-radius: 12px 12px 0 0;
}
body.spec-page-file-manager.spec-dashboard-dark .content.spec-ui-page .col-md-9 .row > .col-md-3 > .specpanel > .card-footer {
    background: rgba(15, 23, 42, 0.65) !important;
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.2)) !important;
    border-radius: 0 0 12px 12px;
}
body.spec-page-file-manager.spec-dashboard-dark .content.spec-ui-page .col-md-9 .row > .col-md-3 > .specpanel > .card-footer a {
    color: #e2e8f0 !important;
    font-weight: 500;
}
body.spec-page-file-manager.spec-dashboard-dark .content.spec-ui-page .col-md-9 .row > .col-md-3 > .specpanel > .card-footer a:hover {
    color: #5eead4 !important;
}
body.spec-page-file-manager:not(.spec-dashboard-dark) .content.spec-ui-page .col-md-9 .row > .col-md-3 > .specpanel > .card-footer a {
    color: #0f172a;
    font-weight: 500;
}
body.spec-page-file-manager:not(.spec-dashboard-dark) .content.spec-ui-page .col-md-9 .row > .col-md-3 > .specpanel > .card-footer a:hover {
    color: #0d9488;
}

/* Search view (spec-page-search) — hero search, filters, result list + hover */
body.spec-page-search .content.spec-ui-page .spec-search-bar-panel,
body.spec-page-search .content.spec-ui-page .spec-search-filters-panel {
    border-radius: 14px;
    overflow: hidden;
}
body.spec-page-search:not(.spec-dashboard-dark) .content.spec-ui-page .spec-search-bar-label {
    color: #0f172a;
}
body.spec-page-search.spec-dashboard-dark .content.spec-ui-page .spec-search-bar-label {
    color: var(--spec-dd-text);
}
body.spec-page-search.spec-dashboard-dark .content.spec-ui-page .spec-search-hero-input {
    background: rgba(15, 23, 42, 0.4);
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.25));
    color: var(--spec-dd-text);
}
body.spec-page-search.spec-dashboard-dark .content.spec-ui-page .spec-search-hero-input::placeholder {
    color: rgba(148, 163, 184, 0.75);
}
body.spec-page-search:not(.spec-dashboard-dark) .content.spec-ui-page .spec-search-filters-title {
    color: #0f172a;
}
body.spec-page-search.spec-dashboard-dark .content.spec-ui-page .spec-search-filters-title {
    color: var(--spec-dd-text);
}
body.spec-page-search:not(.spec-dashboard-dark) .content.spec-ui-page .spec-search-filters-lead {
    color: #64748b;
}
body.spec-page-search.spec-dashboard-dark .content.spec-ui-page .spec-search-filters-lead {
    color: var(--spec-dd-muted);
}
body.spec-page-search:not(.spec-dashboard-dark) .content.spec-ui-page .spec-search-meta-q,
body.spec-page-search:not(.spec-dashboard-dark) .content.spec-ui-page .spec-search-meta-date {
    color: #64748b;
}
body.spec-page-search.spec-dashboard-dark .content.spec-ui-page .spec-search-meta-q,
body.spec-page-search.spec-dashboard-dark .content.spec-ui-page .spec-search-meta-date {
    color: var(--spec-dd-muted);
}
body.spec-page-search .content.spec-ui-page .spec-search-results-stack .spec-search-hit {
    margin-bottom: 0.75rem;
    border-radius: 12px;
    overflow: hidden;
}
body.spec-page-search .content.spec-ui-page .spec-search-hit .spec-search-hit-link {
    color: inherit;
    display: block;
}
body.spec-page-search:not(.spec-dashboard-dark) .content.spec-ui-page .spec-search-hit .spec-search-hit-body {
    background: #fff !important;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 12px;
    padding: 1rem 1.25rem !important;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
body.spec-page-search:not(.spec-dashboard-dark) .content.spec-ui-page .spec-search-hit:hover .spec-search-hit-body,
body.spec-page-search:not(.spec-dashboard-dark) .content.spec-ui-page .spec-search-hit .spec-search-hit-link:focus-visible .spec-search-hit-body {
    background: #f8fafc !important;
    border-color: rgba(13, 148, 136, 0.35);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}
body.spec-page-search.spec-dashboard-dark .content.spec-ui-page .spec-search-hit .spec-search-hit-body {
    background: rgba(15, 23, 42, 0.55) !important;
    border: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.2));
    border-radius: 12px;
    padding: 1rem 1.25rem !important;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
body.spec-page-search.spec-dashboard-dark .content.spec-ui-page .spec-search-hit:hover .spec-search-hit-body,
body.spec-page-search.spec-dashboard-dark .content.spec-ui-page .spec-search-hit .spec-search-hit-link:focus-visible .spec-search-hit-body {
    background: rgba(30, 41, 59, 0.92) !important;
    border-color: rgba(45, 212, 191, 0.4);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
body.spec-page-search:not(.spec-dashboard-dark) .content.spec-ui-page .spec-search-hit-name {
    color: #0f172a !important;
}
body.spec-page-search.spec-dashboard-dark .content.spec-ui-page .spec-search-hit-name {
    color: var(--spec-dd-text) !important;
}
body.spec-page-search:not(.spec-dashboard-dark) .content.spec-ui-page .spec-search-hit-snippet {
    color: #475569 !important;
}
body.spec-page-search.spec-dashboard-dark .content.spec-ui-page .spec-search-hit-snippet {
    color: var(--spec-dd-muted) !important;
}
body.spec-page-search:not(.spec-dashboard-dark) .content.spec-ui-page .spec-search-hit-snippet strong {
    color: #0f172a;
}
body.spec-page-search.spec-dashboard-dark .content.spec-ui-page .spec-search-hit-snippet strong {
    color: #e2e8f0;
}
body.spec-page-search:not(.spec-dashboard-dark) .content.spec-ui-page .spec-search-action-icon {
    color: #94a3b8;
    margin-left: 0.5rem;
    transition: color 0.15s ease;
}
body.spec-page-search.spec-dashboard-dark .content.spec-ui-page .spec-search-action-icon {
    color: var(--spec-dd-muted);
    margin-left: 0.5rem;
    transition: color 0.15s ease;
}
body.spec-page-search:not(.spec-dashboard-dark) .content.spec-ui-page .spec-search-hit:hover .spec-search-action-icon {
    color: #0d9488;
}
body.spec-page-search.spec-dashboard-dark .content.spec-ui-page .spec-search-hit:hover .spec-search-action-icon {
    color: #5eead4;
}
body.spec-page-search .content.spec-ui-page .spec-search-hit:hover .card-body,
body.spec-page-search .content.spec-ui-page .spec-search-hit .card-body {
    border-bottom: 0 !important;
}

/* Calendar (spec-page-calendar) — intro + FullCalendar chrome */
body.spec-page-calendar .content.spec-ui-page .spec-cal-intro-panel,
body.spec-page-calendar .content.spec-ui-page .spec-cal-widget-panel {
    border-radius: 14px;
    overflow: hidden;
}
body.spec-page-calendar:not(.spec-dashboard-dark) .content.spec-ui-page .spec-cal-intro-title {
    color: #0f172a;
}
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page .spec-cal-intro-title {
    color: var(--spec-dd-text);
}
body.spec-page-calendar:not(.spec-dashboard-dark) .content.spec-ui-page .spec-cal-intro-text {
    color: #475569;
    line-height: 1.65;
}
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page .spec-cal-intro-text {
    color: var(--spec-dd-muted);
    line-height: 1.65;
}
body.spec-page-calendar:not(.spec-dashboard-dark) .content.spec-ui-page .spec-cal-intro-link {
    color: #0d9488;
    font-weight: 600;
}
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page .spec-cal-intro-link {
    color: #5eead4;
    font-weight: 600;
}
body.spec-page-calendar:not(.spec-dashboard-dark) .content.spec-ui-page .spec-cal-widget-title {
    color: #0f172a;
}
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page .spec-cal-widget-title {
    color: var(--spec-dd-text);
}
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page .spec-cal-widget-body {
    background: rgba(15, 23, 42, 0.25);
}
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page #calendar .fc-view-container,
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page #calendar .fc-widget-content {
    background: rgba(15, 23, 42, 0.35) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page #calendar .fc-widget-header,
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page #calendar .fc-head-container {
    background: rgba(15, 23, 42, 0.65) !important;
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.25)) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page #calendar .fc-day-header,
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page #calendar .fc-axis {
    color: var(--spec-dd-muted) !important;
}
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page #calendar .fc-day-number {
    color: var(--spec-dd-text) !important;
}
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page #calendar .fc-today {
    background: rgba(45, 212, 191, 0.12) !important;
}
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page #calendar td.fc-state-highlight {
    background: rgba(45, 212, 191, 0.18) !important;
}
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page #calendar .fc-border-separate tbody {
    background: transparent !important;
}
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page #calendar .fc-button {
    background: rgba(15, 23, 42, 0.6) !important;
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.3)) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page #calendar .fc-state-active,
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page #calendar .fc-state-down {
    background: rgba(13, 148, 136, 0.45) !important;
    border-color: #0d9488 !important;
    color: #fff !important;
}
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page #calendar .fc-event,
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page #calendar .fc-event .fc-event-inner {
    background-color: #0d9488 !important;
    border-color: #0f766e !important;
    color: #fff !important;
}
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page #calendar .fc-event-time,
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page #calendar .fc-event-title {
    color: #fff !important;
}
body.spec-page-calendar .content.spec-ui-page .spec-cal-form-panel {
    border-radius: 14px;
    overflow: hidden;
}
body.spec-page-calendar:not(.spec-dashboard-dark) .content.spec-ui-page .spec-cal-form-title {
    color: #0f172a;
}
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page .spec-cal-form-title {
    color: var(--spec-dd-text);
}
body.spec-page-calendar:not(.spec-dashboard-dark) .content.spec-ui-page .spec-cal-form-body .form-label {
    color: #334155;
}
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page .spec-cal-form-body .form-label {
    color: var(--spec-dd-text);
}
body.spec-page-calendar:not(.spec-dashboard-dark) .content.spec-ui-page .spec-cal-optional {
    color: #64748b;
}
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page .spec-cal-optional {
    color: var(--spec-dd-muted);
}
body.spec-page-calendar:not(.spec-dashboard-dark) .content.spec-ui-page .spec-cal-allday-label {
    color: #475569;
}
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page .spec-cal-allday-label {
    color: var(--spec-dd-muted);
}
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page .spec-cal-form-control {
    background: rgba(15, 23, 42, 0.4);
    border-color: var(--spec-ui-demo-border, rgba(148, 163, 184, 0.28));
    color: var(--spec-dd-text);
}
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page .spec-cal-form-control::placeholder {
    color: rgba(148, 163, 184, 0.65);
}
body.spec-page-calendar:not(.spec-dashboard-dark) .content.spec-ui-page .spec-cal-form-hint {
    color: #64748b;
}
body.spec-page-calendar.spec-dashboard-dark .content.spec-ui-page .spec-cal-form-hint {
    color: var(--spec-dd-muted);
}

/* Invoice (spec-page-invoice) — document + toolbar */
body.spec-page-invoice .content.spec-ui-page .spec-invoice-shell-panel {
    border-radius: 14px;
    overflow: hidden;
}
body.spec-page-invoice:not(.spec-dashboard-dark) .content.spec-ui-page .spec-invoice-toolbar {
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
body.spec-page-invoice.spec-dashboard-dark .content.spec-ui-page .spec-invoice-toolbar {
    border-bottom: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.2));
}
body.spec-page-invoice:not(.spec-dashboard-dark) .content.spec-ui-page .spec-invoice-toolbar-title {
    color: #0f172a;
}
body.spec-page-invoice.spec-dashboard-dark .content.spec-ui-page .spec-invoice-toolbar-title {
    color: var(--spec-dd-text);
}
body.spec-page-invoice.spec-dashboard-dark .content.spec-ui-page .spec-invoice-num {
    color: var(--spec-dd-muted) !important;
}
body.spec-page-invoice.spec-dashboard-dark .content.spec-ui-page .invoice.spec-invoice-doc {
    background: rgba(15, 23, 42, 0.5) !important;
    border: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.22));
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}
body.spec-page-invoice.spec-dashboard-dark .content.spec-ui-page .invoice.spec-invoice-doc header section:nth-of-type(1) h1 {
    color: var(--spec-dd-text) !important;
}
body.spec-page-invoice.spec-dashboard-dark .content.spec-ui-page .invoice.spec-invoice-doc header section:nth-of-type(1) span,
body.spec-page-invoice.spec-dashboard-dark .content.spec-ui-page .invoice.spec-invoice-doc header section:nth-of-type(2) span {
    color: var(--spec-dd-muted) !important;
}
body.spec-page-invoice.spec-dashboard-dark .content.spec-ui-page .invoice.spec-invoice-doc main {
    border-color: rgba(148, 163, 184, 0.28) !important;
}
body.spec-page-invoice.spec-dashboard-dark .content.spec-ui-page .invoice.spec-invoice-doc main section span {
    color: var(--spec-dd-text) !important;
}
body.spec-page-invoice.spec-dashboard-dark .content.spec-ui-page .invoice.spec-invoice-doc main section:nth-of-type(1) span {
    color: var(--spec-dd-muted) !important;
}

/* Gallery (spec-page-gallery) — grid, captions, lightbox tiles, light + dark */
body.spec-page-gallery .content.spec-ui-page .spec-gallery-panel {
    border-radius: 14px;
    overflow: hidden;
}
body.spec-page-gallery:not(.spec-dashboard-dark) .content.spec-ui-page .spec-gallery-album-title {
    color: #0f172a;
}
body.spec-page-gallery.spec-dashboard-dark .content.spec-ui-page .spec-gallery-album-title {
    color: var(--spec-dd-text);
}
body.spec-page-gallery:not(.spec-dashboard-dark) .content.spec-ui-page .spec-gallery-lead {
    color: #64748b;
}
body.spec-page-gallery.spec-dashboard-dark .content.spec-ui-page .spec-gallery-lead {
    color: var(--spec-dd-muted);
}
body.spec-page-gallery .content.spec-ui-page .spec-gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1;
    background: rgba(148, 163, 184, 0.12);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
body.spec-page-gallery:not(.spec-dashboard-dark) .content.spec-ui-page .spec-gallery-link:hover .spec-gallery-item,
body.spec-page-gallery:not(.spec-dashboard-dark) .content.spec-ui-page .spec-gallery-link:focus-visible .spec-gallery-item {
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
    transform: translateY(-2px);
}
body.spec-page-gallery.spec-dashboard-dark .content.spec-ui-page .spec-gallery-link:hover .spec-gallery-item,
body.spec-page-gallery.spec-dashboard-dark .content.spec-ui-page .spec-gallery-link:focus-visible .spec-gallery-item {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
    transform: translateY(-2px);
}
body.spec-page-gallery .content.spec-ui-page .spec-gallery-link:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 3px;
    border-radius: 14px;
}
body.spec-page-gallery.spec-dashboard-dark .content.spec-ui-page .spec-gallery-link:focus-visible {
    outline-color: #5eead4;
}
body.spec-page-gallery .content.spec-ui-page .spec-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}
body.spec-page-gallery .content.spec-ui-page .spec-gallery-link:hover .spec-gallery-img {
    transform: scale(1.06);
}
body.spec-page-gallery .content.spec-ui-page .spec-gallery-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 1.75rem 0.875rem 0.65rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    color: #fff;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.2) 55%, transparent 100%);
    pointer-events: none;
}
body.spec-page-gallery .content.spec-ui-page a.spec-gallery-link.thumbnail {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: block;
}
body.spec-page-gallery:not(.spec-dashboard-dark) .content.spec-ui-page .spec-gallery-footer {
    background: #f8fafc !important;
    border-top: 1px solid rgba(148, 163, 184, 0.22) !important;
}
body.spec-page-gallery.spec-dashboard-dark .content.spec-ui-page .spec-gallery-footer {
    background: rgba(15, 23, 42, 0.5) !important;
    border-top: 1px solid var(--spec-ui-demo-border, rgba(148, 163, 184, 0.2)) !important;
}
body.spec-page-gallery:not(.spec-dashboard-dark) .content.spec-ui-page .spec-gallery-footer-text {
    color: #64748b;
}
body.spec-page-gallery.spec-dashboard-dark .content.spec-ui-page .spec-gallery-footer-text {
    color: var(--spec-dd-muted);
}

/* Tables */
body.spec-dashboard-home .content.spec-ui-page .table {
    color: inherit;
    --bs-table-color: inherit;
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--spec-ui-demo-border);
}
body.spec-dashboard-home .content.spec-ui-page .table > thead > tr > th {
    background: var(--spec-ui-demo-table-head);
    border-bottom-width: 1px;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: inherit;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .table > thead > tr > th {
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .table > tbody > tr > td,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .table > tbody > tr > th {
    color: var(--spec-dd-text) !important;
    border-color: var(--spec-ui-demo-border) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .table > tbody > tr > td a:not(.btn) {
    color: #5eead4;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .table.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(148, 163, 184, 0.06);
    color: var(--spec-dd-text);
}
body.spec-dashboard-home .content.spec-ui-page .table-hover > tbody > tr:hover > * {
    --bs-table-hover-bg: rgba(56, 189, 248, 0.08);
}

/* List groups (main content demos) */
body.spec-dashboard-home .content.spec-ui-page .list-group-item {
    background: transparent;
    border-color: var(--spec-ui-demo-border);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .list-group-item {
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .list-group-item .text-muted,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .list-group-item small {
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .list-group-item:hover {
    background: rgba(148, 163, 184, 0.08) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .list-group-item.active {
    background: rgba(45, 212, 191, 0.15) !important;
    border-color: rgba(45, 212, 191, 0.35) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .list-header,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .list-group-item.list-header {
    background: var(--spec-dd-elevated) !important;
    color: var(--spec-dd-muted) !important;
}

/* Forced utility demos — dark readable */
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .text-dark {
    color: var(--spec-dd-text) !important;
}

/* Code & pre */
body.spec-dashboard-home .content.spec-ui-page pre,
body.spec-dashboard-home .content.spec-ui-page .editorheight {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    padding: 1rem 1.1rem;
    border-radius: 10px;
    border: 1px solid var(--spec-ui-demo-border);
    background: var(--spec-ui-demo-code-bg);
    color: inherit;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page pre,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .editorheight {
    color: var(--spec-dd-text) !important;
    background: var(--spec-dd-elevated) !important;
    border-color: var(--spec-ui-demo-border) !important;
}

/* Code editor page — Live Editor chrome */
body.spec-dashboard-home .content.spec-ui-page .spec-ui-live-editor {
    max-width: 100%;
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-live-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--spec-ui-demo-border);
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-live-editor-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.35rem 0;
    color: #0f172a;
    letter-spacing: -0.02em;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-live-editor-title {
    color: var(--spec-dd-text);
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-live-editor-lead {
    margin: 0;
    font-size: 0.875rem;
    color: #64748b;
    max-width: 42rem;
    line-height: 1.5;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-live-editor-lead {
    color: var(--spec-dd-muted);
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-live-editor-kbd {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
    font-family: ui-monospace, monospace;
    border-radius: 4px;
    border: 1px solid var(--spec-ui-demo-border);
    background: var(--spec-ui-demo-code-bg);
    color: #475569;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-live-editor-kbd {
    background: var(--spec-dd-surface);
    color: var(--spec-dd-muted);
    border-color: var(--spec-ui-demo-border);
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-live-editor-label {
    display: block;
    margin-bottom: 0.45rem;
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-live-editor-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid transparent;
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-live-editor-tag--html {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-live-editor-tag--css {
    color: #1d4ed8;
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.28);
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-live-editor-tag--js {
    color: #a16207;
    background: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.35);
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-live-editor-tag--preview {
    color: #0f766e;
    background: rgba(45, 212, 191, 0.12);
    border-color: rgba(45, 212, 191, 0.3);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-live-editor-tag--html {
    color: #fca5a5;
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.28);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-live-editor-tag--css {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(96, 165, 250, 0.35);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-live-editor-tag--js {
    color: #fde047;
    background: rgba(234, 179, 8, 0.1);
    border-color: rgba(250, 204, 21, 0.28);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-live-editor-tag--preview {
    color: #5eead4;
    background: rgba(45, 212, 191, 0.1);
    border-color: rgba(45, 212, 191, 0.28);
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-live-editor .editorheight {
    min-height: 220px;
    width: 100%;
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-live-editor .editorheight:focus {
    border-color: rgba(45, 212, 191, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.2);
    outline: none;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-live-editor .editorheight:focus {
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.18);
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-live-editor-preview {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--spec-ui-demo-border);
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-live-editor-preview-frame {
    border: 1px solid var(--spec-ui-demo-border);
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 24px rgba(15, 23, 42, 0.06);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-live-editor-preview-frame {
    background: #0b1220;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 32px rgba(0, 0, 0, 0.35);
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-live-preview-iframe {
    display: block;
    width: 100%;
    min-height: 300px;
    height: 360px;
    border: 0;
    background: #fff;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-live-preview-iframe {
    background: #fff;
}

body.spec-dashboard-home .content.spec-ui-page code:not([class*="language-"]) {
    padding: 0.15em 0.4em;
    border-radius: 6px;
    background: var(--spec-ui-demo-code-bg);
    border: 1px solid var(--spec-ui-demo-border);
    font-size: 0.9em;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page code:not([class*="language-"]) {
    background: var(--spec-dd-elevated);
    color: #a5f3fc;
    border-color: var(--spec-ui-demo-border);
}

/* Nestable */
body.spec-dashboard-home .content.spec-ui-page .dd-handle {
    background: var(--spec-ui-demo-table-head) !important;
    border: 1px solid var(--spec-ui-demo-border) !important;
    color: inherit !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .dd-handle {
    background: var(--spec-dd-elevated) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home .content.spec-ui-page .dd-list {
    border-color: var(--spec-ui-demo-border) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .dd-placeholder {
    background: rgba(45, 212, 191, 0.12) !important;
    border: 1px dashed rgba(45, 212, 191, 0.45) !important;
}
body.spec-dashboard-home .content.spec-ui-page #nestable-output,
body.spec-dashboard-home .content.spec-ui-page #nestable2-output {
    min-height: 5rem;
    margin-top: 0.75rem;
}

/* Modals on dashboard-themed pages (UI demos) — header/footer/body for light + dark */
body.spec-dashboard-home:not(.spec-dashboard-dark) .modal .modal-content {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #0f172a;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .modal .modal-header {
    background: #f8fafc;
    color: #0f172a;
    border-bottom: 1px solid rgba(148, 163, 184, 0.3);
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .modal .modal-footer {
    background: #f8fafc;
    color: #0f172a;
    border-top: 1px solid rgba(148, 163, 184, 0.3);
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .modal .modal-title {
    color: #0f172a;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .modal .modal-header small {
    color: #64748b;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .modal .modal-body {
    color: #334155;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .modal .spec-modal-close {
    color: #64748b;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .modal .spec-modal-close:hover {
    color: #0f172a;
}

body.spec-dashboard-home.spec-dashboard-dark .modal .modal-content {
    background: var(--spec-dd-surface);
    border: 1px solid var(--spec-panel-card-border);
    color: var(--spec-dd-text);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
body.spec-dashboard-home.spec-dashboard-dark .modal .modal-header {
    background: var(--spec-dd-elevated);
    color: var(--spec-dd-text);
    border-bottom: 1px solid var(--spec-panel-card-border);
}
body.spec-dashboard-home.spec-dashboard-dark .modal .modal-footer {
    background: var(--spec-dd-elevated);
    color: var(--spec-dd-text);
    border-top: 1px solid var(--spec-panel-card-border);
}
body.spec-dashboard-home.spec-dashboard-dark .modal .modal-title {
    color: var(--spec-dd-text);
}
body.spec-dashboard-home.spec-dashboard-dark .modal .modal-header small {
    color: var(--spec-dd-muted);
}
body.spec-dashboard-home.spec-dashboard-dark .modal .modal-body {
    color: var(--spec-dd-text);
}
body.spec-dashboard-home.spec-dashboard-dark .modal .spec-modal-close {
    color: var(--spec-dd-muted);
}
body.spec-dashboard-home.spec-dashboard-dark .modal .spec-modal-close:hover {
    color: #fff;
}
/* Colored header variants — keep accent titles readable on dark elevated header */
body.spec-dashboard-home.spec-dashboard-dark .modal.hmodal-info .modal-title,
body.spec-dashboard-home.spec-dashboard-dark .modal.hmodal-info h4.modal-title {
    color: #7dd3fc;
}
body.spec-dashboard-home.spec-dashboard-dark .modal.hmodal-success .modal-title,
body.spec-dashboard-home.spec-dashboard-dark .modal.hmodal-success h4.modal-title {
    color: #6ee7b7;
}
body.spec-dashboard-home.spec-dashboard-dark .modal.hmodal-warning .modal-title,
body.spec-dashboard-home.spec-dashboard-dark .modal.hmodal-warning h4.modal-title {
    color: #fcd34d;
}
body.spec-dashboard-home.spec-dashboard-dark .modal.hmodal-danger .modal-title,
body.spec-dashboard-home.spec-dashboard-dark .modal.hmodal-danger h4.modal-title {
    color: #fca5a5;
}

body.spec-dashboard-home.spec-dashboard-dark .modal .form-control,
body.spec-dashboard-home.spec-dashboard-dark .modal .form-select {
    background: var(--spec-dd-elevated);
    border-color: var(--spec-panel-card-border);
    color: var(--spec-dd-text);
}

/* Star rating (components) */
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .rating-container .caption-badge,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .rating-container .caption {
    color: var(--spec-dd-muted) !important;
}

/* Toastr — dashboard light / dark (alerts page & anywhere on spec-dashboard-home) */
body.spec-dashboard-home #toast-container > div {
    opacity: 1 !important;
    filter: none !important;
    background-image: none !important;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) #toast-container > div {
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    box-shadow: 0 10px 36px rgba(15, 23, 42, 0.12) !important;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) #toast-container .toast-title {
    color: #0f172a !important;
    font-weight: 600;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) #toast-container .toast-message {
    color: #475569 !important;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) #toast-container .toast-message a,
body.spec-dashboard-home:not(.spec-dashboard-dark) #toast-container .toast-message label {
    color: #2563eb !important;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) #toast-container .toast-close-button {
    color: #64748b !important;
    text-shadow: none !important;
    opacity: 0.85 !important;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) #toast-container .toast-close-button:hover {
    color: #0f172a !important;
    opacity: 1 !important;
}
body.spec-dashboard-home.spec-dashboard-dark #toast-container > div {
    background: var(--spec-dd-elevated) !important;
    color: var(--spec-dd-text) !important;
    border: 1px solid var(--spec-panel-card-border) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #toast-container .toast-title {
    color: #f8fafc !important;
    font-weight: 600;
}
body.spec-dashboard-home.spec-dashboard-dark #toast-container .toast-message {
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark #toast-container .toast-message a,
body.spec-dashboard-home.spec-dashboard-dark #toast-container .toast-message label {
    color: #7dd3fc !important;
}
body.spec-dashboard-home.spec-dashboard-dark #toast-container .toast-close-button {
    color: var(--spec-dd-muted) !important;
    text-shadow: none !important;
    opacity: 0.95 !important;
}
body.spec-dashboard-home.spec-dashboard-dark #toast-container .toast-close-button:hover {
    color: #fff !important;
    opacity: 1 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .toast-info {
    border-left-color: #38bdf8 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .toast-success {
    border-left-color: #34d399 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .toast-warning {
    border-left-color: #fbbf24 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .toast-error {
    border-left-color: #f87171 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .toast-info .toast-progress {
    background-color: #38bdf8 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .toast-success .toast-progress {
    background-color: #34d399 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .toast-warning .toast-progress {
    background-color: #fbbf24 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .toast-error .toast-progress {
    background-color: #f87171 !important;
}

/* SweetAlert — fix success/error icons on dark canvas + buttons; light polish */
body.spec-dashboard-home .sweet-alert .icon {
    box-sizing: content-box !important;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .sweet-overlay {
    background-color: rgba(15, 23, 42, 0.45) !important;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .sweet-alert {
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15) !important;
    color: #0f172a;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .sweet-alert h2 {
    color: #0f172a !important;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .sweet-alert p {
    color: #475569 !important;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .sweet-alert button {
    background-color: #0f172a !important;
    color: #fff !important;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .sweet-alert button:hover {
    background-color: #334155 !important;
    color: #fff !important;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .sweet-alert button.cancel {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .sweet-alert button.cancel:hover {
    background-color: #cbd5e1 !important;
}

body.spec-dashboard-home.spec-dashboard-dark .sweet-overlay {
    background-color: rgba(0, 0, 0, 0.72) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .sweet-alert {
    background: var(--spec-dd-surface) !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
    color: var(--spec-dd-text);
}
body.spec-dashboard-home.spec-dashboard-dark .sweet-alert h2 {
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .sweet-alert p {
    color: var(--spec-dd-muted) !important;
}
/* Success icon masks must match modal background (library hard-codes white) */
body.spec-dashboard-home.spec-dashboard-dark .sweet-alert .icon.success::before,
body.spec-dashboard-home.spec-dashboard-dark .sweet-alert .icon.success::after {
    background: var(--spec-dd-surface) !important;
    background-color: var(--spec-dd-surface) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .sweet-alert .icon.success .fix {
    background-color: var(--spec-dd-surface) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .sweet-alert .icon.success .line.tip,
body.spec-dashboard-home.spec-dashboard-dark .sweet-alert .icon.success .line.long {
    background-color: #86efac !important;
}
body.spec-dashboard-home.spec-dashboard-dark .sweet-alert .icon.success {
    border-color: #4ade80 !important;
}
/* Error X — keep both arms red (avoid any cross-theme bleed) */
body.spec-dashboard-home.spec-dashboard-dark .sweet-alert .icon.error {
    border-color: #f87171 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .sweet-alert .icon.error .line {
    background-color: #f87171 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .sweet-alert .icon.error .line.left,
body.spec-dashboard-home.spec-dashboard-dark .sweet-alert .icon.error .line.right {
    background-color: #f87171 !important;
}
/* Primary / confirm buttons — readable contrast */
body.spec-dashboard-home.spec-dashboard-dark .sweet-alert button {
    background-color: #0ea5e9 !important;
    color: #0f172a !important;
    font-weight: 600 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .sweet-alert button:hover {
    background-color: #38bdf8 !important;
    color: #0f172a !important;
}
body.spec-dashboard-home.spec-dashboard-dark .sweet-alert button.cancel {
    background-color: var(--spec-dd-elevated) !important;
    color: var(--spec-dd-text) !important;
    border: 1px solid var(--spec-panel-card-border) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .sweet-alert button.cancel:hover {
    background-color: rgba(148, 163, 184, 0.15) !important;
    color: #fff !important;
}

/* Icon library — grid links readable in both themes */
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .icons-box .infont a {
    color: var(--spec-dd-text);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .icons-box .infont a:hover {
    color: #5eead4;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .icons-box .infont a .text-muted {
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .font-icon-detail,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .font-icon-name {
    color: var(--spec-dd-text);
}

/* Icon library — BS5 grid: .col-* must live under .row; FA blocks omit .row, so flex the box */
body.spec-dashboard-home .content.spec-ui-page .icons-box {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 0.25rem;
}
body.spec-dashboard-home .content.spec-ui-page .icons-box > .spec-ui-icon-section,
body.spec-dashboard-home .content.spec-ui-page .icons-box > .col-12.spec-ui-icon-section {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}
body.spec-dashboard-home .content.spec-ui-page .icons-box > .row {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
body.spec-dashboard-home .content.spec-ui-page .icons-box > .infont.col-md-2 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    body.spec-dashboard-home .content.spec-ui-page .icons-box > .infont.col-md-2 {
        flex: 0 0 16.66666667%;
        max-width: 16.66666667%;
        width: 16.66666667%;
    }
}

/* Icon library page: section breathing room */
body.spec-dashboard-home .content.spec-ui-page .spec-ui-icon-section {
    margin-bottom: 2rem;
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-icon-section-title {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--spec-dd-muted, #64748b);
    margin-bottom: 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--spec-ui-demo-border);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-icon-section-title {
    color: var(--spec-dd-muted);
    border-bottom-color: var(--spec-ui-demo-border);
}

/* Draggable sortable helper */
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .ui-sortable-helper.specpanel {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* Utility borders inside demo columns */
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .border-right {
    border-right-color: var(--spec-ui-demo-border) !important;
}

/* --- UI pages: panel header controls (no stark white in dark mode) --- */
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .specpanel > .card-header .btn,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .specpanel > .card-header .btn-secondary,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .specpanel > .card-header .btn-xs {
    background: var(--spec-dd-elevated) !important;
    border-color: var(--spec-ui-demo-border) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .specpanel > .card-header .btn:hover {
    background: rgba(148, 163, 184, 0.15) !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
    color: #fff !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .specpanel > .card-header .form-control,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .specpanel > .card-header input.form-control {
    background: var(--spec-dd-elevated) !important;
    border-color: var(--spec-ui-demo-border) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .specpanel > .card-header .form-control::placeholder {
    color: var(--spec-dd-muted);
    opacity: 1;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .specpanel > .card-header .input-group .btn,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .specpanel > .card-header .input-group-btn .btn {
    background: var(--spec-dd-elevated) !important;
    border-color: var(--spec-ui-demo-border) !important;
    color: var(--spec-dd-text) !important;
}

/* Typography / body utility — Bootstrap .text-body stays dark on dark canvas */
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .text-body {
    color: var(--spec-dd-text) !important;
}

/* --- Buttons page: outline + default (secondary) on dark canvas --- */
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-secondary.btn-outline,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-outline.btn-secondary {
    color: var(--spec-dd-text) !important;
    border-color: rgba(148, 163, 184, 0.45) !important;
    background: transparent !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-secondary.btn-outline:hover,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-outline.btn-secondary:hover {
    background: rgba(148, 163, 184, 0.12) !important;
    color: #fff !important;
    border-color: rgba(226, 232, 240, 0.5) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-primary.btn-outline {
    color: #7dd3fc !important;
    border-color: #38bdf8 !important;
    background: transparent !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-primary.btn-outline:hover {
    color: #0f172a !important;
    background: #38bdf8 !important;
    border-color: #38bdf8 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-primary2.btn-outline {
    color: #d8b4fe !important;
    border-color: #a78bfa !important;
    background: transparent !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-primary2.btn-outline:hover {
    color: #1e1b4b !important;
    background: #a78bfa !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-success.btn-outline {
    color: #6ee7b7 !important;
    border-color: #34d399 !important;
    background: transparent !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-success.btn-outline:hover {
    color: #064e3b !important;
    background: #34d399 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-info.btn-outline {
    color: #7dd3fc !important;
    border-color: #0ea5e9 !important;
    background: transparent !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-info.btn-outline:hover {
    color: #0c4a6e !important;
    background: #0ea5e9 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-warning.btn-outline {
    color: #fcd34d !important;
    border-color: #fbbf24 !important;
    background: transparent !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-warning.btn-outline:hover {
    color: #422006 !important;
    background: #fbbf24 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-warning2.btn-outline {
    color: #fdba74 !important;
    border-color: #fb923c !important;
    background: transparent !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-warning2.btn-outline:hover {
    color: #431407 !important;
    background: #fb923c !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-danger.btn-outline {
    color: #fca5a5 !important;
    border-color: #f87171 !important;
    background: transparent !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-danger.btn-outline:hover {
    color: #450a0a !important;
    background: #f87171 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-danger2.btn-outline {
    color: #f87171 !important;
    border-color: #ef4444 !important;
    background: transparent !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-danger2.btn-outline:hover {
    color: #fff !important;
    background: #ef4444 !important;
}
/* Solid "Default" / secondary buttons — toned for dark UI */
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-secondary:not(.btn-outline):not(.dropdown-toggle):not(.active),
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-group > .btn-secondary:not(.btn-outline):not(.active) {
    background: var(--spec-dd-elevated) !important;
    border-color: var(--spec-ui-demo-border) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-secondary:not(.btn-outline):hover,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-group > .btn-secondary:not(.btn-outline):hover {
    background: rgba(148, 163, 184, 0.2) !important;
    color: #fff !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-secondary.dropdown-toggle:not(.btn-outline) {
    background: var(--spec-dd-elevated) !important;
    border-color: var(--spec-ui-demo-border) !important;
    color: var(--spec-dd-text) !important;
}

/* --- Components: jumbotron, wells, pager, dropdown demos --- */
body.spec-dashboard-home .content.spec-ui-page .jumbotron {
    padding: 2rem 1.75rem;
    margin-bottom: 1.5rem;
    border-radius: 14px;
    border: 1px solid var(--spec-ui-demo-border);
    background: var(--spec-ui-demo-surface);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .jumbotron {
    background: var(--spec-dd-surface);
    border-color: var(--spec-ui-demo-border);
    color: var(--spec-dd-text);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .jumbotron h1,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .jumbotron p {
    color: var(--spec-dd-text);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .jumbotron .lead {
    color: var(--spec-dd-muted) !important;
}

body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .jumbotron h1,
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .jumbotron p {
    color: #0f172a;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .jumbotron .lead {
    color: #475569 !important;
}

/* --- Components page: carousel copy (outside .card-body) — readable in both themes --- */
body.spec-dashboard-home .content.spec-ui-page .spec-ui-carousel-demo .spec-ui-carousel-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #0f172a;
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-carousel-demo .spec-ui-carousel-text {
    color: #475569;
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-carousel-demo .spec-ui-carousel-title {
    color: var(--spec-dd-text);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-carousel-demo .spec-ui-carousel-text {
    color: var(--spec-dd-muted);
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-carousel-card > .carousel .carousel-control-prev,
body.spec-dashboard-home .content.spec-ui-page .spec-ui-carousel-card > .carousel .carousel-control-next {
    width: 2.75rem;
    height: 2.75rem;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    opacity: 1;
    border-radius: 50%;
    transition: background 0.15s ease, opacity 0.15s ease;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .spec-ui-carousel-card > .carousel .carousel-control-prev,
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .spec-ui-carousel-card > .carousel .carousel-control-next {
    background: rgba(15, 23, 42, 0.06);
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .spec-ui-carousel-card > .carousel .carousel-control-prev:hover,
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .spec-ui-carousel-card > .carousel .carousel-control-next:hover {
    background: rgba(15, 23, 42, 0.11);
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .spec-ui-carousel-card > .carousel .carousel-control-prev-icon,
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .spec-ui-carousel-card > .carousel .carousel-control-next-icon {
    filter: none;
    opacity: 1;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-carousel-card > .carousel .carousel-control-prev,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-carousel-card > .carousel .carousel-control-next {
    background: rgba(255, 255, 255, 0.08);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-carousel-card > .carousel .carousel-control-prev:hover,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-carousel-card > .carousel .carousel-control-next:hover {
    background: rgba(255, 255, 255, 0.14);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-carousel-card > .carousel .carousel-control-prev-icon,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-carousel-card > .carousel .carousel-control-next-icon {
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

/* Popovers (Bootstrap portals to body) — override BS vars on .popover so arrows/header/body track theme */
body.spec-dashboard-home:not(.spec-dashboard-dark) .popover {
    --bs-popover-bg: #ffffff;
    --bs-popover-border-color: rgba(51, 65, 85, 0.16);
    --bs-popover-header-bg: #f8fafc;
    --bs-popover-header-color: #0f172a;
    --bs-popover-body-color: #334155;
    --bs-popover-header-border-color: rgba(148, 163, 184, 0.28);
    box-shadow: 0 10px 36px rgba(15, 23, 42, 0.12);
}
body.spec-dashboard-home.spec-dashboard-dark .popover {
    --bs-popover-bg: var(--spec-dd-surface);
    --bs-popover-border-color: rgba(148, 163, 184, 0.22);
    --bs-popover-header-bg: var(--spec-dd-elevated);
    --bs-popover-header-color: var(--spec-dd-text);
    --bs-popover-body-color: var(--spec-dd-text);
    --bs-popover-header-border-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45);
    color: var(--spec-dd-text);
}

/* --- Components page: Bootstrap 5 tabs inside .spec-ui-tabs-panel --- */
body.spec-dashboard-home .content.spec-ui-page .spec-ui-tabs-panel .nav-tabs {
    border-bottom: 1px solid var(--spec-ui-demo-border);
    gap: 0.25rem;
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-tabs-panel .nav-tabs .nav-link {
    border: 1px solid transparent;
    color: #64748b;
    padding: 0.55rem 1rem;
    font-weight: 500;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-tabs-panel .nav-tabs .nav-link:hover {
    color: #0f172a;
    border-color: rgba(148, 163, 184, 0.35);
    background: rgba(248, 250, 252, 0.9);
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-tabs-panel .nav-tabs .nav-link.active {
    color: #0f172a;
    background: #fff;
    border-color: var(--spec-ui-demo-border);
    border-bottom-color: #fff;
    margin-bottom: -1px;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-tabs-panel .nav-tabs .nav-link {
    color: var(--spec-dd-muted);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-tabs-panel .nav-tabs .nav-link:hover {
    color: var(--spec-dd-text);
    background: rgba(148, 163, 184, 0.08);
    border-color: var(--spec-ui-demo-border);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-tabs-panel .nav-tabs .nav-link.active {
    color: var(--spec-dd-text);
    background: var(--spec-dd-surface);
    border-color: var(--spec-ui-demo-border);
    border-bottom-color: var(--spec-dd-surface);
    margin-bottom: -1px;
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-tabs-panel .spec-ui-tab-panels {
    border-color: var(--spec-ui-demo-border) !important;
    background: transparent;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-tabs-panel .spec-ui-tab-panels .card-body {
    color: var(--spec-dd-text);
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .spec-ui-tabs-panel .spec-ui-tab-panels .card-body,
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .spec-ui-tabs-panel .spec-ui-tabs-vertical-content .card-body {
    color: #334155;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-tabs-panel .spec-ui-tabs-vertical-content .card-body {
    color: var(--spec-dd-text);
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-tabs-panel .tab-content > .tab-pane.fade:not(.show) {
    display: none !important;
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-tabs-panel .tab-content > .tab-pane.fade.show {
    display: block !important;
}

/* Vertical tab rails (left / right) */
body.spec-dashboard-home .content.spec-ui-page .spec-ui-tabs-vertical {
    min-height: 12rem;
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-tabs-vertical-nav {
    flex: 0 0 auto;
    min-width: 9rem;
    gap: 0.35rem;
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-tabs-vertical-nav .nav-link {
    border-radius: 0.5rem;
    border: 1px solid transparent;
    color: #64748b;
    padding: 0.5rem 0.75rem;
    font-weight: 500;
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-tabs-vertical-nav .nav-link:hover {
    color: #0f172a;
    background: rgba(248, 250, 252, 0.95);
    border-color: rgba(148, 163, 184, 0.35);
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-tabs-vertical-nav .nav-link.active {
    color: #0f172a;
    background: #fff;
    border-color: var(--spec-ui-demo-border);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-tabs-vertical-nav .nav-link {
    color: var(--spec-dd-muted);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-tabs-vertical-nav .nav-link:hover {
    color: var(--spec-dd-text);
    background: rgba(148, 163, 184, 0.08);
    border-color: var(--spec-ui-demo-border);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-ui-tabs-vertical-nav .nav-link.active {
    color: var(--spec-dd-text);
    background: var(--spec-dd-elevated);
    border-color: var(--spec-ui-demo-border);
    box-shadow: none;
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-tabs-vertical--start .spec-ui-tabs-vertical-content {
    border-color: var(--spec-ui-demo-border) !important;
}
body.spec-dashboard-home .content.spec-ui-page .spec-ui-tabs-vertical--end .spec-ui-tabs-vertical-content {
    border-color: var(--spec-ui-demo-border) !important;
}

/* --- Components page: dropdown row + Krajee star rating (Font Awesome, BS5 captions) --- */
body.spec-dashboard-home .content.spec-ui-components-page .spec-ui-comp-dropdown-row {
    gap: 0.65rem !important;
}
body.spec-dashboard-home .content.spec-ui-components-page .spec-ui-comp-dropdown-row .dropdown-menu {
    min-width: 11rem;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-components-page .spec-ui-comp-dropdown-row .btn-outline-secondary {
    color: var(--spec-dd-text) !important;
    border-color: rgba(148, 163, 184, 0.45) !important;
}
body.spec-dashboard-home .content.spec-ui-page.spec-ui-components-page .rating-container.rating-fa .rating-stars:before,
body.spec-dashboard-home .content.spec-ui-page.spec-ui-components-page .rating-container.rating-uni .rating-stars:before {
    text-shadow: none;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page.spec-ui-components-page .rating-container:not(.rating-container-rtl) {
    color: rgba(148, 163, 184, 0.42);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page.spec-ui-components-page .star-rating .caption {
    color: var(--spec-dd-muted);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page.spec-ui-components-page .star-rating .caption .badge.bg-secondary {
    background-color: var(--spec-dd-elevated) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home .content.spec-ui-components-page input.spec-star-rating-input.hide,
body.spec-dashboard-home .content.spec-ui-components-page input.spec-star-rating-input.form-control.hide {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --- Components page: progress bars (light + dark) --- */
body.spec-dashboard-home .content.spec-ui-page .progress {
    border-radius: 0.5rem;
    background-color: rgba(148, 163, 184, 0.22);
    border: 1px solid rgba(148, 163, 184, 0.28);
    overflow: hidden;
    min-height: 0.85rem;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .progress {
    background-color: rgba(15, 23, 42, 0.65);
    border-color: var(--spec-ui-demo-border);
}
body.spec-dashboard-home .content.spec-ui-page .progress-bar {
    border-radius: 0.35rem;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .progress:not(.full) .progress-bar.progress-bar-warning {
    background-color: #f59e0b;
    color: #1c1917;
    border-right: none;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .progress:not(.full) .progress-bar.progress-bar-success {
    background-color: #22c55e;
    color: #052e16;
    border-right: none;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .progress:not(.full) .progress-bar.progress-bar-info {
    background-color: #0ea5e9;
    color: #082f49;
    border-right: none;
}
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .progress:not(.full) .progress-bar.progress-bar-danger {
    background-color: #ef4444;
    color: #fff;
    border-right: none;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .progress:not(.full) .progress-bar.progress-bar-warning {
    background-color: #d97706;
    color: #fffbeb;
    border-right: none;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .progress:not(.full) .progress-bar.progress-bar-success {
    background-color: #16a34a;
    color: #ecfdf5;
    border-right: none;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .progress:not(.full) .progress-bar.progress-bar-info {
    background-color: #0284c7;
    color: #e0f2fe;
    border-right: none;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .progress:not(.full) .progress-bar.progress-bar-danger {
    background-color: #dc2626;
    color: #fef2f2;
    border-right: none;
}
body.spec-dashboard-home .content.spec-ui-page .progress.full .progress-bar {
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
body.spec-dashboard-home .content.spec-ui-page .progress-striped .progress-bar,
body.spec-dashboard-home .content.spec-ui-page .progress .progress-bar-striped {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.14) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0.14) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
}
@keyframes spec-ui-progress-stripes {
    from {
        background-position: 1rem 0;
    }
    to {
        background-position: 0 0;
    }
}
body.spec-dashboard-home .content.spec-ui-page .progress-striped.active .progress-bar {
    animation: spec-ui-progress-stripes 0.9s linear infinite;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .progress .progress-bar:empty {
    min-width: 0.5rem;
}
/* Default fill when only .progress-bar (no semantic variant) */
body.spec-dashboard-home:not(.spec-dashboard-dark) .content.spec-ui-page .progress > .progress-bar:not([class*="progress-bar-"]) {
    background-color: #64748b;
    color: #fff;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .progress > .progress-bar:not([class*="progress-bar-"]) {
    background-color: #94a3b8;
    color: #0f172a;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .progress.full .progress-bar-dark {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .well,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .well.well-lg,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .well.well-sm,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .well.well-xs {
    background: var(--spec-dd-elevated) !important;
    border: 1px solid var(--spec-ui-demo-border) !important;
    color: var(--spec-dd-text) !important;
    box-shadow: none !important;
}

body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .pager li > a,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .pager li > span {
    background: var(--spec-dd-elevated) !important;
    border: 1px solid var(--spec-ui-demo-border) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .pager li > a:hover {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #e0f2fe !important;
}

body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .pagination > li > a,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .pagination > li > span,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .page-link {
    background: var(--spec-dd-elevated) !important;
    border-color: var(--spec-ui-demo-border) !important;
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .pagination > .active > a,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .pagination > .active > span {
    background: rgba(45, 212, 191, 0.25) !important;
    border-color: rgba(45, 212, 191, 0.45) !important;
    color: #ccfbf1 !important;
}

/* Demo dropdown menus inside main (not header chrome) */
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .dropdown-menu {
    background: var(--spec-dd-surface) !important;
    border: 1px solid var(--spec-ui-demo-border) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .dropdown-menu > li > a,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .dropdown-item {
    color: var(--spec-dd-text) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .dropdown-menu > li > a:hover,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .dropdown-item:hover {
    background: rgba(148, 163, 184, 0.12) !important;
    color: #fff !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .dropdown-menu .text-success {
    color: #6ee7b7 !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .dropdown-menu .text-muted {
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .dropdown-divider {
    border-color: var(--spec-ui-demo-border) !important;
}

/* Thumbnail / media blocks if present */
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .thumbnail,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page a.thumbnail {
    background: var(--spec-dd-elevated) !important;
    border-color: var(--spec-ui-demo-border) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .thumbnail .caption {
    color: var(--spec-dd-text) !important;
}

/* Star rating input shell */
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page input.rating {
    background-color: transparent !important;
    color: transparent !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .rating-container {
    color: rgba(148, 163, 184, 0.35) !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .rating-container .rating-stars {
    color: #fde16d !important;
}

/* Accordion / collapse anchors inside nested cards */
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .panel-group .card .card-header a,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page #accordion .card-header a {
    color: #7dd3fc !important;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .panel-group .card .card-header a.collapsed {
    color: var(--spec-dd-muted) !important;
}

/* Active item in button groups (pagination-style) */
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .btn-group > .btn-secondary.active {
    background: rgba(45, 212, 191, 0.22) !important;
    border-color: rgba(45, 212, 191, 0.45) !important;
    color: #ecfdf5 !important;
}

/* --- Buttons page (spec-ui-buttons-page): dropdown layout (card spacing: .spec-ui-page above) --- */
body.spec-dashboard-home .content.spec-ui-buttons-page .spec-ui-drop-rows {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 0.75rem;
    align-items: flex-start;
    margin-bottom: 1.1rem;
}
body.spec-dashboard-home .content.spec-ui-buttons-page .spec-ui-drop-rows:last-child {
    margin-bottom: 0;
}
body.spec-dashboard-home .content.spec-ui-buttons-page .spec-ui-drop-rows .btn-group {
    flex: 0 0 auto;
}

/* Loose spacing for other dropdown / button-group toolbars on this page */
body.spec-dashboard-home .content.spec-ui-buttons-page .float-e-margins .btn-group {
    margin-right: 0.5rem;
    margin-bottom: 0.65rem;
    vertical-align: middle;
}
body.spec-dashboard-home .content.spec-ui-buttons-page .card-body .pad-ver.mar-btm.bord-top .btn-group {
    margin-right: 0.45rem;
    margin-bottom: 0.55rem;
    vertical-align: middle;
}
body.spec-dashboard-home .content.spec-ui-buttons-page .card-body .btn-group-vertical {
    margin-right: 0.75rem;
    margin-bottom: 0.75rem;
    vertical-align: top;
}
body.spec-dashboard-home .content.spec-ui-buttons-page .card-body .btn-group-vertical .btn-group {
    margin-right: 0;
    margin-bottom: 0;
}

/* Dropdown menu links without .dropdown-item (legacy markup) */
body.spec-dashboard-home .content.spec-ui-buttons-page .dropdown-menu > li:not(.dropdown-header) > a:not(.dropdown-item) {
    display: block;
    width: 100%;
    padding: 0.375rem 1rem;
    clear: both;
    font-weight: 400;
    text-decoration: none;
    color: inherit;
    border: 0;
    background: transparent;
}
body.spec-dashboard-home .content.spec-ui-buttons-page .dropdown-menu > li:not(.dropdown-header) > a:not(.dropdown-item):hover,
body.spec-dashboard-home .content.spec-ui-buttons-page .dropdown-menu > li:not(.dropdown-header) > a:not(.dropdown-item):focus {
    background-color: rgba(0, 0, 0, 0.06);
    color: inherit;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-buttons-page .dropdown-menu > li:not(.dropdown-header) > a:not(.dropdown-item):hover,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-buttons-page .dropdown-menu > li:not(.dropdown-header) > a:not(.dropdown-item):focus {
    background-color: rgba(148, 163, 184, 0.15);
    color: #fff;
}

/* Justified groups stay full width on their row */
body.spec-dashboard-home .content.spec-ui-buttons-page .btn-group-justified {
    flex: 1 1 100%;
    width: 100%;
    margin-right: 0 !important;
}

/* --- Spec chart + form demo pages (Layout 4, .spec-ui-page) --- */
body.spec-dashboard-home .content.spec-ui-page .spec-chart-tile,
body.spec-dashboard-home .content.spec-ui-page .spec-forms-tile {
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-chart-tile,
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-forms-tile {
    border-color: rgba(148, 163, 184, 0.16);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 12px 32px rgba(0, 0, 0, 0.25);
}
body.spec-dashboard-home .content.spec-ui-page .spec-chart-tile > .card-body,
body.spec-dashboard-home .content.spec-ui-page .spec-forms-tile > .card-body {
    padding-top: 1.1rem;
    padding-bottom: 1.15rem;
}
body.spec-page-charts .content.spec-ui-page .spec-chart-tile .chartjs-size-monitor,
body.spec-page-charts .content.spec-ui-page .spec-chart-tile canvas {
    max-width: 100%;
}
body.spec-page-charts .content.spec-ui-page .spec-chart-tile .ct-chart,
body.spec-page-charts .content.spec-ui-page .spec-chart-tile .flot-chart,
body.spec-page-charts .content.spec-ui-page .spec-chart-tile .jqplot-target {
    min-height: 220px;
}
body.spec-page-charts.spec-dashboard-dark .content.spec-ui-page .ct-chart .ct-grid {
    stroke: rgba(148, 163, 184, 0.22);
}
body.spec-page-charts.spec-dashboard-dark .content.spec-ui-page .ct-label,
body.spec-page-charts.spec-dashboard-dark .content.spec-ui-page .ct-chart .ct-label.ct-horizontal.ct-end,
body.spec-page-charts.spec-dashboard-dark .content.spec-ui-page .ct-chart .ct-label.ct-vertical.ct-start {
    fill: #94a3b8;
    color: #94a3b8;
}
body.spec-page-charts.spec-dashboard-dark .morris-hover {
    color: #0f172a !important;
}
body.spec-page-forms.spec-dashboard-dark .note-editor.note-frame {
    border-color: rgba(148, 163, 184, 0.22);
    background: var(--spec-dd-surface);
}
body.spec-page-forms.spec-dashboard-dark .note-editor .note-toolbar {
    background: var(--spec-dd-elevated) !important;
    border-bottom-color: rgba(148, 163, 184, 0.18) !important;
}
body.spec-page-forms.spec-dashboard-dark .note-editing-area .note-editable {
    background: var(--spec-dd-surface);
    color: var(--spec-dd-text);
}

/* Summernote toolbar: explicit icon + label colors (fixes invisible glyphs on dark toolbar) */
body.spec-page-forms:not(.spec-dashboard-dark) .note-editor .note-toolbar {
    background-color: #f1f5f9 !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.3) !important;
}
body.spec-page-forms:not(.spec-dashboard-dark) .note-editor .note-toolbar .note-btn {
    color: #334155 !important;
    background-color: transparent !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
}
body.spec-page-forms:not(.spec-dashboard-dark) .note-editor .note-toolbar .note-btn:hover,
body.spec-page-forms:not(.spec-dashboard-dark) .note-editor .note-toolbar .note-btn:focus {
    color: #0f172a !important;
    background-color: rgba(148, 163, 184, 0.12) !important;
}
body.spec-page-forms.spec-dashboard-dark .note-editor .note-toolbar .note-btn,
body.spec-page-forms.spec-dashboard-dark .note-editor .note-toolbar .note-btn-group > .dropdown-toggle {
    color: #e2e8f0 !important;
    background-color: transparent !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
}
body.spec-page-forms.spec-dashboard-dark .note-editor .note-toolbar .note-btn:hover,
body.spec-page-forms.spec-dashboard-dark .note-editor .note-toolbar .note-btn:focus,
body.spec-page-forms.spec-dashboard-dark .note-editor .note-toolbar .note-btn-group > .dropdown-toggle:hover {
    color: #f8fafc !important;
    background-color: rgba(148, 163, 184, 0.14) !important;
}
body.spec-page-forms.spec-dashboard-dark .note-editor .note-toolbar .note-btn.active {
    color: #5eead4 !important;
    background-color: rgba(45, 212, 191, 0.1) !important;
}
body.spec-page-forms .note-editor .note-toolbar .note-icon::before,
body.spec-page-forms .note-editor .note-toolbar [class^="note-icon"]::before,
body.spec-page-forms .note-editor .note-toolbar [class*=" note-icon"]::before {
    color: inherit !important;
}
body.spec-page-forms.spec-dashboard-dark .note-editor .note-toolbar .note-icon::before,
body.spec-page-forms.spec-dashboard-dark .note-editor .note-toolbar [class^="note-icon"]::before,
body.spec-page-forms.spec-dashboard-dark .note-editor .note-toolbar [class*=" note-icon"]::before {
    color: #e2e8f0 !important;
}
body.spec-page-forms.spec-dashboard-dark .note-editor .note-toolbar .note-btn:hover .note-icon::before,
body.spec-page-forms.spec-dashboard-dark .note-editor .note-toolbar .note-btn:focus .note-icon::before {
    color: #f8fafc !important;
}
body.spec-page-forms.spec-dashboard-dark .note-editor .note-dropdown-menu {
    background: var(--spec-dd-elevated) !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
}
body.spec-page-forms.spec-dashboard-dark .note-editor .note-dropdown-menu a,
body.spec-page-forms.spec-dashboard-dark .note-editor .note-dropdown-menu .dropdown-item {
    color: #e2e8f0 !important;
}
body.spec-page-forms.spec-dashboard-dark .note-editor .note-dropdown-menu a:hover,
body.spec-page-forms.spec-dashboard-dark .note-editor .note-dropdown-menu .dropdown-item:hover {
    background: rgba(148, 163, 184, 0.12) !important;
    color: #fff !important;
}
body.spec-page-forms.spec-dashboard-dark .note-editor.note-frame .note-statusbar {
    background-color: rgba(15, 23, 42, 0.6) !important;
    border-top-color: rgba(148, 163, 184, 0.2) !important;
}
body.spec-page-forms.spec-dashboard-dark .note-editor .note-status-output {
    color: #94a3b8 !important;
    border-top-color: rgba(148, 163, 184, 0.2) !important;
}
body.spec-page-forms.spec-dashboard-dark .note-editor .note-placeholder {
    color: #64748b !important;
}

/* --- Tables demo pages (premium panels + dark/light) --- */
body.spec-dashboard-home .content.spec-ui-page .spec-tables-tile {
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    margin-bottom: 0;
}
body.spec-dashboard-home.spec-dashboard-dark .content.spec-ui-page .spec-tables-tile {
    border-color: rgba(148, 163, 184, 0.16);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 12px 32px rgba(0, 0, 0, 0.25);
}
body.spec-page-tables .content.spec-ui-page .table-responsive.rounded-3.border {
    border-color: rgba(148, 163, 184, 0.28) !important;
}
body.spec-page-tables.spec-dashboard-dark .content.spec-ui-page .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--spec-dd-text, #f1f5f9);
    color: var(--spec-dd-text, #f1f5f9);
}
body.spec-page-tables.spec-dashboard-dark .content.spec-ui-page .table thead.table-light {
    --bs-table-bg: rgba(30, 41, 59, 0.85);
    --bs-table-color: #e2e8f0;
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.2);
}
body.spec-page-tables.spec-dashboard-dark .content.spec-ui-page .table-bordered > :not(caption) > * > * {
    border-color: rgba(148, 163, 184, 0.22);
}
body.spec-page-tables.spec-dashboard-dark .content.spec-ui-page .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(148, 163, 184, 0.06);
}
body.spec-page-tables.spec-dashboard-dark .content.spec-ui-page .table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: rgba(94, 234, 212, 0.08);
}
body.spec-page-tables .spec-tables-code-block {
    background: #f8fafc;
    color: #0f172a;
    border-color: rgba(148, 163, 184, 0.35) !important;
}
body.spec-page-tables.spec-dashboard-dark .spec-tables-code-block {
    background: rgba(15, 23, 42, 0.65);
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.22) !important;
}
/* DataTables */
body.spec-page-tables.spec-dashboard-dark .dataTables_wrapper .dataTables_length,
body.spec-page-tables.spec-dashboard-dark .dataTables_wrapper .dataTables_filter,
body.spec-page-tables.spec-dashboard-dark .dataTables_wrapper .dataTables_info,
body.spec-page-tables.spec-dashboard-dark .dataTables_wrapper .dataTables_paginate {
    color: #94a3b8;
}
body.spec-page-tables.spec-dashboard-dark .dataTables_wrapper .dataTables_filter input,
body.spec-page-tables.spec-dashboard-dark .dataTables_wrapper .dataTables_length select {
    background-color: var(--spec-dd-elevated);
    border-color: rgba(148, 163, 184, 0.28);
    color: var(--spec-dd-text);
}
body.spec-page-tables.spec-dashboard-dark table.dataTable thead th {
    border-bottom-color: rgba(148, 163, 184, 0.25);
}
body.spec-page-tables.spec-dashboard-dark table.dataTable tbody td {
    border-color: rgba(148, 163, 184, 0.12);
}
body.spec-page-tables.spec-dashboard-dark #datatable3 tbody tr.selected > * {
    box-shadow: inset 0 0 0 9999px rgba(94, 234, 212, 0.12);
}
body.spec-page-tables .dt-buttons .btn {
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}
body.spec-page-tables .spec-datatables-surface {
    border-radius: 0.65rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(255, 255, 255, 0.72);
    padding: 0.5rem;
}
body.spec-page-tables.spec-dashboard-dark .spec-datatables-surface {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.5);
}
body.spec-page-tables .spec-datatables-stat-icon {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    background: linear-gradient(145deg, rgba(45, 212, 191, 0.22), rgba(56, 189, 248, 0.16));
    color: #0f766e;
    font-size: 1.1rem;
}
body.spec-page-tables.spec-dashboard-dark .spec-datatables-stat-icon {
    background: linear-gradient(145deg, rgba(45, 212, 191, 0.14), rgba(56, 189, 248, 0.1));
    color: #5eead4;
}
body.spec-page-tables.spec-dashboard-dark .content.spec-ui-page .table thead.table-light {
    --bs-table-bg: rgba(30, 41, 59, 0.9);
    --bs-table-color: #e2e8f0;
}
/* FooTable zebra (.footable.core.css uses #f7f7f7) — theme-aware */
body.spec-dashboard-home table.footable tbody tr.footable-odd > th,
body.spec-dashboard-home table.footable tbody tr.footable-odd > td {
    background-color: #f7f7f7 !important;
}
body.spec-dashboard-home.spec-dashboard-dark table.footable tbody tr.footable-odd > th,
body.spec-dashboard-home.spec-dashboard-dark table.footable tbody tr.footable-odd > td {
    background-color: rgba(255, 255, 255, 0.055) !important;
    color: inherit;
}
/* FooTable */
body.spec-page-tables.spec-dashboard-dark .footable-pagination-wrapper,
body.spec-page-tables.spec-dashboard-dark .footable-paging {
    color: #94a3b8;
}
body.spec-page-tables.spec-dashboard-dark .footable-paging .pagination > li > a,
body.spec-page-tables.spec-dashboard-dark .footable-paging .pagination > li > span {
    background-color: var(--spec-dd-elevated);
    border-color: rgba(148, 163, 184, 0.25);
    color: var(--spec-dd-text);
}
body.spec-page-tables.spec-dashboard-dark .footable-paging .pagination > .active > a {
    background-color: #0d9488;
    border-color: #0f766e;
    color: #fff;
}

/* Animation & widgets (layout 4 shell) */
body.spec-page-animation .content.spec-ui-page .spec-ui-page-tile {
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
    margin-bottom: 0;
}
body.spec-page-widgets .content.spec-ui-page .spec-ui-page-tile {
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
}
body.spec-dashboard-dark.spec-page-animation .content.spec-ui-page .spec-ui-page-tile {
    border-color: rgba(148, 163, 184, 0.16);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 12px 32px rgba(0, 0, 0, 0.25);
}
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-ui-page-tile {
    border-color: rgba(148, 163, 184, 0.16);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 12px 32px rgba(0, 0, 0, 0.25);
}
/* Space between widget sections (each .row is its own flex context; margin separates rows) */
body.spec-page-widgets .content.spec-ui-page > .spec-ui-page-header {
    margin-bottom: 1.5rem;
}
body.spec-page-widgets .content.spec-ui-page > .row {
    margin-bottom: 1.5rem;
}
body.spec-page-widgets .content.spec-ui-page > .row:last-child {
    margin-bottom: 0;
}
body.spec-page-widgets .content.spec-ui-page > .row .specpanel {
    border: 1px solid rgba(148, 163, 184, 0.26);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 20px rgba(15, 23, 42, 0.05);
}
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page > .row .specpanel {
    border-color: rgba(148, 163, 184, 0.14);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 10px 28px rgba(0, 0, 0, 0.22);
}

/* Widgets page — bento grid, weather scale, KPIs, tables (light + dark) */
body.spec-page-widgets .content.spec-ui-page .spec-widget-bento-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(145deg, rgba(45, 212, 191, 0.15), rgba(56, 189, 248, 0.1));
    color: #0d9488;
}
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-widget-bento-icon {
    background: linear-gradient(145deg, rgba(45, 212, 191, 0.12), rgba(56, 189, 248, 0.08));
    color: #5eead4;
}
body.spec-page-widgets .content.spec-ui-page .spec-widget-bento .card-header.bg-transparent {
    padding-bottom: 0.35rem;
}
body.spec-page-widgets .content.spec-ui-page .spec-widget-weather-wrap .weather-wrapper {
    margin-top: 0;
    width: 100%;
    justify-content: center;
}
body.spec-page-widgets .content.spec-ui-page .spec-widget-weather-scale.weather-card {
    width: 100%;
    max-width: 220px;
    height: 220px;
    margin: 0 auto;
}
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-widget-weather-scale.weather-card {
    background-color: rgba(30, 41, 59, 0.85) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-widget-weather-scale.weather-card h1,
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-widget-weather-scale.weather-card p {
    color: #cbd5e1 !important;
}
body.spec-page-widgets .content.spec-ui-page .spec-widget-profile-avatar {
    border: 3px solid rgba(45, 212, 191, 0.35);
    object-fit: cover;
}
body.spec-page-widgets .content.spec-ui-page .spec-widget-profile-name {
    color: #0f172a;
}
body.spec-page-widgets .content.spec-ui-page .spec-widget-profile-quote {
    color: #475569;
}
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-widget-profile-name {
    color: var(--spec-dd-text);
}
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-widget-profile-role,
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-widget-profile-stats .text-muted {
    color: var(--spec-dd-muted) !important;
}
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-widget-profile-quote {
    color: var(--spec-dd-muted);
}
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-widget-profile-bar {
    background-color: rgba(51, 65, 85, 0.6);
}
body.spec-page-widgets .content.spec-ui-page .spec-widget-timeline .timeline-small-body .desc h3 {
    color: #334155;
}
body.spec-page-widgets .content.spec-ui-page .spec-widget-timeline .timeline-small-body .desc h4 {
    color: #64748b;
}
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-widget-timeline .timeline-small-body .desc h3 {
    color: var(--spec-dd-text);
}
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-widget-timeline .timeline-small-body .desc h4 {
    color: var(--spec-dd-muted);
}
body.spec-page-widgets .content.spec-ui-page .spec-widget-kpi-value {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
body.spec-page-widgets .content.spec-ui-page .spec-widget-kpi-value--danger {
    color: #dc2626 !important;
}
body.spec-page-widgets .content.spec-ui-page .spec-widget-kpi-value--warning {
    color: #d97706 !important;
}
body.spec-page-widgets .content.spec-ui-page .spec-widget-kpi-value--muted {
    color: #475569 !important;
}
body.spec-page-widgets .content.spec-ui-page .spec-widget-kpi-title {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    color: #64748b;
}
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-widget-kpi-title {
    color: var(--spec-dd-muted);
}
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-widget-kpi-value.text-success {
    color: #6ee7b7 !important;
}
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-widget-kpi-value--danger {
    color: #fca5a5 !important;
}
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-widget-kpi-value--warning {
    color: #fcd34d !important;
}
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-widget-kpi-value--muted {
    color: #94a3b8 !important;
}
body.spec-page-widgets .content.spec-ui-page .spec-widget-kpi-footer {
    background: rgba(241, 245, 249, 0.65);
    color: #64748b;
    border-radius: 0 0 0.65rem 0.65rem;
}
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-widget-kpi-footer {
    background: rgba(15, 23, 42, 0.55);
    color: var(--spec-dd-muted);
}
body.spec-page-widgets .content.spec-ui-page .spec-widget-chart .card-header .text-primary {
    color: #0d9488 !important;
}
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-widget-chart .card-header {
    color: var(--spec-dd-text);
}
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-widget-chart .card-header .text-primary {
    color: #5eead4 !important;
}
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-widget-chart .flot-chart {
    background: rgba(15, 23, 42, 0.35);
    border-radius: 0.5rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
}
body.spec-page-widgets .content.spec-ui-page .spec-widget-table-wrap {
    border-color: rgba(148, 163, 184, 0.28) !important;
    background: rgba(255, 255, 255, 0.6);
}
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-widget-table-wrap {
    border-color: rgba(148, 163, 184, 0.2) !important;
    background: rgba(15, 23, 42, 0.4);
}
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-widget-table-wrap .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--spec-dd-text);
    color: var(--spec-dd-text);
}
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-widget-table-wrap .table thead.table-light {
    --bs-table-bg: rgba(30, 41, 59, 0.92);
    --bs-table-color: #e2e8f0;
}
body.spec-dashboard-dark.spec-page-widgets .content.spec-ui-page .spec-widget-table-wrap .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(148, 163, 184, 0.06);
}

body.spec-page-animation .spec-tables-code-block {
    background: #f8fafc;
    color: #0f172a;
    border-color: rgba(148, 163, 184, 0.35) !important;
    font-size: 0.8rem;
}
body.spec-page-animation.spec-dashboard-dark .spec-tables-code-block {
    background: rgba(15, 23, 42, 0.65);
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.22) !important;
    font-size: 0.8rem;
}

/* --- Premium auth & error screens --- */
body.spec-auth-page {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem 4rem;
    font-family: var(--bs-font-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    background: radial-gradient(1200px 600px at 10% -10%, rgba(45, 212, 191, 0.18), transparent 55%),
        radial-gradient(900px 500px at 100% 0%, rgba(56, 189, 248, 0.14), transparent 50%),
        linear-gradient(165deg, #f8fafc 0%, #eef2ff 45%, #f1f5f9 100%);
    color: #0f172a;
}
body.spec-auth-page.spec-dashboard-dark {
    background: radial-gradient(1000px 500px at 15% -5%, rgba(45, 212, 191, 0.12), transparent 50%),
        radial-gradient(800px 480px at 95% 10%, rgba(56, 189, 248, 0.1), transparent 45%),
        linear-gradient(165deg, #0f172a 0%, #1e293b 40%, #0f172a 100%);
    color: #e2e8f0;
}
body.spec-auth-page .spec-auth-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: inherit;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
    margin-bottom: 1.75rem;
}
body.spec-auth-page .spec-auth-brand-mark {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #14b8a6, #0d9488);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: 0 8px 24px rgba(13, 148, 136, 0.35);
}
body.spec-auth-page.spec-dashboard-dark .spec-auth-brand-mark {
    box-shadow: 0 8px 28px rgba(13, 148, 136, 0.25);
}
body.spec-auth-page .spec-auth-card {
    width: 100%;
    max-width: 26rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    padding: 2rem 2rem 1.75rem;
}
body.spec-auth-page.spec-dashboard-dark .spec-auth-card {
    border-color: rgba(148, 163, 184, 0.2);
    background: rgba(30, 41, 59, 0.72);
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
body.spec-auth-page .spec-auth-card--wide {
    max-width: 32rem;
}
body.spec-auth-page .spec-auth-card--error {
    max-width: 28rem;
    text-align: center;
}
body.spec-auth-page .spec-auth-kicker {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.35rem;
}
body.spec-auth-page.spec-dashboard-dark .spec-auth-kicker {
    color: #94a3b8;
}
body.spec-auth-page .spec-auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
    line-height: 1.25;
}
body.spec-auth-page .spec-auth-lead {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 1.5rem;
}
body.spec-auth-page.spec-dashboard-dark .spec-auth-lead {
    color: #94a3b8;
}
body.spec-auth-page .spec-auth-error-code {
    font-size: clamp(3.5rem, 12vw, 5.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(120deg, #2dd4bf, #38bdf8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.5rem;
}
body.spec-auth-page .form-control,
body.spec-auth-page .form-select {
    border-radius: 0.5rem;
    padding: 0.55rem 0.85rem;
}
body.spec-auth-page.spec-dashboard-dark .form-control,
body.spec-auth-page.spec-dashboard-dark .form-select {
    background-color: rgba(15, 23, 42, 0.55);
    border-color: rgba(148, 163, 184, 0.28);
    color: #f1f5f9;
}
body.spec-auth-page.spec-dashboard-dark .form-control::placeholder {
    color: #64748b;
}
body.spec-auth-page .btn-auth-primary {
    border-radius: 0.5rem;
    padding: 0.55rem 1rem;
    font-weight: 600;
    width: 100%;
}
body.spec-auth-page .spec-auth-footer {
    margin-top: 1.5rem;
    font-size: 0.8rem;
    color: #64748b;
    text-align: center;
}
body.spec-auth-page.spec-dashboard-dark .spec-auth-footer {
    color: #94a3b8;
}
body.spec-auth-page .spec-auth-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #0d9488;
    text-decoration: none;
}
body.spec-auth-page .spec-auth-back:hover {
    color: #0f766e;
}
body.spec-auth-page.spec-dashboard-dark .spec-auth-back {
    color: #5eead4;
}
body.spec-auth-page:not(.spec-dashboard-dark) .spec-theme-fab {
    background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
    color: #334155;
    border-color: rgba(148, 163, 184, 0.28);
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12);
}