/**
 * SUNPRO Theme CSS
 * Based on colors from the SUNPRO logo
 */

:root {
  --sunpro-blue: #003399;      /* Dark blue from the SUNPRO text */
  --sunpro-orange: #F37021;    /* Orange from the roof/triangle */
  --sunpro-gray: #888888;      /* Gray from the border/outline */
  --sunpro-light-gray: #e2e2e2;
  --sunpro-bg: #ffffff;        /* Light blue background */
  --sunpro-blue-hover: #002277; /* Darker blue for hover states */
  --sunpro-orange-hover: #E05E10; /* Darker orange for hover states */
}

/* Global overrides */
body {
  background-color: var(--sunpro-bg);
  color: #333333;
}

/* Navigation bar */
.navbar {
  background-color: var(--sunpro-blue) !important;
  border-bottom: 3px solid var(--sunpro-orange);
  --bs-nav-link-color: #ffffff;  /* Override Bootstrap's nav link color variable */
  --bs-navbar-color: #ffffff;    /* Override Bootstrap's navbar color variable */
  --bs-navbar-hover-color: var(--sunpro-orange);  /* Orange on hover */
  --bs-navbar-active-color: var(--sunpro-orange); /* Orange when active */
  --bs-link-color: #ffffff;      /* Override Bootstrap's link color variable */
  --bs-link-hover-color: var(--sunpro-orange);  /* Orange on hover */
}

/* Target only direct navbar links, not dropdown items */
.navbar > .container-fluid > .navbar-nav > .nav-item > .nav-link,
.navbar .navbar-nav > .nav-item > .nav-link {
  color: #ffffff !important;  /* White for top-level nav links */
}

.navbar > .container-fluid > .navbar-nav > .nav-item > .nav-link:hover,
.navbar .navbar-nav > .nav-item > .nav-link:hover {
  color: var(--sunpro-orange) !important;  /* Orange on hover */
}

/* Dropdown menu styling - reset to default dark text on light background */
.navbar .dropdown-menu {
  background-color: #ffffff;
}

.navbar .dropdown-menu .dropdown-item {
  color: #212529 !important;  /* Bootstrap default dark text */
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
  background-color: var(--sunpro-orange);
  color: #ffffff !important;
}

/* For Work Orders dropdown that has nav-link inside dropdown-item */
.navbar .dropdown-menu .dropdown-item .nav-link {
  color: #212529 !important;  /* Dark text for nested nav-links in dropdowns */
  padding: 0;  /* Remove extra padding since dropdown-item already has padding */
}

.navbar .dropdown-menu .dropdown-item:hover .nav-link,
.navbar .dropdown-menu .dropdown-item:focus .nav-link {
  color: #ffffff !important;  /* White text on orange background when hovering */
}

.navbar-dark .navbar-brand {
  color: #ffffff !important;  /* Changed to white for better readability */
}

.navbar-dark .navbar-brand:hover {
  color: var(--sunpro-orange) !important;  /* Orange on hover */
}

/* Buttons */
.btn-primary {
  background-color: var(--sunpro-blue) !important;
  border-color: var(--sunpro-blue) !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--sunpro-blue-hover) !important;
  border-color: var(--sunpro-blue-hover) !important;
}

.btn-secondary {
  background-color: var(--sunpro-gray) !important;
  border-color: var(--sunpro-gray) !important;
}

.btn-success {
  background-color: var(--sunpro-orange) !important;
  border-color: var(--sunpro-orange) !important;
}

.btn-success:hover, .btn-success:focus, .btn-success:active {
  background-color: var(--sunpro-orange-hover) !important;
  border-color: var(--sunpro-orange-hover) !important;
}

/* Headers and titles */
h1, h2, h3, h4, h5, h6, .title {
  color: var(--sunpro-blue);
}

/* Tables */
.table thead th {
  background-color: var(--sunpro-blue);
  color: white;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--sunpro-light-gray);
}

.table .btn-primary {
  background-color: var(--sunpro-blue);
  border-color: var(--sunpro-blue);
}

/* Cards */
.card-header {
  background-color: var(--sunpro-orange) !important;
  color: black !important;
}

.card {
  border-color: var(--sunpro-gray);
}

/* Secondary navigation areas */
#nav-1, #nav-2, #nav-3 {
  background-color: var(--sunpro-light-gray) !important;
  border-bottom: 2px solid var(--sunpro-orange);
}

/* Tabs */
/* .nav-tabs .nav-link {
  /* color: white; */
/* } */ */

.nav-tabs .dropdown-menu {
  background-color: #ffffff;  /* White background for dropdown menus */
}

.nav-tabs .dropdown-menu .dropdown-item,
.nav-tabs .dropdown-menu .dropdown-item .nav-link {
  color: #212529 !important;  /* Dark text for readability */
}

.nav-tabs .dropdown-menu .dropdown-item:hover,
.nav-tabs .dropdown-menu .dropdown-item:focus {
  background-color: var(--sunpro-orange);
}

.nav-tabs .dropdown-menu .dropdown-item:hover .nav-link,
.nav-tabs .dropdown-menu .dropdown-item:focus .nav-link {
  color: #ffffff !important;  /* White text on orange background */
}

.nav-tabs .nav-link.active {
  color: rgb(255, 255, 255);
  background-color: var(--sunpro-blue);
  border-color: var(--sunpro-blue);
}

.nav-tabs .nav-link:hover {
  border-color: var(--sunpro-orange);
  color: white;
}

/* Forms */
.form-control:focus {
  border-color: var(--sunpro-blue);
  box-shadow: 0 0 0 0.25rem rgba(0, 51, 153, 0.25);
}

/* Badges and alerts */
.badge-primary, .alert-primary {
  background-color: var(--sunpro-blue);
  color: white;
}

.badge-success, .alert-success {
  background-color: var(--sunpro-orange);
  color: white;
}

/* Pagination */
.pagination .page-item.active .page-link {
  background-color: var(--sunpro-blue);
  border-color: var(--sunpro-blue);
}

.pagination .page-link {
  color: var(--sunpro-blue);
}

/* Custom elements */
.open_project_btn {
  background-color: var(--sunpro-orange) !important;
  color: white !important;
}

/* Text colors */
.text-primary {
  color: var(--sunpro-blue) !important;
}

.text-success {
  color: var(--sunpro-orange) !important;
}

/* Links */
a {
  color: var(--sunpro-blue);
}

a:hover {
  color: var(--sunpro-blue-hover);
}

/* Lists */
.draggable-list {
  border-color: var(--sunpro-gray);
}

.draggable-list li:not(:last-of-type) {
  border-color: var(--sunpro-gray);
}

.draggable.over {
  border-top-color: var(--sunpro-orange);
}

/* Custom classes for the Proposal section */
.proposal-header-2, .option-header-2 {
  border-color: var(--sunpro-gray);
}

/* Admin sections */
#product_list_admin_container {
  background-color: var(--sunpro-bg);
  color: #333333;
}

/* Product Cost Admin specific styles */
#product_cost_admin_container .card-header {
  background-color: var(--sunpro-blue) !important;
  color: white !important;
}

#product_cost_admin_container .table thead th {
  background-color: var(--sunpro-blue);
  color: white;
}

#product_cost_admin_container .pagination .page-item.active .page-link {
  background-color: var(--sunpro-blue);
  border-color: var(--sunpro-blue);
  color: white;
}

#product_cost_admin_container .badge {
  background-color: var(--sunpro-orange);
}

#product_cost_admin_container .search-section {
  border: 1px solid var(--sunpro-gray);
  border-radius: 4px;
}

#product_cost_admin_container .text-primary {
  color: var(--sunpro-blue) !important;
}

/* Make the tables in the admin page more compact */
#product_cost_admin_container .table td, 
#product_cost_admin_container .table th {
  padding: 0.5rem;
}

/* Style task type section headers */
#product_cost_admin_container .task-type-section h4 {
  color: white;
}

/* Spinning animation for refresh icons */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spin {
    animation: spin 1s linear infinite;
    display: inline-block;
}

/* Invalid bid item row styling */
.biditem-invalid-row {
    background-color: #fff3cd !important; /* Light yellow warning background */
    border-left: 4px solid #dc3545 !important; /* Red left border */
    opacity: 0.8;
}

.biditem-invalid-row:hover {
    background-color: #ffe69c !important; /* Slightly darker on hover */
}

.biditem-disabled-field {
    background-color: #f8f9fa !important; /* Light gray background */
    cursor: not-allowed !important;
    opacity: 0.7;
}

.biditem-delete-only {
    animation: pulse-delete 2s infinite;
}

@keyframes pulse-delete {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(220, 53, 69, 0);
    }
}

.invalid-row-warning {
    animation: blink-warning 1.5s infinite;
}

@keyframes blink-warning {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}