/**
 * 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 */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* 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 */
  transition: color 100ms ease;
}

.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 */
  transition: background-color 100ms ease, color 100ms ease;
}

.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 */
  transition: color 100ms ease;
}

.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-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
  background-color: #777777 !important;
  border-color: #777777 !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);
  color: #ffffff !important;
}

.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 {
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.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);
  background-color: var(--sunpro-light-gray);
  color: var(--sunpro-blue);
}

/* Modals (e.g. calendar): light tab strip; global .nav-link:hover { color: white } is unreadable */
#calendarModal .nav-tabs .nav-link:not(.active) {
  color: #212529;
}
#calendarModal .nav-tabs .nav-link:not(.active):hover,
#calendarModal .nav-tabs .nav-link:not(.active):focus {
  color: var(--sunpro-blue);
  border-color: var(--sunpro-orange);
}

/* 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 (scoped to #product_cost_admin_container only) */
/* main.css sets .card-header { background: linear-gradient(...) } — must use `background` shorthand
   with !important so we reset background-image, not only background-color */
#product_cost_admin_container .search-section .card-header {
  background: #e9ecef !important;
  color: #212529 !important;
}

/* Task-type toolbar: solid bar replaces global card-header gradient */
#product_cost_admin_container .task-type-section .product-cost-section-header {
  background: var(--sunpro-blue) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

#product_cost_admin_container .task-type-section .product-cost-section-header h4 {
  color: #ffffff !important;
}

#product_cost_admin_container .task-type-section .product-cost-section-header .form-check-label {
  color: #ffffff !important;
}

#product_cost_admin_container .task-type-section .product-cost-section-header .input-group-text {
  background-color: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
}

#product_cost_admin_container .task-type-section .product-cost-section-header .form-control {
  border-color: rgba(255, 255, 255, 0.28);
}

#product_cost_admin_container .table thead th {
  background-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;
}

/* 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 {
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.5);
}

.invalid-row-warning {
    animation: flash-warning 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes flash-warning {
    0%   { background-color: inherit; }
    40%  { background-color: rgba(220, 53, 69, 0.15); }
    100% { background-color: inherit; }
}

/* ── Bid rows with notes ── */
tr.has-latest-note > td {
    background-color: rgba(243, 112, 33, 0.08) !important;
    border-left: 3px solid var(--sunpro-orange);
}

tr.has-latest-note > td:not(:first-child) {
    border-left: none;
}

.bid-note-preview-row {
    background-color: rgba(243, 112, 33, 0.04);
    color: #6c564a;
    border-left: 3px solid var(--sunpro-orange);
}

/* ── Reduced-motion: disable motion, keep color signals ── */
@media (prefers-reduced-motion: reduce) {
    .invalid-row-warning {
        animation: none;
    }

    .spin {
        animation-duration: 2s;
    }
}