/* ============================================================================
   APP-WIDE THEME SYSTEM
   Three themes: Original (default), Light (iOS-style), Dark (iOS OLED-style)
   ============================================================================ */

/* ============================================================================
   LIGHT THEME (iOS Style)
   - Background: #F2F2F7 (iOS System Gray 6)
   - Cards/Surfaces: #FFFFFF
   - Text: #000000, #3C3C43 (secondary)
   - Separators: #C6C6C8
   ============================================================================ */
html.theme-light,
body.theme-light {
    --bs-body-bg: #F2F2F7 !important;
    --bs-body-color: #000000 !important;
    background-color: #F2F2F7 !important;
    color: #000000 !important;
}

/* Ensure no white gaps around navbar */
body.theme-light .navbar,
body.theme-light nav.navbar {
    background-color: #F2F2F7 !important;
}

body.theme-light .row,
body.theme-light .col,
body.theme-light [class*="col-"] {
    background-color: transparent !important;
}

/* Sidebar and Navbar */
body.theme-light .bg-dark,
body.theme-light .sidebar,
body.theme-light .navbar-dark,
body.theme-light .navbar-dark.bg-dark {
    background-color: #FFFFFF !important;
    border-color: #C6C6C8 !important;
}

body.theme-light .d-flex.flex-column.flex-shrink-0.p-3.bg-dark {
    background-color: #FFFFFF !important;
    border-right: 1px solid #C6C6C8 !important;
}

/* Text colors - override text-white class in light mode */
body.theme-light .text-white,
body.theme-light a.text-white,
body.theme-light .nav-link.text-white,
body.theme-light .btn-link.text-white,
body.theme-light .navbar-brand,
body.theme-light .navbar-dark .navbar-brand,
body.theme-light span.fs-4 {
    color: #000000 !important;
}

body.theme-light .text-muted {
    color: #3C3C43 !important;
}

/* Hamburger menu icon - fix visibility */
body.theme-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

body.theme-light .navbar-toggler {
    border-color: rgba(0, 0, 0, 0.3) !important;
}

/* Cards */
body.theme-light .card,
body.theme-light .card.bg-dark,
body.theme-light .card.bg-dark.text-white {
    background-color: #FFFFFF !important;
    border-color: #C6C6C8 !important;
    color: #000000 !important;
}

body.theme-light .card-header,
body.theme-light .card-header.bg-secondary {
    background-color: #F2F2F7 !important;
    border-color: #C6C6C8 !important;
    color: #000000 !important;
}

body.theme-light .detail-close-btn {
    color: #000000 !important;
    border-color: #C6C6C8 !important;
}

body.theme-light .detail-close-btn:hover {
    background-color: #E5E5EA !important;
    color: #000000 !important;
}

body.theme-light .card-body {
    color: #000000 !important;
}

body.theme-light .card h3,
body.theme-light .card h5,
body.theme-light .card strong {
    color: #000000 !important;
}

/* Form controls */
body.theme-light .form-control,
body.theme-light .form-select,
body.theme-light .form-control.bg-dark,
body.theme-light .form-select.bg-dark {
    background-color: #FFFFFF !important;
    border-color: #C6C6C8 !important;
    color: #000000 !important;
}

body.theme-light .form-control::placeholder {
    color: #8E8E93 !important;
}

/* Form switch toggle - fix visibility */
body.theme-light .form-check-input {
    background-color: #E5E5EA !important;
    border-color: #C6C6C8 !important;
}

body.theme-light .form-check-input:checked {
    background-color: #34C759 !important;
    border-color: #34C759 !important;
}

body.theme-light .form-check-label {
    color: #000000 !important;
}

/* Dropdown menus */
body.theme-light .dropdown-menu {
    background-color: #FFFFFF !important;
    border-color: #C6C6C8 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

body.theme-light .dropdown-item {
    color: #000000 !important;
}

body.theme-light .dropdown-item:hover,
body.theme-light .dropdown-item:focus {
    background-color: #F2F2F7 !important;
}

body.theme-light .dropdown-divider {
    border-color: #C6C6C8 !important;
}

/* Modals */
body.theme-light .modal-content {
    background-color: #FFFFFF !important;
    color: #000000 !important;
}

body.theme-light .modal-header,
body.theme-light .modal-footer {
    border-color: #C6C6C8 !important;
}

body.theme-light .modal-title {
    color: #000000 !important;
}

/* Navigation */
body.theme-light .nav-link.text-white {
    color: #000000 !important;
}

body.theme-light .nav-link.active {
    background-color: #007AFF !important;
    color: #FFFFFF !important;
}

body.theme-light .nav-tabs .nav-link {
    color: #3C3C43 !important;
}

body.theme-light .nav-tabs .nav-link.active {
    background-color: #007AFF !important;
    color: #FFFFFF !important;
    border-color: #007AFF !important;
}

/* Tables - fix dark table backgrounds */
body.theme-light .table,
body.theme-light .table-dark {
    color: #000000 !important;
    background-color: #FFFFFF !important;
}

body.theme-light .table-dark th,
body.theme-light .table-dark td,
body.theme-light .table th,
body.theme-light .table td {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border-color: #C6C6C8 !important;
}

body.theme-light .table thead th,
body.theme-light .table-dark thead th {
    background-color: #F2F2F7 !important;
    color: #000000 !important;
    border-color: #C6C6C8 !important;
}

body.theme-light .table-hover tbody tr:hover,
body.theme-light .table-dark.table-hover tbody tr:hover,
body.theme-light .table-hover tbody tr:hover td {
    background-color: #E5E5EA !important;
}

/* Borders */
body.theme-light .border-secondary {
    border-color: #C6C6C8 !important;
}

/* Buttons */
body.theme-light .btn-outline-secondary {
    border-color: #C6C6C8 !important;
    color: #3C3C43 !important;
}

body.theme-light .btn-outline-secondary:hover {
    background-color: #E5E5EA !important;
    color: #000000 !important;
}

body.theme-light .btn-link.text-white {
    color: #007AFF !important;
}

/* Progress bars */
body.theme-light .progress {
    background-color: #E5E5EA !important;
}

/* List groups */
body.theme-light .list-group-item {
    background-color: #FFFFFF !important;
    border-color: #C6C6C8 !important;
    color: #000000 !important;
}

/* Horizontal rules */
body.theme-light hr {
    border-color: #C6C6C8 !important;
    opacity: 1 !important;
}

/* Content wrapper and main content */
body.theme-light .content-wrapper,
body.theme-light main,
body.theme-light .container-fluid {
    background-color: #F2F2F7 !important;
}

/* Page titles */
body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light h5,
body.theme-light h6 {
    color: #000000 !important;
}

body.theme-light h1.text-white,
body.theme-light h2.text-white {
    color: #000000 !important;
}

/* Toast notifications */
body.theme-light .toast {
    background-color: #FFFFFF !important;
    color: #000000 !important;
}

/* Secondary backgrounds */
body.theme-light .bg-secondary {
    background-color: #E5E5EA !important;
}

/* Accordions */
body.theme-light .accordion-item {
    background-color: #FFFFFF !important;
    border-color: #C6C6C8 !important;
}

body.theme-light .accordion-button {
    background-color: #FFFFFF !important;
    color: #000000 !important;
}

body.theme-light .accordion-button:not(.collapsed) {
    background-color: #F2F2F7 !important;
    color: #000000 !important;
}

/* Badges - ensure visibility */
body.theme-light .badge.bg-secondary {
    background-color: #8E8E93 !important;
    color: #FFFFFF !important;
}

/* On-hold (HLD) badge - light theme */
body.theme-light .badge.bg-dark {
    background-color: #555555 !important;
    color: #FFFFFF !important;
}

/* Alerts */
body.theme-light .alert {
    border-radius: 8px;
}

/* Offcanvas */
body.theme-light .offcanvas,
body.theme-light .offcanvas-body {
    background-color: #FFFFFF !important;
    color: #000000 !important;
}

/* Collapse nav items on mobile */
body.theme-light .navbar-collapse {
    background-color: #F2F2F7 !important;
    border: none !important;
}

body.theme-light .navbar-nav .nav-link {
    color: #000000 !important;
}

/* Fix white bars - target all possible wrappers */
html.theme-light,
html.theme-light body,
body.theme-light,
body.theme-light .container-fluid,
body.theme-light .content-wrapper,
body.theme-light main {
    background-color: #F2F2F7 !important;
}

/* Remove any borders from navbar area */
body.theme-light .navbar-dark,
body.theme-light nav.navbar-dark,
body.theme-light .navbar-dark.bg-dark {
    background-color: #F2F2F7 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Fix sidebar border showing through */
body.theme-light .d-flex.flex-column.flex-shrink-0.p-3.bg-dark {
    background-color: #F2F2F7 !important;
    border: none !important;
}

/* Remove any box shadows in light mode header */
body.theme-light .d-lg-none {
    background-color: #F2F2F7 !important;
}

/* Icons in light mode - ensure visibility */
body.theme-light .fas,
body.theme-light .fab,
body.theme-light .far {
    color: inherit;
}

/* Project page specific fixes */
body.theme-light .project-row strong {
    color: #000000 !important;
}

body.theme-light .cursor-pointer.project-row:hover {
    background-color: #E5E5EA !important;
}

/* Fix table-dark in light mode for projects */
body.theme-light .table-dark,
body.theme-light .table.table-dark {
    --bs-table-bg: #FFFFFF !important;
    --bs-table-color: #000000 !important;
    --bs-table-hover-bg: #E5E5EA !important;
    --bs-table-hover-color: #000000 !important;
    background-color: #FFFFFF !important;
    color: #000000 !important;
}

body.theme-light .table-dark th,
body.theme-light .table-dark td {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border-color: #E5E5EA !important;
}

body.theme-light .table-dark thead th {
    background-color: #F2F2F7 !important;
    color: #3C3C43 !important;
    border-color: #E5E5EA !important;
}

body.theme-light .table-dark tbody tr:hover {
    background-color: #E5E5EA !important;
}

/* Project workspace outline selections */
body.theme-light .outline-task.selected {
    background-color: rgba(0, 122, 255, 0.15) !important;
    border-left: 3px solid #007AFF !important;
}

body.theme-light .outline-task:hover {
    background-color: #F2F2F7 !important;
}

body.theme-light .outline-task {
    background-color: #FFFFFF !important;
}

body.theme-light .outline-milestone,
body.theme-light .outline-task,
body.theme-light .outline-subtask {
    color: #000000 !important;
}

body.theme-light .milestone-header,
body.theme-light .milestone-header.bg-dark {
    background-color: #E5E5EA !important;
}

body.theme-light .outline-content {
    background-color: #F9F9FB !important;
    border-color: #007AFF !important;
}

body.theme-light .task-name {
    color: #000000 !important;
}

body.theme-light .subtask-label {
    color: #000000 !important;
}

/* ============================================================================
   DARK THEME (iOS OLED Style)
   - Background: #000000 (True black)
   - Cards/Surfaces: #1C1C1E
   - Text: #FFFFFF, #8E8E93 (secondary)
   - Separators: #38383A
   ============================================================================ */
body.theme-dark {
    --bs-body-bg: #000000 !important;
    --bs-body-color: #FFFFFF !important;
    background-color: #000000 !important;
    color: #FFFFFF !important;
}

body.theme-dark .bg-dark,
body.theme-dark .sidebar,
body.theme-dark .navbar-dark,
body.theme-dark .d-flex.flex-column.flex-shrink-0.p-3.bg-dark {
    background-color: #000000 !important;
    border-color: #38383A !important;
}

body.theme-dark .card,
body.theme-dark .card.bg-dark {
    background-color: #1C1C1E !important;
    border-color: #38383A !important;
    color: #FFFFFF !important;
}

body.theme-dark .card-header,
body.theme-dark .card-header.bg-secondary {
    background-color: #2C2C2E !important;
    border-color: #38383A !important;
    color: #FFFFFF !important;
}

body.theme-dark .form-control,
body.theme-dark .form-select,
body.theme-dark .form-control.bg-dark,
body.theme-dark .form-select.bg-dark {
    background-color: #1C1C1E !important;
    border-color: #38383A !important;
    color: #FFFFFF !important;
}

body.theme-dark .form-control::placeholder {
    color: #8E8E93 !important;
}

body.theme-dark .form-check-input {
    background-color: #38383A !important;
    border-color: #48484A !important;
}

body.theme-dark .form-check-input:checked {
    background-color: #0A84FF !important;
    border-color: #0A84FF !important;
}

body.theme-dark .dropdown-menu {
    background-color: #1C1C1E !important;
    border-color: #38383A !important;
}

body.theme-dark .dropdown-item {
    color: #FFFFFF !important;
}

body.theme-dark .dropdown-item:hover,
body.theme-dark .dropdown-item:focus {
    background-color: #2C2C2E !important;
}

body.theme-dark .modal-content {
    background-color: #1C1C1E !important;
    color: #FFFFFF !important;
}

body.theme-dark .modal-header,
body.theme-dark .modal-footer {
    border-color: #38383A !important;
}

body.theme-dark .nav-tabs .nav-link {
    color: #8E8E93 !important;
}

body.theme-dark .nav-tabs .nav-link.active {
    background-color: #0A84FF !important;
    color: #FFFFFF !important;
    border-color: #0A84FF !important;
}

body.theme-dark .border-secondary {
    border-color: #38383A !important;
}

body.theme-dark .btn-outline-secondary {
    border-color: #38383A !important;
    color: #8E8E93 !important;
}

body.theme-dark .btn-outline-secondary:hover {
    background-color: #2C2C2E !important;
    color: #FFFFFF !important;
}

body.theme-dark .table,
body.theme-dark .table-dark {
    color: #FFFFFF !important;
    background-color: #1C1C1E !important;
}

body.theme-dark .table th,
body.theme-dark .table td,
body.theme-dark .table-dark th,
body.theme-dark .table-dark td {
    background-color: #1C1C1E !important;
    border-color: #38383A !important;
}

body.theme-dark .table thead th,
body.theme-dark .table-dark thead th {
    background-color: #2C2C2E !important;
    border-color: #38383A !important;
}

body.theme-dark .table-hover tbody tr:hover,
body.theme-dark .table-hover tbody tr:hover td {
    background-color: #2C2C2E !important;
}

body.theme-dark .progress {
    background-color: #2C2C2E !important;
}

body.theme-dark .list-group-item {
    background-color: #1C1C1E !important;
    border-color: #38383A !important;
    color: #FFFFFF !important;
}

body.theme-dark hr {
    border-color: #38383A !important;
    opacity: 1 !important;
}

body.theme-dark .content-wrapper,
body.theme-dark main,
body.theme-dark .container-fluid {
    background-color: #000000 !important;
}

body.theme-dark .toast {
    background-color: #2C2C2E !important;
    color: #FFFFFF !important;
    border: 1px solid #38383A !important;
}

body.theme-dark .toast-header {
    background-color: #3A3A3C !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid #38383A !important;
}

body.theme-dark .toast-body {
    color: #FFFFFF !important;
}

body.theme-dark .bg-secondary {
    background-color: #2C2C2E !important;
}

/* On-hold (HLD) badge - dark theme */
body.theme-dark .badge.bg-dark {
    background-color: #A0A0A5 !important;
    color: #000000 !important;
}

body.theme-dark .text-muted {
    color: #8E8E93 !important;
}

body.theme-dark .accordion-item {
    background-color: #1C1C1E !important;
    border-color: #38383A !important;
}

body.theme-dark .accordion-button {
    background-color: #1C1C1E !important;
    color: #FFFFFF !important;
}

body.theme-dark .accordion-button:not(.collapsed) {
    background-color: #2C2C2E !important;
}

/* Detail panel close button default styling */
.detail-close-btn {
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.detail-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
}

/* ============================================================================
   ORIGINAL THEME - No changes needed (default Bootstrap dark theme)
   ============================================================================ */
body.theme-original {
    /* Use default Bootstrap dark theme styles */
}

/* On-hold (HLD) badge - original theme */
body.theme-original .badge.bg-dark {
    background-color: #555555 !important;
    color: #FFFFFF !important;
}

/* ============================================================================
   PRODUCT CARD - Preserve tier colors on focus/click (all themes)
   ============================================================================ */
.product-card .product-card-main,
.product-card .product-card-main:focus,
.product-card .product-card-main:focus-visible,
.product-card .product-card-main:active,
.product-card .product-card-main[aria-expanded="true"],
.product-card .product-card-main[aria-expanded="false"] {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

body.theme-light .product-card .product-card-main,
body.theme-light .product-card .product-card-main:focus,
body.theme-light .product-card .product-card-main:focus-visible,
body.theme-light .product-card .product-card-main:active,
body.theme-light .product-card .product-card-main[aria-expanded="true"],
body.theme-light .product-card .product-card-main[aria-expanded="false"] {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

body.theme-dark .product-card .product-card-main,
body.theme-dark .product-card .product-card-main:focus,
body.theme-dark .product-card .product-card-main:focus-visible,
body.theme-dark .product-card .product-card-main:active,
body.theme-dark .product-card .product-card-main[aria-expanded="true"],
body.theme-dark .product-card .product-card-main[aria-expanded="false"] {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

body.theme-original .product-card .product-card-main,
body.theme-original .product-card .product-card-main:focus,
body.theme-original .product-card .product-card-main:focus-visible,
body.theme-original .product-card .product-card-main:active,
body.theme-original .product-card .product-card-main[aria-expanded="true"],
body.theme-original .product-card .product-card-main[aria-expanded="false"] {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}