/*!
 * AdminLTE 3 — Custom "darkorange" color skin
 * Color: #ff4e00
 * Mirrors the full pattern of built-in AdminLTE 3 colors
 * (warning, danger, primary, etc.)
 * Paste into site.css AFTER adminlte.min.css loads
 */

/* ============================================================
   COLOR TOKENS
   ============================================================ */
:root {
    --darkorange: #ff4e00;
    --darkorange-dark: #cc3e00; /* ~20% darker — hover/active states  */
    --darkorange-darker: #992f00; /* ~40% darker — pressed/shadow states */
    --darkorange-light: #ff7133; /* ~20% lighter — subtle tints         */
    --darkorange-lightest: #fff0ea; /* near-white tint — table rows, toasts */
}


/* ============================================================
   1. BACKGROUND UTILITY  —  .bg-darkorange
      Mirrors: .bg-warning, .bg-danger, etc.
   ============================================================ */
.bg-darkorange {
    background-color: #ff4e00 !important;
    color: #fff !important;
}

a.bg-darkorange:focus,
a.bg-darkorange:hover,
button.bg-darkorange:focus,
button.bg-darkorange:hover {
    background-color: #cc3e00 !important;
}


/* ============================================================
   2. GRADIENT BACKGROUND  —  .bg-gradient-darkorange
      Mirrors: .bg-gradient-warning
   ============================================================ */
.bg-gradient-darkorange {
    background: #ff4e00 linear-gradient(180deg, #ff6b26, #ff4e00) repeat-x !important;
    color: #fff !important;
}


/* ============================================================
   3. TEXT COLOR  —  .text-darkorange
   ============================================================ */
.text-darkorange {
    color: #ff4e00 !important;
}

a.text-darkorange:focus,
a.text-darkorange:hover {
    color: #992f00 !important;
}


/* ============================================================
   4. BORDER COLOR  —  .border-darkorange
   ============================================================ */
.border-darkorange {
    border-color: #ff4e00 !important;
}


/* ============================================================
   5. BADGE  —  .badge-darkorange
      Mirrors: .badge-warning
   ============================================================ */
.badge-darkorange {
    background-color: #ff4e00;
    color: #fff;
}

    .badge-darkorange[href]:focus,
    .badge-darkorange[href]:hover {
        background-color: #cc3e00;
        color: #fff;
        text-decoration: none;
    }


/* ============================================================
   6. BUTTON  —  .btn-darkorange
      Mirrors: .btn-warning
   ============================================================ */
.btn-darkorange {
    color: #fff;
    background-color: #ff4e00;
    border-color: #ff4e00;
    box-shadow: none;
}

    .btn-darkorange:hover {
        color: #fff;
        background-color: #cc3e00;
        border-color: #bf3a00;
    }

    .btn-darkorange:focus,
    .btn-darkorange.focus {
        color: #fff;
        background-color: #cc3e00;
        border-color: #bf3a00;
        box-shadow: 0 0 0 .2rem rgba(255, 78, 0, .5);
    }

    .btn-darkorange.disabled,
    .btn-darkorange:disabled {
        color: #fff;
        background-color: #ff4e00;
        border-color: #ff4e00;
        opacity: .65;
    }

    .btn-darkorange:not(:disabled):not(.disabled).active,
    .btn-darkorange:not(:disabled):not(.disabled):active,
    .show > .btn-darkorange.dropdown-toggle {
        color: #fff;
        background-color: #bf3a00;
        border-color: #b23600;
    }

        .btn-darkorange:not(:disabled):not(.disabled).active:focus,
        .btn-darkorange:not(:disabled):not(.disabled):active:focus,
        .show > .btn-darkorange.dropdown-toggle:focus {
            box-shadow: 0 0 0 .2rem rgba(255, 78, 0, .5);
        }


/* ============================================================
   7. OUTLINE BUTTON  —  .btn-outline-darkorange
      Mirrors: .btn-outline-warning
   ============================================================ */
.btn-outline-darkorange {
    color: #ff4e00;
    border-color: #ff4e00;
    background-color: transparent;
}

    .btn-outline-darkorange:hover {
        color: #fff;
        background-color: #ff4e00;
        border-color: #ff4e00;
    }

    .btn-outline-darkorange:focus,
    .btn-outline-darkorange.focus {
        box-shadow: 0 0 0 .2rem rgba(255, 78, 0, .5);
    }

    .btn-outline-darkorange.disabled,
    .btn-outline-darkorange:disabled {
        color: #ff4e00;
        background-color: transparent;
        opacity: .65;
    }

    .btn-outline-darkorange:not(:disabled):not(.disabled).active,
    .btn-outline-darkorange:not(:disabled):not(.disabled):active,
    .show > .btn-outline-darkorange.dropdown-toggle {
        color: #fff;
        background-color: #ff4e00;
        border-color: #ff4e00;
    }

        .btn-outline-darkorange:not(:disabled):not(.disabled).active:focus,
        .btn-outline-darkorange:not(:disabled):not(.disabled):active:focus,
        .show > .btn-outline-darkorange.dropdown-toggle:focus {
            box-shadow: 0 0 0 .2rem rgba(255, 78, 0, .5);
        }


/* ============================================================
   8. ALERT  —  .alert-darkorange
      Mirrors: .alert-warning
   ============================================================ */
.alert-darkorange {
    color: #8a2900;
    background-color: #ffe3d9;
    border-color: #ffd0be;
}

    .alert-darkorange hr {
        border-top-color: #ffbda5;
    }

    .alert-darkorange .alert-link {
        color: #5c1b00;
    }


/* ============================================================
   9. TABLE  —  .table-darkorange
      Mirrors: .table-warning
   ============================================================ */
.table-darkorange,
.table-darkorange > td,
.table-darkorange > th {
    background-color: #ffd0be;
}

    .table-darkorange tbody + tbody,
    .table-darkorange td,
    .table-darkorange th,
    .table-darkorange thead th {
        border-color: #ffa57e;
    }

.table-hover .table-darkorange:hover {
    background-color: #ffbda5;
}

    .table-hover .table-darkorange:hover > td,
    .table-hover .table-darkorange:hover > th {
        background-color: #ffbda5;
    }


/* ============================================================
   10. PROGRESS BAR  —  .progress-bar (bg-darkorange already works)
       Convenience alias:
   ============================================================ */
.progress-bar.bg-darkorange {
    background-color: #ff4e00 !important;
}


/* ============================================================
   11. CALLOUT  —  .callout-darkorange
       Mirrors: .callout-warning
   ============================================================ */
.callout-darkorange {
    border-left-color: #ff4e00 !important;
}


/* ============================================================
   12. SMALL BOX / INFO BOX accent
       .small-box.bg-darkorange already covered by #1.
       Icon overlay:
   ============================================================ */
.small-box.bg-darkorange .icon {
    color: rgba(0, 0, 0, .15);
}

.small-box.bg-darkorange:hover .icon {
    color: rgba(0, 0, 0, .3);
}

.small-box.bg-darkorange a.small-box-footer {
    color: rgba(255, 255, 255, .8);
    background-color: rgba(0, 0, 0, .1);
}

    .small-box.bg-darkorange a.small-box-footer:hover {
        background-color: rgba(0, 0, 0, .15);
        color: #fff;
    }


/* ============================================================
   13. CARD  —  .card-darkorange
       Mirrors: .card-warning (colored header stripe)
   ============================================================ */
.card-darkorange:not(.card-outline) > .card-header {
    background-color: #ff4e00;
    border-bottom-color: #ff4e00;
    color: #fff;
}

    .card-darkorange:not(.card-outline) > .card-header a {
        color: #fff;
    }

        .card-darkorange:not(.card-outline) > .card-header a:hover {
            color: rgba(255, 255, 255, .8);
        }

.card-darkorange.card-outline {
    border-top: 3px solid #ff4e00;
}

.card-darkorange.card-outline-tabs > .card-header a:hover,
.card-darkorange.card-outline-tabs > .card-header a.active {
    border-top-color: #ff4e00;
}

.card.bg-darkorange .card-header,
.card.bg-gradient-darkorange .card-header {
    border-bottom-color: rgba(0, 0, 0, .2);
}


/* ============================================================
   14. NAVBAR  —  .navbar-darkorange
       Mirrors: .navbar-warning
   ============================================================ */
.navbar-darkorange {
    background-color: #ff4e00;
    color: #fff;
}

    .navbar-darkorange .nav-link,
    .navbar-darkorange .navbar-brand,
    .navbar-darkorange .navbar-text {
        color: #fff;
    }

        .navbar-darkorange .nav-link:focus,
        .navbar-darkorange .nav-link:hover {
            color: rgba(255, 255, 255, .8);
        }

        .navbar-darkorange .nav-link.disabled {
            color: rgba(255, 255, 255, .4);
        }

    .navbar-darkorange .navbar-toggler {
        color: rgba(255, 255, 255, .8);
        border-color: rgba(255, 255, 255, .15);
    }

    .navbar-darkorange .form-control {
        background-color: rgba(255, 255, 255, .15);
        border-color: transparent;
        color: #fff;
    }

        .navbar-darkorange .form-control::placeholder {
            color: rgba(255, 255, 255, .6);
        }


/* ============================================================
   15. ACCENT LINK COLOR  —  .accent-darkorange  (on <body>)
       Mirrors: .accent-warning
       Changes sidebar active/hover link color
   ============================================================ */
.accent-darkorange .nav-sidebar > .nav-item > .nav-link.active,
.accent-darkorange .nav-sidebar > .nav-item.menu-open > .nav-link {
    background-color: #ff4e00 !important;
    color: #fff !important;
}

.accent-darkorange .nav-sidebar > .nav-item > .nav-link:focus,
.accent-darkorange .nav-sidebar > .nav-item > .nav-link:hover {
    color: #ff4e00 !important;
}

.accent-darkorange .nav-sidebar > .nav-item > .nav-treeview > .nav-item > .nav-link.active,
.accent-darkorange .nav-sidebar > .nav-item > .nav-treeview > .nav-item > .nav-link:hover,
.accent-darkorange .nav-sidebar > .nav-item > .nav-treeview > .nav-item > .nav-link:focus {
    color: #ff4e00 !important;
}

.accent-darkorange .right-sidebar .rpanel-title {
    background-color: #ff4e00;
}


/* ============================================================
   16. SIDEBAR DARK SKIN  —  .sidebar-dark-darkorange  (on <aside>)
       Mirrors: .sidebar-dark-warning
   ============================================================ */
.sidebar-dark-darkorange .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-darkorange .nav-sidebar > .nav-item.menu-open > .nav-link {
    background-color: #ff4e00;
    color: #fff;
}

.sidebar-dark-darkorange .nav-sidebar > .nav-item > .nav-link:hover,
.sidebar-dark-darkorange .nav-sidebar > .nav-item > .nav-link:focus {
    background-color: rgba(255, 78, 0, .3);
    color: #fff;
}

.sidebar-dark-darkorange .nav-treeview > .nav-item > .nav-link.active,
.sidebar-dark-darkorange .nav-treeview > .nav-item > .nav-link.active:hover,
.sidebar-dark-darkorange .nav-treeview > .nav-item > .nav-link.active:focus {
    background-color: rgba(255, 78, 0, .8);
    color: #fff;
}

.sidebar-dark-darkorange .nav-treeview > .nav-item > .nav-link:hover,
.sidebar-dark-darkorange .nav-treeview > .nav-item > .nav-link:focus {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
}


/* ============================================================
   17. SIDEBAR LIGHT SKIN  —  .sidebar-light-darkorange  (on <aside>)
       Mirrors: .sidebar-light-warning
   ============================================================ */
.sidebar-light-darkorange .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-darkorange .nav-sidebar > .nav-item.menu-open > .nav-link {
    background-color: #ff4e00;
    color: #fff;
    box-shadow: 0 1px 3px rgba(255, 78, 0, .4), 0 1px 2px rgba(255, 78, 0, .24);
}

.sidebar-light-darkorange .nav-sidebar > .nav-item > .nav-link:hover,
.sidebar-light-darkorange .nav-sidebar > .nav-item > .nav-link:focus {
    background-color: #c83808;
    color: #dcdcdc;
}

.sidebar-light-darkorange .nav-treeview > .nav-item > .nav-link.active,
.sidebar-light-darkorange .nav-treeview > .nav-item > .nav-link.active:hover,
.sidebar-light-darkorange .nav-treeview > .nav-item > .nav-link.active:focus {
    background-color: rgba(255, 78, 0, .15);
    color: #ff4e00;
}

.sidebar-light-darkorange .nav-treeview > .nav-item > .nav-link:hover,
.sidebar-light-darkorange .nav-treeview > .nav-item > .nav-link:focus {
    background-color: rgba(0, 0, 0, .05);
    color: #343a40;
}


/* ============================================================
   USAGE REFERENCE
   ---------------------------------------------------------------
   Background:         class="bg-darkorange"
   Gradient bg:        class="bg-gradient-darkorange"
   Text color:         class="text-darkorange"
   Border:             class="border-darkorange"
   Badge:              class="badge badge-darkorange"
   Button:             class="btn btn-darkorange"
   Outline button:     class="btn btn-outline-darkorange"
   Alert:              class="alert alert-darkorange"
   Table row:          class="table-darkorange"
   Progress bar:       class="progress-bar bg-darkorange"
   Callout:            class="callout callout-darkorange"
   Small box:          class="small-box bg-darkorange"
   Card header:        class="card card-darkorange"
   Card outline:       class="card card-darkorange card-outline"
   Navbar:             class="main-header navbar navbar-darkorange"
   Accent links:       <body class="... accent-darkorange">
   Dark sidebar:       <aside class="... sidebar-dark-darkorange">
   Light sidebar:      <aside class="... sidebar-light-darkorange">
   ============================================================ */

/* ============================================================
   DevExtreme — Custom Orange Button (.dx-btn-darkorange)
   Color: #ff4e00
   ============================================================ */

/* Base state */
.dx-btn-darkorange.dx-button {
    background-color: #ff4e00;
    border-color: #ff4e00;
    color: #fff;
    border-radius: 4px;
}

    /* Inner text/icon */
    .dx-btn-darkorange.dx-button .dx-button-text,
    .dx-btn-darkorange.dx-button .dx-icon {
        color: #fff;
    }

    /* Hover */
    .dx-btn-darkorange.dx-button.dx-state-hover {
        background-color: #cc3e00;
        border-color: #cc3e00;
        color: #fff;
    }

    /* Active / pressed */
    .dx-btn-darkorange.dx-button.dx-state-active {
        background-color: #992f00;
        border-color: #992f00;
        color: #fff;
    }

    /* Focused (keyboard nav / accessibility) */
    .dx-btn-darkorange.dx-button.dx-state-focused {
        background-color: #cc3e00;
        border-color: #cc3e00;
        color: #fff;
        outline: none;
        box-shadow: 0 0 0 3px rgba(255, 78, 0, .4);
    }

    /* Disabled */
    .dx-btn-darkorange.dx-button.dx-state-disabled {
        background-color: #ff4e00;
        border-color: #ff4e00;
        opacity: .5;
    }

        .dx-btn-darkorange.dx-button.dx-state-disabled .dx-button-text {
            color: #fff;
        }