/* ================================================
   UNOC Brand Colors and Theme
   Uganda National Oil Company Official Colors
   ================================================ */

:root {
    /* UNOC Primary Brand Colors */
    --unoc-primary-red: #ec2229;           /* Signature UNOC Red */
    --unoc-primary-red-rgb: 236, 34, 41;
    --unoc-primary-red-hover: #d01e24;     /* Darker shade for hover */
    --unoc-primary-red-light: #ff4c52;     /* Lighter shade */
    --unoc-primary-red-soft: #ffebec;      /* Very light for backgrounds */

    --unoc-dark-blue: #1f2033;             /* Dark Blue for headers/buttons */
    --unoc-dark-blue-rgb: 31, 32, 51;
    --unoc-dark-blue-hover: #161729;       /* Darker shade for hover */
    --unoc-dark-blue-light: #2c2e4a;       /* Lighter shade */

    --unoc-light-blue: #3e6edf;            /* Light Blue for accents */
    --unoc-light-blue-rgb: 62, 110, 223;
    --unoc-light-blue-hover: #224db1;      /* Medium Blue for hover */
    --unoc-light-blue-soft: #e6efff;       /* Very light for backgrounds */

    /* UNOC Secondary Colors */
    --unoc-dark-gray: #404040;             /* Primary text */
    --unoc-charcoal: #070707;              /* Headings */
    --unoc-light-gray: #f5f5f5;            /* Background */
    --unoc-soft-gray: #f0f1f2;             /* Dividers */
    --unoc-medium-gray: #7d7d7d;           /* Secondary text */

    /* Override Bootstrap/Theme Variables */
    --bs-primary: #ec2229;
    --bs-primary-rgb: 236, 34, 41;
    --primary: #ec2229;
    --kt-primary: #ec2229;
    --kt-primary-light: #ff4c52;
    --kt-primary-dark: #d01e24;

    --bs-secondary: #1f2033;
    --bs-secondary-rgb: 31, 32, 51;
    --secondary: #1f2033;

    --bs-info: #3e6edf;
    --bs-info-rgb: 62, 110, 223;

    /* Link colors */
    --bs-link-color: #ec2229;
    --bs-link-color-rgb: 236, 34, 41;
    --bs-link-hover-color: #d01e24;
    --bs-link-hover-color-rgb: 208, 30, 36;

    /* Button color variants */
    --btn-primary-bg: #ec2229;
    --btn-primary-border: #ec2229;
    --btn-primary-hover-bg: #d01e24;
    --btn-primary-hover-border: #d01e24;

    --btn-secondary-bg: #1f2033;
    --btn-secondary-border: #1f2033;
    --btn-secondary-hover-bg: #161729;
    --btn-secondary-hover-border: #161729;

    --btn-info-bg: #3e6edf;
    --btn-info-border: #3e6edf;
    --btn-info-hover-bg: #224db1;
    --btn-info-hover-border: #224db1;
}

/* ================================================
   Override Bootstrap Button Classes
   ================================================ */

.btn-primary {
    background-color: var(--unoc-primary-red) !important;
    border-color: var(--unoc-primary-red) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--unoc-primary-red-hover) !important;
    border-color: var(--unoc-primary-red-hover) !important;
    color: #ffffff !important;
}

.btn-secondary {
    background-color: var(--unoc-dark-blue) !important;
    border-color: var(--unoc-dark-blue) !important;
    color: #ffffff !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: var(--unoc-dark-blue-hover) !important;
    border-color: var(--unoc-dark-blue-hover) !important;
    color: #ffffff !important;
}

.btn-info {
    background-color: var(--unoc-light-blue) !important;
    border-color: var(--unoc-light-blue) !important;
    color: #ffffff !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: var(--unoc-light-blue-hover) !important;
    border-color: var(--unoc-light-blue-hover) !important;
    color: #ffffff !important;
}

/* Light button variants */
.btn-light-primary {
    background-color: var(--unoc-primary-red-soft) !important;
    color: var(--unoc-primary-red) !important;
    border-color: transparent !important;
}

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

.btn-light-secondary {
    background-color: #e8e9ec !important;
    color: var(--unoc-dark-blue) !important;
}

.btn-light-secondary:hover {
    background-color: var(--unoc-dark-blue) !important;
    color: #ffffff !important;
}

.btn-light-info {
    background-color: var(--unoc-light-blue-soft) !important;
    color: var(--unoc-light-blue) !important;
}

.btn-light-info:hover {
    background-color: var(--unoc-light-blue) !important;
    color: #ffffff !important;
}

/* ================================================
   Badge Colors
   ================================================ */

.badge-primary,
.badge-light-primary {
    background-color: var(--unoc-primary-red-soft) !important;
    color: var(--unoc-primary-red) !important;
}

.badge-secondary,
.badge-light-secondary {
    background-color: #e8e9ec !important;
    color: var(--unoc-dark-blue) !important;
}

.badge-info,
.badge-light-info {
    background-color: var(--unoc-light-blue-soft) !important;
    color: var(--unoc-light-blue) !important;
}

/* ================================================
   Alert Colors
   ================================================ */

.alert-primary {
    background-color: var(--unoc-primary-red-soft) !important;
    border-color: var(--unoc-primary-red) !important;
    color: var(--unoc-primary-red) !important;
}

.alert-secondary {
    background-color: #e8e9ec !important;
    border-color: var(--unoc-dark-blue) !important;
    color: var(--unoc-dark-blue) !important;
}

.alert-info {
    background-color: var(--unoc-light-blue-soft) !important;
    border-color: var(--unoc-light-blue) !important;
    color: var(--unoc-light-blue) !important;
}

/* ================================================
   Background Colors
   ================================================ */

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

.bg-secondary {
    background-color: var(--unoc-dark-blue) !important;
}

.bg-info {
    background-color: var(--unoc-light-blue) !important;
}

.bg-light-primary {
    background-color: var(--unoc-primary-red-soft) !important;
}

.bg-light-secondary {
    background-color: #e8e9ec !important;
}

.bg-light-info {
    background-color: var(--unoc-light-blue-soft) !important;
}

/* ================================================
   Text Colors
   ================================================ */

.text-primary {
    color: var(--unoc-primary-red) !important;
}

.text-secondary {
    color: var(--unoc-dark-blue) !important;
}

.text-info {
    color: var(--unoc-light-blue) !important;
}

/* ================================================
   Border Colors
   ================================================ */

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

.border-secondary {
    border-color: var(--unoc-dark-blue) !important;
}

.border-info {
    border-color: var(--unoc-light-blue) !important;
}

/* ================================================
   Form Elements
   ================================================ */

/* Default form borders — neutral gray, NOT red */
.form-control,
.form-select {
    border-color: #d1d5db !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #3e6edf !important;
    box-shadow: 0 0 0 0.25rem rgba(62, 110, 223, 0.15) !important;
}

/* Red border ONLY for validation errors */
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.15) !important;
}

.form-check-input:checked {
    background-color: var(--unoc-primary-red) !important;
    border-color: var(--unoc-primary-red) !important;
}

/* ================================================
   Navigation & Links
   ================================================ */

a {
    color: var(--unoc-primary-red);
}

a:hover,
a:focus {
    color: var(--unoc-primary-red-hover);
}

.nav-link {
    color: var(--unoc-dark-gray);
}

.nav-link:hover,
.nav-link:focus {
    color: var(--unoc-primary-red);
}

.nav-link.active {
    color: var(--unoc-primary-red) !important;
}

/* Navbar brand */
.navbar-brand {
    color: var(--unoc-primary-red) !important;
    font-weight: bold;
}

/* ================================================
   Sidebar Styling - UNOC Brand Colors
   ================================================ */

/* Main sidebar background */
#kt_app_sidebar,
.app-sidebar {
    background: #232323 !important;
}

/* Global font family - Poppins */
body, .app-default, .form-control, .btn, .menu-title, .card,
input, select, textarea, .modal, .dropdown-menu, h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif !important;
}

/* Sidebar logo area */
.app-sidebar-logo {
    background-color: transparent !important;
    border-bottom: 1px solid #2e2e2e;
}

.app-sidebar-logo img {
    filter: brightness(0) invert(1);
}

/* Menu items */
.app-sidebar .menu .menu-item .menu-link {
    color: #ffffff !important;
    transition: all 0.3s ease;
}

.app-sidebar .menu .menu-item .menu-link:hover {
    background-color: var(--unoc-primary-red) !important;
    color: #ffffff !important;
    transform: translateX(5px);
}

.app-sidebar .menu .menu-item .menu-link.active {
    background-color: var(--unoc-primary-red) !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(236, 34, 41, 0.3);
}

/* Menu icons - target both wrapper and actual icon elements to override site.css */
.app-sidebar .menu .menu-icon {
    color: rgba(255, 255, 255, 0.7) !important;
}

.app-sidebar .menu .menu-icon .ki-outline,
.app-sidebar .menu .menu-icon .ki-solid,
.app-sidebar .menu .menu-icon .ki-duotone,
.app-sidebar .menu .menu-icon [class*="ki-"] {
    color: rgba(255, 255, 255, 0.7) !important;
}

.app-sidebar .menu .menu-link:hover .menu-icon,
.app-sidebar .menu .menu-link.active .menu-icon,
.app-sidebar .menu .menu-item.here > .menu-link .menu-icon {
    color: #ffffff !important;
}

.app-sidebar .menu .menu-link:hover .menu-icon .ki-outline,
.app-sidebar .menu .menu-link:hover .menu-icon .ki-solid,
.app-sidebar .menu .menu-link:hover .menu-icon .ki-duotone,
.app-sidebar .menu .menu-link:hover .menu-icon [class*="ki-"],
.app-sidebar .menu .menu-link.active .menu-icon .ki-outline,
.app-sidebar .menu .menu-link.active .menu-icon .ki-solid,
.app-sidebar .menu .menu-link.active .menu-icon .ki-duotone,
.app-sidebar .menu .menu-link.active .menu-icon [class*="ki-"],
.app-sidebar .menu .menu-item.here > .menu-link .menu-icon .ki-outline,
.app-sidebar .menu .menu-item.here > .menu-link .menu-icon .ki-solid,
.app-sidebar .menu .menu-item.here > .menu-link .menu-icon .ki-duotone,
.app-sidebar .menu .menu-item.here > .menu-link .menu-icon [class*="ki-"] {
    color: #ffffff !important;
}

/* Menu title */
.app-sidebar .menu .menu-title {
    color: rgba(255, 255, 255, 0.9) !important;
}

.app-sidebar .menu .menu-link:hover .menu-title,
.app-sidebar .menu .menu-link.active .menu-title {
    color: #ffffff !important;
}

/* Accordion arrows */
.app-sidebar .menu .menu-arrow {
    color: rgba(255, 255, 255, 0.5) !important;
}

.app-sidebar .menu .menu-arrow .ki-outline,
.app-sidebar .menu .menu-arrow [class*="ki-"] {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Sub menu items — wider for longer text */
.app-sidebar .menu-sub .menu-link {
    background-color: transparent !important;
    padding-left: 2rem !important;
    padding-right: 0.5rem !important;
}

.app-sidebar .menu-sub .menu-title {
    white-space: nowrap;
}

.app-sidebar .menu-sub .menu-link:hover {
    background-color: rgba(236, 34, 41, 0.15) !important;
    border-left: 3px solid var(--unoc-primary-red);
}

.app-sidebar .menu-sub .menu-link.active {
    background-color: rgba(236, 34, 41, 0.2) !important;
    border-left: 3px solid var(--unoc-primary-red);
}

/* Hide bullet dots — use separators instead */
.app-sidebar .menu .menu-bullet {
    display: none !important;
}

/* Thin separators between submenu items */
.app-sidebar .menu-sub .menu-item + .menu-item {
    border-top: 1px solid #2e2e2e;
}

/* Sidebar footer */
.app-sidebar-footer {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid #2e2e2e;
}

.app-sidebar-footer .ki-outline,
.app-sidebar-footer .ki-solid,
.app-sidebar-footer [class*="ki-"] {
    color: rgba(255, 255, 255, 0.7) !important;
}

.app-sidebar-footer .text-gray-500 {
    color: rgba(255, 255, 255, 0.6) !important;
}

.app-sidebar-footer .text-gray-800 {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Sidebar scroll */
.app-sidebar ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.app-sidebar ::-webkit-scrollbar-thumb {
    background: var(--unoc-primary-red);
}

.app-sidebar ::-webkit-scrollbar-thumb:hover {
    background: var(--unoc-primary-red-hover);
}

/* ================================================
   Card Headers & Titles
   ================================================ */

.card-header {
    background-color: transparent;
    border-bottom: 2px solid var(--unoc-primary-red);
}

.card-title {
    color: var(--unoc-dark-blue);
}

/* ================================================
   Table Styling
   ================================================ */

.table thead th {
    background-color: var(--unoc-light-gray);
    color: var(--unoc-dark-blue);
    font-weight: 600;
    border-bottom: 2px solid var(--unoc-primary-red);
}

.table-hover tbody tr:hover {
    background-color: var(--unoc-primary-red-soft);
}

/* ================================================
   Progress Bars
   ================================================ */

.progress-bar {
    background-color: var(--unoc-primary-red);
}

.progress-bar.bg-info {
    background-color: var(--unoc-light-blue) !important;
}

/* ================================================
   Charts & Graphs
   ================================================ */

.apexcharts-theme-light .apexcharts-series path[stroke*="#1B84FF"],
.apexcharts-theme-light .apexcharts-series path[fill*="#1B84FF"] {
    stroke: var(--unoc-primary-red) !important;
    fill: var(--unoc-primary-red) !important;
}

/* ================================================
   Tooltips & Popovers
   ================================================ */

.tooltip-inner {
    background-color: var(--unoc-dark-blue);
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: var(--unoc-dark-blue);
}

/* ================================================
   Modals
   ================================================ */

.modal-header {
    background-color: var(--unoc-light-gray);
    border-bottom: 2px solid var(--unoc-primary-red);
}

.modal-header .modal-title {
    color: var(--unoc-dark-blue);
    font-weight: 600;
}

/* ================================================
   Pagination
   ================================================ */

.page-link {
    color: var(--unoc-primary-red);
}

.page-link:hover {
    color: var(--unoc-primary-red-hover);
    background-color: var(--unoc-primary-red-soft);
}

.page-item.active .page-link {
    background-color: var(--unoc-primary-red);
    border-color: var(--unoc-primary-red);
    color: #ffffff;
}

/* ================================================
   Breadcrumb
   ================================================ */

.breadcrumb-item a {
    color: var(--unoc-medium-gray);
}

.breadcrumb-item a:hover {
    color: var(--unoc-primary-red);
}

.breadcrumb-item.active {
    color: var(--unoc-dark-blue);
}

/* ================================================
   Dropdown
   ================================================ */

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--unoc-primary-red-soft);
    color: var(--unoc-primary-red);
}

.dropdown-item.active {
    background-color: var(--unoc-primary-red);
    color: #ffffff;
}

/* ================================================
   Custom Scrollbar (Webkit browsers)
   ================================================ */

::-webkit-scrollbar-track {
    background: var(--unoc-light-gray);
}

::-webkit-scrollbar-thumb {
    background: var(--unoc-primary-red);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--unoc-primary-red-hover);
}

/* ================================================
   Loading Spinners
   ================================================ */

.spinner-border {
    color: var(--unoc-primary-red);
}

.spinner-border.text-primary {
    color: var(--unoc-primary-red) !important;
}

/* ================================================
   Search Bar Padding
   ================================================ */

.header-search .search-input.form-control {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

.header-search .search-icon {
    left: 6px !important;
    margin-left: 0 !important;
}

/* ================================================
   Custom UNOC Classes
   ================================================ */

.unoc-gradient {
    background: linear-gradient(135deg, var(--unoc-primary-red) 0%, var(--unoc-dark-blue) 100%);
}

.unoc-shadow {
    box-shadow: 0 4px 6px rgba(236, 34, 41, 0.1);
}

.unoc-shadow-hover:hover {
    box-shadow: 0 8px 12px rgba(236, 34, 41, 0.15);
    transition: box-shadow 0.3s ease;
}

/* ================================================
   Issue Priority Colors (Custom for UNOC)
   ================================================ */

.priority-low {
    background-color: #28a745 !important;
}

.priority-medium {
    background-color: #ffc107 !important;
}

.priority-high {
    background-color: #fd7e14 !important;
}

.priority-critical {
    background-color: var(--unoc-primary-red) !important;
}

/* ================================================
   Status Colors (Custom for UNOC)
   ================================================ */

.status-open {
    background-color: var(--unoc-light-blue) !important;
    color: white !important;
}

.status-in-progress {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

.status-resolved {
    background-color: #28a745 !important;
    color: white !important;
}

.status-closed {
    background-color: var(--unoc-dark-gray) !important;
    color: white !important;
}

/* ================================================
   Dark Mode Support
   ================================================ */

[data-bs-theme="dark"] {
    --unoc-primary-red: #ff4c52;
    --unoc-primary-red-hover: #ec2229;
    --unoc-dark-blue: #2c2e4a;
    --unoc-dark-blue-hover: #1f2033;
    --unoc-light-blue: #5c88e8;
    --unoc-light-blue-hover: #3e6edf;
}

/* Dark mode sidebar - same color */
[data-bs-theme="dark"] #kt_app_sidebar,
[data-bs-theme="dark"] .app-sidebar {
    background: #232323 !important;
}