/* Custom CSS for UTAR LEAP - Supported by LCP Buildsoft Technology (M) Sdn Bhd */
/* Override CoreUI CSS variables with UTAR brand colors */
/* Primary Color: #171642 */
/* Danger Color: #fe0100 */

:root,
[data-coreui-theme=light] {
    /* Override CoreUI primary color variables */
    --cui-primary: #171642;
    --cui-primary-rgb: 23, 22, 66;
    --cui-primary-text-emphasis: #0f0e2a;
    --cui-primary-bg-subtle: #d4d4e8;
    --cui-primary-border-subtle: #a8a7d0;
    
    /* Override CoreUI danger color variables */
    --cui-danger: #fe0100;
    --cui-danger-rgb: 254, 1, 0;
    --cui-danger-text-emphasis: #cc0100;
    --cui-danger-bg-subtle: #ffe6e6;
    --cui-danger-border-subtle: #ff9999;
    
    /* Additional UTAR color variants for custom use */
    --utar-primary: #171642;
    --utar-primary-rgb: 23, 22, 66;
    --utar-primary-light: #2a2960;
    --utar-primary-dark: #0f0e2a;
    
    --utar-danger: #fe0100;
    --utar-danger-rgb: 254, 1, 0;
    --utar-danger-light: #ff3433;
    --utar-danger-dark: #cc0100;
}

[data-coreui-theme=dark] {
    /* Override CoreUI primary color variables for dark theme */
    --cui-primary: #171642;
    --cui-primary-rgb: 23, 22, 66;
    --cui-primary-text-emphasis: #2a2954;
    --cui-primary-bg-subtle: #171642;
    --cui-primary-border-subtle: #171642;
    
    /* Override CoreUI danger color variables for dark theme */
    --cui-danger: #fe0100;
    --cui-danger-rgb: 254, 1, 0;
    --cui-danger-text-emphasis: #ff3333;
    --cui-danger-bg-subtle: #330000;
    --cui-danger-border-subtle: #660000;
}

/* Primary Button Styles */
.btn-primary {
    background-color: var(--utar-primary) !important;
    border-color: var(--utar-primary) !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background-color: var(--utar-primary-light) !important;
    border-color: var(--utar-primary-light) !important;
    color: #ffffff !important;
}

.btn-primary:focus, .btn-primary.focus {
    background-color: var(--utar-primary-light) !important;
    border-color: var(--utar-primary-light) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--utar-primary-rgb), 0.5) !important;
    color: #ffffff !important;
}

.btn-primary:active, .btn-primary.active {
    background-color: var(--utar-primary-dark) !important;
    border-color: var(--utar-primary-dark) !important;
    color: #ffffff !important;
}

.btn-primary:disabled, .btn-primary.disabled {
    background-color: var(--utar-primary) !important;
    border-color: var(--utar-primary) !important;
    opacity: 0.65 !important;
}

/* Outline Primary Button */
.btn-outline-primary {
    color: var(--utar-primary) !important;
    border-color: var(--utar-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--utar-primary) !important;
    border-color: var(--utar-primary) !important;
    color: #ffffff !important;
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--utar-primary-rgb), 0.5) !important;
}

/* Danger Button Styles */
.btn-danger {
    background-color: var(--utar-danger) !important;
    border-color: var(--utar-danger) !important;
    color: #ffffff !important;
}

.btn-danger:hover {
    background-color: var(--utar-danger-light) !important;
    border-color: var(--utar-danger-light) !important;
    color: #ffffff !important;
}

.btn-danger:focus, .btn-danger.focus {
    background-color: var(--utar-danger-light) !important;
    border-color: var(--utar-danger-light) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--utar-danger-rgb), 0.5) !important;
    color: #ffffff !important;
}

.btn-danger:active, .btn-danger.active {
    background-color: var(--utar-danger-dark) !important;
    border-color: var(--utar-danger-dark) !important;
    color: #ffffff !important;
}

.btn-danger:disabled, .btn-danger.disabled {
    background-color: var(--utar-danger) !important;
    border-color: var(--utar-danger) !important;
    opacity: 0.65 !important;
}

/* Outline Danger Button */
.btn-outline-danger {
    color: var(--utar-danger) !important;
    border-color: var(--utar-danger) !important;
}

.btn-outline-danger:hover {
    background-color: var(--utar-danger) !important;
    border-color: var(--utar-danger) !important;
    color: #ffffff !important;
}

.btn-outline-danger:focus, .btn-outline-danger.focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--utar-danger-rgb), 0.5) !important;
}

/* Primary Color for Text and Backgrounds */
.text-primary {
    color: var(--utar-primary) !important;
}

.bg-primary {
    background-color: var(--utar-primary) !important;
}

.border-primary {
    border-color: var(--utar-primary) !important;
}

/* Danger Color for Text and Backgrounds */
.text-danger {
    color: var(--utar-danger) !important;
}

.bg-danger {
    background-color: var(--utar-danger) !important;
}

.border-danger {
    border-color: var(--utar-danger) !important;
}

/* Alert Styles */
.alert-primary {
    color: #ffffff;
    background-color: var(--utar-primary);
    border-color: var(--utar-primary-light);
}

.alert-danger {
    color: #ffffff;
    background-color: var(--utar-danger);
    border-color: var(--utar-danger-light);
}

/* Form Controls Focus */
.form-control:focus {
    border-color: var(--utar-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--utar-primary-rgb), 0.25);
}

.form-select:focus {
    border-color: var(--utar-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--utar-primary-rgb), 0.25);
}

/* Links */
a {
    color: var(--utar-primary);
}

a:hover {
    color: var(--utar-primary-dark);
}

/* Progress Bar */
.progress-bar {
    background-color: var(--utar-primary);
}

/* Pagination */
.page-link {
    color: var(--utar-primary);
}

.page-link:hover {
    color: var(--utar-primary-dark);
    background-color: rgba(var(--utar-primary-rgb), 0.1);
    border-color: var(--utar-primary);
}

.page-item.active .page-link {
    background-color: var(--utar-primary);
    border-color: var(--utar-primary);
}

/* Navbar */
.navbar-brand {
    color: var(--utar-primary) !important;
}

.navbar-nav .nav-link {
    color: var(--utar-primary);
}

.navbar-nav .nav-link:hover {
    color: var(--utar-primary-dark);
}

/* Custom UTAR Sections */
.utar-primary-section {
    background-color: var(--utar-primary);
    color: #ffffff;
}

.utar-danger-section {
    background-color: var(--utar-danger);
    color: #ffffff;
}

/* Gradient Backgrounds */
.utar-gradient-primary {
    background: linear-gradient(135deg, var(--utar-primary) 0%, var(--utar-primary-light) 100%);
}

.utar-gradient-danger {
    background: linear-gradient(135deg, var(--utar-danger) 0%, var(--utar-danger-light) 100%);
}

/* Custom Card Styles */
.card-header-primary {
    background-color: var(--utar-primary);
    color: #ffffff;
    border-bottom: 1px solid var(--utar-primary-light);
}

.card-header-danger {
    background-color: var(--utar-danger);
    color: #ffffff;
    border-bottom: 1px solid var(--utar-danger-light);
}

/* Spinner/Loading Colors */
.spinner-border-primary {
    color: var(--utar-primary);
}

.spinner-border-danger {
    color: var(--utar-danger);
}

/* Table Styles */
.table-primary {
    --bs-table-bg: rgba(var(--utar-primary-rgb), 0.1);
    --bs-table-border-color: rgba(var(--utar-primary-rgb), 0.2);
}

.table-danger {
    --bs-table-bg: rgba(var(--utar-danger-rgb), 0.1);
    --bs-table-border-color: rgba(var(--utar-danger-rgb), 0.2);
}

/* Badge Styles */
.badge-primary {
    background-color: var(--utar-primary);
}

.badge-danger {
    background-color: var(--utar-danger);
}

/* Input Group Text */
.input-group-text {
    border-color: #ced4da;
}

.input-group:focus-within .input-group-text {
    border-color: var(--utar-primary);
}

/* Custom Utility Classes */
.text-utar-primary {
    color: var(--utar-primary) !important;
}

.text-utar-danger {
    color: var(--utar-danger) !important;
}

.bg-utar-primary {
    background-color: var(--utar-primary) !important;
}

.bg-utar-danger {
    background-color: var(--utar-danger) !important;
}

.border-utar-primary {
    border-color: var(--utar-primary) !important;
}

.border-utar-danger {
    border-color: var(--utar-danger) !important;
}

/* Profile page specific styles */
.profile-card {
    transition: box-shadow 0.15s ease-in-out;
}

.profile-card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.input-group .btn {
    border-color: var(--cui-border-color);
}

.form-control:focus {
    border-color: var(--cui-primary);
    box-shadow: 0 0 0 0.2rem rgba(23, 22, 66, 0.25);
}

.btn-primary {
    background-color: var(--cui-primary);
    border-color: var(--cui-primary);
}

.btn-primary:hover {
    background-color: #0f0e2a;
    border-color: #0f0e2a;
}

.btn-warning:hover {
    background-color: #e0a800;
    border-color: #d39e00;
}

/* Password strength indicator */
.password-strength {
    height: 4px;
    background-color: var(--cui-gray-300);
    border-radius: 2px;
    margin-top: 0.5rem;
    overflow: hidden;
}

.password-strength .strength-bar {
    height: 100%;
    transition: width 0.3s ease;
    background-color: var(--cui-danger);
}

.password-strength .strength-bar.weak {
    background-color: var(--cui-danger);
    width: 33.33%;
}

.password-strength .strength-bar.medium {
    background-color: var(--cui-warning);
    width: 66.66%;
}

.password-strength .strength-bar.strong {
    background-color: var(--cui-success);
    width: 100%;
}

footer.footer {
    background-color: white;
}