/* ===================================================================
 * styles-boq-container.css
 * Purpose: BOQ container/tab styling, table cell theme reset, theme toggle button
 * Extracted from styles.css during the Apr 2026 split (task #23).
 * =================================================================== */
/* Remove default container spacing for BOQ page */
.container-fluid {
    padding: 0 !important;
    margin: 0 !important;
}

/* BOQ specific container adjustments */
.tab-content {
    margin: 0 !important;
    padding: 0 !important;
}

.tab-pane {
    padding: 0 !important;
    margin: 0 !important;

    .card {
        margin-bottom: 1rem;
    }

    .btn {
        white-space: normal;
        word-wrap: break-word;
    }

    /* Responsive table handling */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

    /* Smaller padding to save space */
    .card-body {
        padding: 1rem;
    }

    /* Note: form-control 16px, .btn 44px min-height, .modal-dialog margin
       and .toast-container positioning were lifted out of .tab-pane scope
       and now live in the top-level @media (max-width:768px) block above
       (Apr 2026 responsive pass). The previous nested `.d-flex { flex-direction: column }`
       was deleted because it broke too many Bootstrap layouts on mobile. */
}

/* Improve touch targets for mobile */
@media (max-width: 576px) {
    /* Larger form controls for better touch */
    .form-control, .btn, .input-group, .form-select {
        min-height: 44px;
        font-size: 16px;
    }

    /* Stack buttons on small screens */
    .btn-group {
        display: flex;
        flex-direction: column;
    }

    .btn-group > .btn {
        margin-bottom: 0.5rem;
        border-radius: 0.25rem !important;
    }
}

/* Style active tabs consistently */
.nav-tabs .nav-item .nav-link.active {
    background-color: var(--primary-color) !important;
    color: var(--dark-bg) !important;
    border-color: var(--primary-color) !important;
}

/* Ensure no color bleeding */
#boqTabs.nav-tabs {
    border-bottom: 1px solid var(--border-color);
}

#boqTabs.nav-tabs .nav-item {
    margin-bottom: -1px;
}

#boqTabs.nav-tabs .nav-link {
    border: 1px solid transparent;
}

/* Always keep the active state styling consistent */
#boqTabs.nav-tabs .nav-link.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--dark-bg);
}

/* Hide all action buttons and set proper table column widths */
.btn-edit, .btn-delete {
    display: none !important;
}

/* Ensure proper table layout */
#catalogTable {
    table-layout: fixed;
    width: 100%;
}

#catalogTable th:nth-child(2),
#catalogTable td:nth-child(2) {
    width: 200px;
    max-width: 200px;
}

#catalogTable th:nth-child(3),
#catalogTable td:nth-child(3) {
    width: auto;
}

#catalogTable th:nth-child(4),
#catalogTable td:nth-child(4) {
    width: 100px;
    max-width: 100px;
}

#catalogTable th:nth-child(5),
#catalogTable td:nth-child(5) {
    width: 150px;
    max-width: 150px;
    text-align: right;
}

/* Global Table Cell Background Reset for Phase and CC Rows */
tr.phase-row td, 
tr.phase-row th, 
tr.catalog-phase-row td, 
tr.catalog-phase-row th,
tr.cc-row td, 
tr.cc-row th, 
tr.catalog-cc-row td, 
tr.catalog-cc-row th {
    background: transparent !important;
    background-color: transparent !important;
}

/* Ensure currency badges or indicators in these rows are also themed */
tr.phase-row .badge, 
tr.catalog-phase-row .badge, 
tr.cc-row .badge, 
tr.catalog-cc-row .badge {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.editable-input {
    position: absolute;
    z-index: 1000;
    margin: -2px;
    padding: 2px;
    width: calc(100% - 4px);
    height: calc(100% + 4px);
    border: 2px solid var(--primary-color);
    background: var(--dark-bg);
    color: var(--text-light);
}

.editable {
    position: relative;
    min-height: 1.2em;
    padding: 2px 4px;
    cursor: text;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.editable:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

:root {
    --primary-color: #D18501;
    --dark-bg: #1C1C1C;
    --darker-bg: #141414;
    --text-light: #FFFFFF;
    --text-dark: #333333;
    --border-color: rgba(245, 179, 1, 0.2);
    --primary-color-rgb: 245, 179, 1;
    --input-bg-dark: #2a2a2a;
    --input-bg-light: #ffffff;
    --phase-bg-dark: #2d1b0d;
    --phase-bg-light: #ffeaa7;
    --cc-bg-dark: #34495e;
    --cc-bg-light: #f8f9fa;
}

:root[data-theme="light"] {
    --dark-bg: #FFFFFF;
    --darker-bg: #F8F9FA;
    --text-light: #000000;
    --text-dark: #000000;
    --primary-color: #B35F00;
    --border-color: rgba(179, 95, 0, 0.8);
    --primary-color-rgb: 179, 95, 0;
    --input-bg-dark: #ffffff;
    --input-bg-light: #f0f0f0;
    --phase-bg-light: #ffeaa7;
    --phase-bg-dark: #2d1b0d;
    --cc-bg-light: #f8f9fa;
    --cc-bg-dark: #34495e;
}

.theme-toggle {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    padding: 0.5rem;
    margin-left: 1rem;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

/* ENHANCED THEME TOGGLEBUTTON - MAXIMUM VISIBILITY */
.theme-toggle {
    background: rgba(245, 179, 1, 0.15) !important;
    border: 2px solid rgba(245, 179, 1, 0.4) !important;
    border-radius: 50% !important;
    color: var(--color-accent-600) !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(245, 179, 1, 0.2) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 1000 !important;
}

/* LIGHT MODE - High contrast orange button */
[data-theme="light"] .theme-toggle {
    background: linear-gradient(135deg, var(--color-accent-600), #FF8C00) !important;
    border: 2px solid #D18501 !important;
    color: #000000 !important;
    box-shadow: 0 3px 12px rgba(245, 179, 1, 0.4) !important;
    text-shadow: none !important;
}

[data-theme="light"] .theme-toggle:hover {
    background: linear-gradient(135deg, #FF8C00, #E5A801) !important;
    border-color: #B35F00 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 16px rgba(245, 179, 1, 0.6) !important;
    color: #000000 !important;
}

/* DARK MODE - Glowing orange button */
[data-theme="dark"] .theme-toggle {
    background: rgba(245, 179, 1, 0.2) !important;
    border: 2px solid rgba(245, 179, 1, 0.6) !important;
    color: var(--color-accent-600) !important;
    box-shadow: 
        0 0 12px rgba(245, 179, 1, 0.3),
        0 4px 16px rgba(245, 179, 1, 0.2) !important;
    text-shadow: 0 0 8px rgba(245, 179, 1, 0.4) !important;
}

[data-theme="dark"] .theme-toggle:hover {
    background: rgba(245, 179, 1, 0.25) !important;
    border-color: rgba(245, 179, 1, 0.8) !important;
    transform: scale(1.1) !important;
    box-shadow: 
        0 0 16px rgba(245, 179, 1, 0.5),
        0 6px 20px rgba(245, 179, 1, 0.3) !important;
    color: #FFD700 !important;
}

/* ENSURE ICON VISIBILITY */
.theme-toggle i {
    font-size: 18px !important;
    line-height: 1 !important;
    display: block !important;
    opacity: 1 !important;
}

[data-theme="light"] .theme-toggle i {
    color: #000000 !important;
    filter: none !important;
    text-shadow: none !important;
}

[data-theme="dark"] .theme-toggle i {
    color: var(--color-accent-600) !important;
    filter: drop-shadow(0 0 4px rgba(245, 179, 1, 0.4)) !important;
    text-shadow: 0 0 6px rgba(245, 179, 1, 0.3) !important;
}

body {
    background-color: var(--dark-bg);
    color: var(--text-light) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}