/* 
 * تغيير جميع الألوان البنفسجية إلى كحلي
 * Change all purple colors to navy blue
 */

/* ========================================
 * MAIN PURPLE TO NAVY CONVERSION
 * ======================================== */

/* Primary purple class */
.bg-purple {
    background-color: #2c3e50 !important;
}

.bg-purple,
.bg-purple > a {
    color: #ffffff !important;
}

/* Purple button hover */
.bg-purple.btn:hover {
    border-color: #1a252f !important;
    color: #ececec !important;
    background-color: #34495e !important;
}

/* Purple button active */
.bg-purple.btn:not(:disabled):not(.disabled):active,
.bg-purple.btn:not(:disabled):not(.disabled).active,
.bg-purple.btn:active,
.bg-purple.btn.active {
    background-color: #1a252f !important;
    border-color: #16202b !important;
    color: #ffffff !important;
}

/* Purple active state */
.bg-purple-active {
    background-color: #34495e !important;
}

/* Purple gradient */
.bg-purple-gradient {
    background: #2c3e50 !important;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #2c3e50), color-stop(1, #34495e)) !important;
    background: -ms-linear-gradient(bottom, #2c3e50, #34495e) !important;
    background: -webkit-linear-gradient(bottom, #2c3e50, #34495e) !important;
    background: -o-linear-gradient(bottom, #2c3e50, #34495e) !important;
    background: linear-gradient(to top, #2c3e50, #34495e) !important;
    color: #fff !important;
}

.bg-gradient-purple {
    background: #2c3e50 !important;
    background: linear-gradient(180deg, #34495e, #2c3e50) !important;
}

/* ========================================
 * CARD COMPONENTS
 * ======================================== */

/* Purple card header */
.card-purple.card-outline {
    border-top: 3px solid #2c3e50 !important;
}

.card-purple:not(.card-outline) > .card-header {
    background-color: #2c3e50 !important;
}

.card-purple:not(.card-outline) > .card-header,
.card-purple:not(.card-outline) > .card-header a {
    color: #ffffff !important;
}

/* Purple card tools */
.bg-purple .btn-tool,
.bg-gradient-purple .btn-tool,
.card-purple:not(.card-outline) .btn-tool {
    color: rgba(255, 255, 255, 0.8) !important;
}

.bg-purple .btn-tool:hover,
.bg-gradient-purple .btn-tool:hover,
.card-purple:not(.card-outline) .btn-tool:hover {
    color: #ffffff !important;
}

/* ========================================
 * TOAST NOTIFICATIONS
 * ======================================== */

.toast.bg-purple {
    background: rgba(44, 62, 80, 0.9) !important;
}

.toast.bg-purple .close {
    color: #ffffff !important;
    text-shadow: 0 1px 0 #000 !important;
}

.toast.bg-purple .toast-header {
    background: rgba(44, 62, 80, 0.85) !important;
    color: #ffffff !important;
}

/* ========================================
 * CALLOUT COMPONENT
 * ======================================== */

.callout.callout-purple {
    border-left-color: #2c3e50 !important;
}

.callout.callout-purple h4 {
    color: #2c3e50 !important;
}

/* ========================================
 * ALERT COMPONENT
 * ======================================== */

.alert-purple {
    background-color: #2c3e50 !important;
    border-color: #1a252f !important;
    color: #ffffff !important;
}

/* ========================================
 * INFO BOX
 * ======================================== */

.info-box .info-box-icon.bg-purple {
    background-color: #2c3e50 !important;
}

.info-box .info-box-icon.bg-purple,
.info-box .info-box-icon.bg-purple > * {
    color: #ffffff !important;
}

/* ========================================
 * SMALL BOX
 * ======================================== */

.small-box.bg-purple {
    background-color: #2c3e50 !important;
}

.small-box.bg-purple h3,
.small-box.bg-purple p {
    color: #ffffff !important;
}

.small-box.bg-purple .icon {
    color: rgba(255, 255, 255, 0.2) !important;
}

.small-box.bg-purple .small-box-footer {
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ========================================
 * BOOTSTRAP DATETIMEPICKER
 * ======================================== */

.card.bg-purple .bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
.card.bg-purple .bootstrap-datetimepicker-widget table td.day:hover,
.card.bg-purple .bootstrap-datetimepicker-widget table td.hour:hover,
.card.bg-purple .bootstrap-datetimepicker-widget table td.minute:hover,
.card.bg-purple .bootstrap-datetimepicker-widget table td.second:hover,
.card.bg-gradient-purple .bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
.card.bg-gradient-purple .bootstrap-datetimepicker-widget table td.day:hover,
.card.bg-gradient-purple .bootstrap-datetimepicker-widget table td.hour:hover,
.card.bg-gradient-purple .bootstrap-datetimepicker-widget table td.minute:hover,
.card.bg-gradient-purple .bootstrap-datetimepicker-widget table td.second:hover {
    background: #34495e !important;
    color: #ffffff !important;
}

.card.bg-purple .bootstrap-datetimepicker-widget table td.active,
.card.bg-purple .bootstrap-datetimepicker-widget table td.active:hover,
.card.bg-gradient-purple .bootstrap-datetimepicker-widget table td.active,
.card.bg-gradient-purple .bootstrap-datetimepicker-widget table td.active:hover {
    background: #34495e !important;
    color: #ffffff !important;
}

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

.sidebar-dark-purple .sidebar a {
    color: #c2c7d0 !important;
}

.sidebar-dark-purple .nav-sidebar > .nav-item > .nav-link.active {
    background-color: #2c3e50 !important;
    color: #fff !important;
}

.sidebar-dark-purple .nav-sidebar > .nav-item:hover > .nav-link {
    background-color: rgba(44, 62, 80, 0.9) !important;
    color: #fff !important;
}

.sidebar-light-purple .nav-sidebar > .nav-item > .nav-link.active {
    background-color: #2c3e50 !important;
    color: #fff !important;
}

.sidebar-light-purple .nav-sidebar > .nav-item:hover > .nav-link {
    background-color: rgba(44, 62, 80, 0.1) !important;
    color: #2c3e50 !important;
}

/* ========================================
 * NAV TABS
 * ======================================== */

.nav-tabs-purple > .nav-item > .nav-link.active {
    background-color: #2c3e50 !important;
    border-color: #2c3e50 !important;
    color: #ffffff !important;
}

/* ========================================
 * PROGRESS BAR
 * ======================================== */

.progress-bar-purple {
    background-color: #2c3e50 !important;
}

/* ========================================
 * BADGE
 * ======================================== */

.badge-purple {
    background-color: #2c3e50 !important;
    color: #ffffff !important;
}

/* ========================================
 * BORDER
 * ======================================== */

.border-purple {
    border-color: #2c3e50 !important;
}

/* ========================================
 * TEXT
 * ======================================== */

.text-purple {
    color: #2c3e50 !important;
}

a.text-purple:hover,
a.text-purple:focus {
    color: #1a252f !important;
}

/* ========================================
 * FORCE OVERRIDE FOR SPECIFIC ELEMENTS
 * ======================================== */

/* Override any lingering purple */
button.bg-purple,
.btn.bg-purple,
a.bg-purple {
    background-color: #2c3e50 !important;
    border-color: #2c3e50 !important;
}

button.bg-purple:hover,
.btn.bg-purple:hover,
a.bg-purple:hover {
    background-color: #34495e !important;
    border-color: #34495e !important;
}

/* Submit buttons with purple */
button[class*="bg-purple"],
.btn[class*="bg-purple"] {
    background-color: #2c3e50 !important;
}

button[class*="bg-purple"]:hover,
.btn[class*="bg-purple"]:hover {
    background-color: #34495e !important;
}

/* ========================================
 * ADDITIONAL PURPLE VARIANTS
 * ======================================== */

.bg-light-purple {
    background-color: #34495e !important;
}

.bg-dark-purple {
    background-color: #1a252f !important;
}

/* Hover states */
.bg-purple:hover,
.bg-purple:focus {
    background-color: #34495e !important;
}

/* ========================================
 * END OF FILE
 * ======================================== */