/* =============================================================================
   JobOrg ERP - Custom Styles
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Layout & Structure
   ----------------------------------------------------------------------------- */

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

/* -----------------------------------------------------------------------------
   Cards with Hover Animation
   ----------------------------------------------------------------------------- */

.card-hover {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Make entire card clickable */
.card-link {
    text-decoration: none;
    color: inherit;
}

.card-link:hover {
    text-decoration: none;
    color: inherit;
}

/* -----------------------------------------------------------------------------
   Job Cards
   ----------------------------------------------------------------------------- */

.job-card {
    border-left: 4px solid var(--job-priority-color, var(--bs-secondary));
}

/* Priority colors */
.priority-rush-ot { --job-priority-color: #800000; }
.priority-rush { --job-priority-color: #CC0000; }
.priority-priority { --job-priority-color: #FF6600; }
.priority-standard { --job-priority-color: #2E8B57; }
.priority-low { --job-priority-color: #228B22; }

/* Status badges */
.badge-status {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.35em 0.65em;
}

/* -----------------------------------------------------------------------------
   Notification Dropdown
   ----------------------------------------------------------------------------- */

.notification-dropdown {
    min-width: 300px;
    max-height: 400px;
    overflow-y: auto;
}

.notification-item {
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease-in-out;
}

.notification-item:hover {
    background-color: var(--bs-tertiary-bg);
}

.notification-item.unread {
    border-left-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
}

/* -----------------------------------------------------------------------------
   Theme Toggle
   ----------------------------------------------------------------------------- */

[data-bs-theme="dark"] .theme-icon-light,
[data-bs-theme="light"] .theme-icon-dark {
    display: none !important;
}

[data-bs-theme="dark"] .theme-icon-dark,
[data-bs-theme="light"] .theme-icon-light {
    display: inline-block !important;
}

#themeToggle {
    border: none;
    background: transparent;
    padding: 0.5rem;
}

#themeToggle:hover {
    opacity: 0.8;
}

/* -----------------------------------------------------------------------------
   Forms
   ----------------------------------------------------------------------------- */

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--bs-primary);
}

/* Form section headers with colored backgrounds */
.form-section-header {
    padding: 0.75rem 1rem;
    margin: 1.5rem 0 1rem 0;
    border-radius: 0.375rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.form-section-header h6,
.form-section-header h5 {
    margin: 0;
    font-weight: 600;
}

/* Section color variants */
.section-identification { background-color: var(--bs-primary); color: white; }
.section-classification { background-color: var(--bs-info); color: white; }
.section-material { background-color: var(--bs-success); color: white; }
.section-tooling { background-color: var(--bs-warning); color: #000; }
.section-asset { background-color: var(--bs-primary); color: white; }
.section-labor { background-color: var(--bs-info); color: white; }
.section-supplier { background-color: #6f42c1; color: white; } /* Purple */
.section-inventory { background-color: #fd7e14; color: white; } /* Orange */
.section-other { background-color: var(--bs-secondary); color: white; }
.section-notes { background-color: var(--bs-dark); color: white; }
.section-misc { background-color: var(--bs-secondary); color: white; }

/* Required field indicator */
.required::after {
    content: " *";
    color: var(--bs-danger);
}

/* Form validation errors - make them prominently RED */
.errorlist {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0 0;
    color: #dc3545;
    font-size: 0.875rem;
    font-weight: 500;
}

.errorlist li {
    color: #dc3545;
    margin-bottom: 0.25rem;
}

.errorlist li::before {
    content: "\F33A "; /* bi-exclamation-circle-fill */
    font-family: "bootstrap-icons";
    margin-right: 0.25rem;
}

/* Bootstrap invalid feedback */
.invalid-feedback {
    display: block;
    color: #dc3545;
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.25rem;
}

.invalid-feedback::before {
    content: "\F33A "; /* bi-exclamation-circle-fill */
    font-family: "bootstrap-icons";
    margin-right: 0.25rem;
}

/* Field with errors */
.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #dc3545;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.is-invalid:focus,
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Non-field errors (general form errors) */
.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c2c7;
    color: #842029;
}

[data-bs-theme="dark"] .alert-danger {
    background-color: #2c0b0e;
    border-color: #842029;
    color: #ea868f;
}

[data-bs-theme="dark"] .errorlist,
[data-bs-theme="dark"] .errorlist li,
[data-bs-theme="dark"] .invalid-feedback {
    color: #ea868f;
}

/* -----------------------------------------------------------------------------
   Tables
   ----------------------------------------------------------------------------- */

.table-hover tbody tr {
    transition: background-color 0.15s ease-in-out;
}

/* Inactive user/item rows - muted in both light and dark mode */
tr.inactive-row {
    opacity: 0.55;
}

tr.inactive-row:hover {
    opacity: 0.75;
}

/* Dark mode: opacity alone doesn't mute dark rows over dark backgrounds */
[data-bs-theme="dark"] tr.inactive-row {
    opacity: 0.4;
    background-color: rgba(0, 0, 0, 0.3) !important;
    color: rgba(255, 255, 255, 0.45) !important;
}

[data-bs-theme="dark"] tr.inactive-row:hover {
    opacity: 0.6;
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: rgba(255, 255, 255, 0.65) !important;
}

/* Sortable column headers */
.sortable {
    cursor: pointer;
    user-select: none;
}

.sortable:hover {
    background-color: var(--bs-tertiary-bg);
}

.sortable::after {
    content: "\F282"; /* bi-arrow-down-up */
    font-family: "bootstrap-icons";
    margin-left: 0.5rem;
    opacity: 0.3;
}

.sortable.asc::after {
    content: "\F148"; /* bi-arrow-up */
    opacity: 1;
}

.sortable.desc::after {
    content: "\F128"; /* bi-arrow-down */
    opacity: 1;
}

/* -----------------------------------------------------------------------------
   Sidebar Navigation (for future sub-department views)
   ----------------------------------------------------------------------------- */

.sidebar {
    position: sticky;
    top: 56px; /* Below navbar */
    height: calc(100vh - 56px);
    overflow-y: auto;
}

.sidebar .nav-link {
    color: var(--bs-body-color);
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    transition: background-color 0.15s ease-in-out;
}

.sidebar .nav-link:hover {
    background-color: var(--bs-tertiary-bg);
}

.sidebar .nav-link.active {
    background-color: var(--bs-primary);
    color: white;
}

.sidebar .nav-link i {
    width: 1.5rem;
}

/* -----------------------------------------------------------------------------
   Department Colors
   ----------------------------------------------------------------------------- */

.dept-badge {
    display: inline-block;
    padding: 0.25em 0.5em;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.25rem;
    color: white;
}

/* -----------------------------------------------------------------------------
   Loading States
   ----------------------------------------------------------------------------- */

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

[data-bs-theme="dark"] .loading-overlay {
    background: rgba(33, 37, 41, 0.8);
}

/* -----------------------------------------------------------------------------
   Responsive Utilities
   ----------------------------------------------------------------------------- */

/* Navbar utility icons - horizontal layout in mobile view */
@media (max-width: 991.98px) {
    .navbar-nav-icons {
        flex-direction: row !important;
        justify-content: center;
        gap: 0.5rem;
    }

    .navbar-nav-icons .nav-item {
        margin: 0;
    }
}

/* Hide on mobile, show on desktop */
@media (max-width: 767.98px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Touch-friendly tap targets on mobile */
@media (max-width: 767.98px) {
    .btn, .nav-link, .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* -----------------------------------------------------------------------------
   Print Styles
   ----------------------------------------------------------------------------- */

@media print {
    .navbar, .footer, .sidebar, .btn, .no-print {
        display: none !important;
    }

    main {
        padding: 0 !important;
    }

    .card {
        break-inside: avoid;
    }
}

/* -----------------------------------------------------------------------------
   Animations
   ----------------------------------------------------------------------------- */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes slideInUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-in-up {
    animation: slideInUp 0.3s ease-out;
}

/* -----------------------------------------------------------------------------
   Accessibility: Focus indicators
   ----------------------------------------------------------------------------- */

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
a:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* =============================================================================
   Single-Page Estimate UI
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Section Colors (Accordion Headers)
   ----------------------------------------------------------------------------- */

.sp-section-material {
    background-color: var(--bs-success);
    color: white;
}

.sp-section-tooling {
    background-color: var(--bs-warning);
    color: #000;
}

.sp-section-asset {
    background-color: var(--bs-primary);
    color: white;
}

.sp-section-labor {
    background-color: var(--bs-info);
    color: white;
}

.sp-section-misc {
    background-color: var(--bs-secondary);
    color: white;
}

/* -----------------------------------------------------------------------------
   Department Card Colors (Left Border)
   ----------------------------------------------------------------------------- */

.dept-card-MECH {
    border-left: 4px solid var(--bs-success);
}

.dept-card-CAD {
    border-left: 4px solid var(--bs-primary);
}

.dept-card-CNC {
    border-left: 4px solid var(--bs-warning);
}

.dept-card-MS {
    border-left: 4px solid #8b5cf6;
}

/* -----------------------------------------------------------------------------
   Compact Estimate Layout
   ----------------------------------------------------------------------------- */

.sp-estimate .card {
    margin-bottom: 0.75rem;
}

.sp-estimate .card-body {
    padding: 0.75rem;
}

.sp-estimate .card-header {
    padding: 0.5rem 0.75rem;
}

.sp-estimate .form-label {
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
}

.sp-estimate .form-control,
.sp-estimate .form-select {
    padding: 0.3rem 0.5rem;
    font-size: 0.9rem;
}

/* -----------------------------------------------------------------------------
   Line Item Rows
   ----------------------------------------------------------------------------- */

.sp-line-row {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    transition: background-color 0.15s ease;
}

.sp-line-row:last-child {
    border-bottom: none;
}

.sp-line-row:hover {
    background-color: var(--bs-tertiary-bg);
}

.sp-line-row.flash-success {
    animation: flashGreen 0.5s ease;
}

@keyframes flashGreen {
    0% {
        background-color: rgba(25, 135, 84, 0.2);
    }
    100% {
        background-color: transparent;
    }
}

/* -----------------------------------------------------------------------------
   Sticky Bottom Bar
   ----------------------------------------------------------------------------- */

.sp-bottom-bar {
    position: sticky;
    bottom: 0;
    background-color: var(--bs-body-bg);
    border-top: 2px solid var(--bs-border-color);
    padding: 0.75rem 1rem;
    z-index: 1020;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* -----------------------------------------------------------------------------
   Running Total Badge
   ----------------------------------------------------------------------------- */

.sp-running-total {
    font-size: 1.1rem;
    font-weight: 600;
}

/* -----------------------------------------------------------------------------
   Status Badges
   ----------------------------------------------------------------------------- */

.sp-status-draft {
    background-color: var(--bs-secondary) !important;
}

.sp-status-submitted {
    background-color: var(--bs-primary) !important;
}

.sp-status-revision_requested {
    background-color: var(--bs-warning) !important;
    color: #000 !important;
}

.sp-status-approved {
    background-color: var(--bs-success) !important;
}

/* -----------------------------------------------------------------------------
   Section Total Badge in Accordion Header
   ----------------------------------------------------------------------------- */

.sp-section-total {
    background-color: rgba(255, 255, 255, 0.25);
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
}

/* -----------------------------------------------------------------------------
   Empty State in Sections
   ----------------------------------------------------------------------------- */

.sp-empty-state {
    text-align: center;
    padding: 1.5rem;
    color: var(--bs-secondary-color);
    font-style: italic;
}

/* -----------------------------------------------------------------------------
   Department Summary Card (for compile page)
   ----------------------------------------------------------------------------- */

.sp-dept-summary-card {
    transition: transform 0.2s ease;
}

.sp-dept-summary-card:hover {
    transform: translateY(-2px);
}

.sp-dept-summary-card .card-header {
    font-weight: 600;
}

/* -----------------------------------------------------------------------------
   Quote Preview Panel
   ----------------------------------------------------------------------------- */

.sp-quote-preview {
    border: 2px dashed var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 1.5rem;
    background-color: var(--bs-tertiary-bg);
    min-height: 200px;
}

.sp-quote-preview-banner {
    background-color: var(--bs-info-bg-subtle);
    color: var(--bs-info-text-emphasis);
    border: 1px solid var(--bs-info-border-subtle);
    border-radius: 0.375rem;
    padding: 0.75rem;
    text-align: center;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* -----------------------------------------------------------------------------
   Delete Button Styling
   ----------------------------------------------------------------------------- */

.sp-delete-btn {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.sp-delete-btn:hover {
    opacity: 1;
}

/* -----------------------------------------------------------------------------
   Add Row Button
   ----------------------------------------------------------------------------- */

.sp-add-btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
}

/* -----------------------------------------------------------------------------
   Read-Only Header Display
   ----------------------------------------------------------------------------- */

.sp-readonly-field {
    padding: 0.3rem 0;
    font-size: 0.9rem;
}

.sp-readonly-label {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0.1rem;
}

/* -----------------------------------------------------------------------------
   Responsive Adjustments
   ----------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .sp-estimate .col-lg-3 {
        margin-top: 1rem;
    }

    .sp-bottom-bar {
        padding: 0.5rem;
    }

    .sp-bottom-bar .btn {
        font-size: 0.85rem;
        padding: 0.4rem 0.75rem;
    }
}

@media (max-width: 768px) {
    .sp-estimate .card-body {
        padding: 0.5rem;
    }

    .sp-line-row {
        padding: 0.3rem;
        font-size: 0.85rem;
    }
}

/* -----------------------------------------------------------------------------
   Modal Styling for Line Add
   ----------------------------------------------------------------------------- */

.sp-line-modal .modal-header {
    padding: 0.5rem 1rem;
}

.sp-line-modal .modal-body {
    padding: 0.75rem 1rem;
}

/* -----------------------------------------------------------------------------
   Accordion Dollar Value Alignment
   ----------------------------------------------------------------------------- */

/* Ensures all section dollar totals in accordion headers share a fixed
   right-edge column regardless of label width, eliminating zig-zagging.
   Uses absolute positioning so the value is always at the same right offset,
   leaving room for Bootstrap's accordion chevron (::after). */
.accordion-dollar {
    position: absolute;
    right: 2.5rem;
    min-width: 120px;
    text-align: right;
}

/* -----------------------------------------------------------------------------
   Accordion Customization
   ----------------------------------------------------------------------------- */

.sp-estimate .accordion-button {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.sp-estimate .accordion-button:not(.collapsed) {
    box-shadow: none;
}

.sp-estimate .accordion-body {
    padding: 0.5rem;
}