/*
 * Oula Brand Theme
 * Overrides Velzon default colors with Oula palette
 *
 * Primary:   #0D2B26 (dark green)
 * Accent:    #C7FC57 (lime)
 * Green:     #5ED187 (green)
 * White:     #ffffff
 *
 * Secondary tones (dark at opacity):
 *   80%: rgba(13,43,38,0.80)
 *   60%: rgba(13,43,38,0.60)
 *   40%: rgba(13,43,38,0.40)
 */

/* ===== Global Color Variables ===== */
:root {
    /* Bootstrap / Velzon core palette override */
    --vz-primary:       #0D2B26;
    --vz-primary-rgb:   13, 43, 38;
    --vz-secondary:     #5ED187;
    --vz-secondary-rgb: 94, 209, 135;
    --vz-success:       #5ED187;
    --vz-success-rgb:   94, 209, 135;

    /* Links */
    --vz-link-color:       #0D2B26;
    --vz-link-hover-color: #5ED187;

    /* Headings */
    --vz-heading-color: #0D2B26;

    /* Input focus */
    --vz-input-focus-border: #5ED187;

    /* Sidebar light */
    --vz-vertical-menu-item-hover-color:       #0D2B26;
    --vz-vertical-menu-item-active-color:      #0D2B26;
    --vz-vertical-menu-sub-item-hover-color:   #0D2B26;
    --vz-vertical-menu-sub-item-active-color:  #0D2B26;

    /* Sidebar dark */
    --vz-vertical-menu-bg-dark:                 #0D2B26;
    --vz-vertical-menu-item-color-dark:         rgba(255,255,255,0.65);
    --vz-vertical-menu-item-hover-color-dark:   #C7FC57;
    --vz-vertical-menu-item-active-color-dark:  #C7FC57;
    --vz-vertical-menu-sub-item-color-dark:     rgba(255,255,255,0.55);
    --vz-vertical-menu-sub-item-hover-color-dark:  #C7FC57;
    --vz-vertical-menu-sub-item-active-color-dark: #C7FC57;
    --vz-vertical-menu-title-color-dark:        rgba(255,255,255,0.40);

    /* Header dark */
    --vz-header-bg-dark: #0D2B26;
    --vz-header-item-color-dark: rgba(255,255,255,0.70);

    /* Topbar */
    --vz-topnav-item-color-active: #0D2B26;

    /* Two-column (if used) */
    --vz-twocolumn-menu-iconview-bg-dark: #0D2B26;
    --vz-twocolumn-menu-bg-dark: #0f362f;
}

/* ===== Primary buttons ===== */
.btn-primary {
    background-color: #0D2B26 !important;
    border-color: #0D2B26 !important;
    color: #fff !important;
}

.page-content
{
    padding-top: 76px;
}



.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: #164a42 !important;
    border-color: #164a42 !important;
    color: #fff !important;
}

.btn-outline-primary {
    color: #0D2B26 !important;
    border-color: #0D2B26 !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: #0D2B26 !important;
    border-color: #0D2B26 !important;
    color: #fff !important;
}

.btn-soft-primary {
    color: #0D2B26 !important;
    background-color: rgba(13, 43, 38, 0.1) !important;
}
.btn-soft-primary:hover {
    background-color: #0D2B26 !important;
    color: #fff !important;
}

/* ===== Success buttons (green) ===== */
.btn-success {
    background-color: #5ED187 !important;
    border-color: #5ED187 !important;
    color: #0D2B26 !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: #4bc476 !important;
    border-color: #4bc476 !important;
    color: #0D2B26 !important;
}

.btn-soft-success {
    color: #0D2B26 !important;
    background-color: rgba(94, 209, 135, 0.15) !important;
}
.btn-soft-success:hover {
    background-color: #5ED187 !important;
    color: #0D2B26 !important;
}

/* ===== Badges ===== */
.bg-primary {
    background-color: #0D2B26 !important;
}
.bg-success {
    background-color: #5ED187 !important;
}
.bg-soft-primary {
    background-color: rgba(13, 43, 38, 0.1) !important;
    color: #0D2B26 !important;
}
.bg-soft-success {
    background-color: rgba(94, 209, 135, 0.15) !important;
    color: #0D2B26 !important;
}
.bg-soft-info {
    background-color: rgba(199, 252, 87, 0.2) !important;
    color: #0D2B26 !important;
}
.text-primary {
    color: #0D2B26 !important;
}
.text-success {
    color: #5ED187 !important;
}

/* ===== Links ===== */
a {
    color: #0D2B26;
}
a:hover {
    color: #5ED187;
}
.link-primary {
    color: #0D2B26 !important;
}
.link-primary:hover {
    color: #5ED187 !important;
}

/* ===== Form controls focus ===== */
.form-control:focus,
.form-select:focus {
    border-color: #5ED187;
    box-shadow: 0 0 0 0.25rem rgba(94, 209, 135, 0.25);
}
.form-check-input:checked {
    background-color: #0D2B26;
    border-color: #0D2B26;
}

/* ===== Pagination active ===== */
.page-item.active .page-link,
.page-link.active {
    background-color: #0D2B26;
    border-color: #0D2B26;
    color: #fff;
}
.page-link {
    color: #0D2B26;
}
.page-link:hover {
    color: #164a42;
}

/* ===== Nav / Tabs ===== */
.nav-link.active,
.nav-pills .nav-link.active {
    background-color: #0D2B26;
    color: #fff;
}
.nav-tabs .nav-link.active {
    color: #0D2B26;
    background-color: transparent;
}

/* ===== Progress bars ===== */
.progress-bar {
    background-color: #0D2B26;
}

/* ===== Sidebar active indicator ===== */
[data-sidebar="dark"] .navbar-nav .nav-link.active {
    color: #C7FC57;
}

/* ===== Topbar cleanup ===== */
#page-topbar .header-item,
#page-topbar .header-item > .btn,
#page-topbar .header-item > .btn:hover,
#page-topbar .header-item > .btn:focus,
#page-topbar .header-item > .btn:active,
#page-topbar .topbar-user,
#page-topbar .topbar-user > .btn,
#page-topbar .topbar-user > .btn:hover,
#page-topbar .topbar-user > .btn:focus,
#page-topbar .topbar-user > .btn:active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

#page-topbar .oula-topbar-action,
#page-topbar .oula-topbar-user {

    align-items: center;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

#page-topbar .oula-topbar-action .btn,
#page-topbar .oula-topbar-action .btn:hover,
#page-topbar .oula-topbar-action .btn:focus,
#page-topbar .oula-topbar-action .btn:active,
#page-topbar .oula-topbar-user > .btn,
#page-topbar .oula-topbar-user > .btn:hover,
#page-topbar .oula-topbar-user > .btn:focus,
#page-topbar .oula-topbar-user > .btn:active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

#page-topbar .oula-topbar-user .dropdown-menu {
    top: 6px !important;
}

/* ===== Dropdown active ===== */
.dropdown-item.active,
.dropdown-item:active {
    background-color: #0D2B26;
    color: #fff;
}

/* ===== Modal header (soft-info used in solicitud modal) ===== */
.modal-header.bg-soft-info {
    background-color: rgba(13, 43, 38, 0.08) !important;
}

/* ===== Badge outlines ===== */
.badge-outline-primary {
    color: #0D2B26;
    border: 1px solid #0D2B26;
}
.badge-outline-success {
    color: #5ED187;
    border: 1px solid #5ED187;
}
.badge-outline-info {
    color: #0D2B26;
    border: 1px solid rgba(13, 43, 38, 0.40);
}

/* ===== Scrollbar accent (webkit) ===== */
::-webkit-scrollbar-thumb {
    background-color: rgba(13, 43, 38, 0.25);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(13, 43, 38, 0.45);
}

/* ===================================================================
   OULA DASHBOARD
   =================================================================== */

/* ── Execution Score Ring ─────────────────────────────────────────── */
.oula-exec-score {
    min-width: 72px;
}
.oula-score-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid;
    transition: border-color .3s;
}
.oula-score-ring.score-good { border-color: #5ED187; color: #0D2B26; }
.oula-score-ring.score-warn { border-color: #f7b84b; color: #0D2B26; }
.oula-score-ring.score-bad  { border-color: #ef4444; color: #ef4444; }

/* ── KPI Card Animation ──────────────────────────────────────────── */
.card-animate {
    transition: transform .2s, box-shadow .2s;
}
.card-animate:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(13, 43, 38, 0.08);
}

/* ── Timeline Feed ────────────────────────────────────────────────── */
.oula-timeline-item {
    position: relative;
    padding-left: 4px;
}
.oula-timeline-item + .oula-timeline-item::before {
    content: '';
    position: absolute;
    left: 18px;
    top: -12px;
    bottom: calc(100% - 4px);
    width: 1px;
    background: rgba(13, 43, 38, 0.12);
}

/* ── Priority list items ──────────────────────────────────────────── */
.list-group-item {
    border-color: rgba(13, 43, 38, 0.06);
    transition: background .15s;
}
.list-group-item:hover {
    background-color: rgba(13, 43, 38, 0.02);
}

/* ── Heatmap cell helpers (used in manager SLA table) ─────────────── */
.table-success { background-color: rgba(94, 209, 135, 0.15) !important; }
.table-warning { background-color: rgba(247, 184, 75, 0.15) !important; }
.table-danger  { background-color: rgba(239, 68, 68, 0.12) !important; }

/* ── Responsive polish ────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .oula-exec-score { min-width: 60px; }
    .oula-score-ring { width: 46px; height: 46px; }
    .oula-score-ring span { font-size: 14px !important; }
}


[data-layout=vertical][data-sidebar-size=sm] .navbar-brand-box {
padding-top: 10px !important;

}

.navbar-brand-box {
padding-top: 10px !important;
    
}


.bg-secondary {
    --vz-bg-opacity: 1;
    background-color: #3577f1 !important;
}


.mt-n4 {
    margin-top: -1.5rem !important;
}

.mx-n4 {
    margin-right: -2.5rem !important;
    margin-left: -2.5rem !important;
}

.profile-setting-img {
    position: relative;
    height: 100px;
}


.profile-wid-bg::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: .9;
    background: #c7ff00;
    background: -webkit-gradient(linear, left bottom, left top, from(#0d2b26), to(#c7ff00));
    background: linear-gradient(to top, #0d2b26, #c7ff00);
}


.page-title-box h4 {
    font-weight: 100;
    font-size: 15px !important;
    text-transform: uppercase;
}

.profile-settings-page .completion-percent {
    font-weight: 600;
}

.pagination-prev {
    margin-right: 10px;
}

.pagination-next {
    margin-left: 10px;
}