/* ============================================
   FONT IMPORTS
   ============================================ */

/* Import Inter font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================
   CSS CUSTOM PROPERTIES (Variables)
   ============================================ */

:root {
    /* PRIMARY COLORS */
    --color-primary: #2563eb; /* Main blue - used for buttons, links */
    --color-primary-hover: #1d4ed8; /* Darker blue - for hover states */
    --color-primary-light: #bfc5cc; /* Light blue - for backgrounds */
    --color-primary-bg: #e0e7ff; /* Light blue - hover/active backgrounds */
    --color-primary-subtle: rgba(37, 99, 235, 0.05); /* Very subtle blue - table hovers */
    /* SYSTEM COLORS */
    --color-yellow: #facc15; /* Internal/warning indicators */
    --color-success: #10b981; /* Success messages, positive states */
    --color-error: #ef4444; /* Error messages, delete actions */
    --color-error-hover: #dc2626; /* Error hover state */
    --color-warning: #e55b00; /* Warning/urgent - due within a week (deadlines) */
    /* INTERNAL COLORS (BHI-only tabs and elements) */
    --color-internal: #f97316; /* Orange - internal tab text and selected bg */
    --color-internal-hover: #ea580c; /* Darker orange - hover states */
    --color-internal-bg: #fed7aa;
    --color-internal-light: #fb923c;
    --color-bid: #059669;
    --color-bid-hover: #047857;
    --color-bid-light: #34d399;
    --color-bid-bg: #a7f3d0;
    /* NEUTRAL COLORS */
    --color-text: #111827; /* Primary text color (almost black) */
    --color-text-secondary: #535863;
    --color-text-light: #9ca3af; /* Lighter text, placeholders, inactive tabs */
    --color-border: #e5e7eb; /* Borders, dividers */
    --color-border-light: #f0f0f0; /* Lighter border for table rows */
    --color-bg-light: #f9fafb; /* Light backgrounds, cards */
    --color-bg-main: #f3f4f6; /* Main content area background */
    --color-white: #FFFFFF; /* Pure white */
    /* ============================================
     TYPOGRAPHY
     ============================================ */
    /* Font Families */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Font Sizes */
    --font-size-page-header: 24px; /* Page headers (h1) */
    --font-size-section-header: 18px; /* Section headers (h2) */
    --font-size-xl: 20px; /* Card titles, modal titles */
    --font-size-body: 14px; /* Body text, buttons, inputs */
    --font-size-small: 12px; /* Captions, timestamps, labels */
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    /* Line Heights (for readability) */
    --line-height-tight: 1.2; /* For headers */
    --line-height-normal: 1.5; /* For body text */
    --line-height-relaxed: 1.8; /* For paragraphs */
    /* ============================================
     SPACING SCALE
     ============================================ */
    --spacing-xs: 4px; /* Extra small - tight spacing */
    --spacing-sm: 8px; /* Small - compact elements */
    --spacing-md: 12px; /* Medium - default spacing */
    --spacing-lg: 16px; /* Large - comfortable spacing */
    --spacing-xl: 24px; /* Extra large - section spacing */
    --spacing-2xl: 32px; /* 2X large - major sections */
    --spacing-3xl: 48px; /* 3X large - page sections */
    /* ============================================
     BORDER RADIUS
     ============================================ */

    --radius-sm: 4px; /* Small - buttons, badges */
    --radius-md: 6px; /* Medium - inputs, small cards */
    --radius-lg: 8px; /* Large - cards, modals */
    --radius-xl: 12px; /* Extra large - large cards */
    --radius-full: 9999px; /* Fully rounded - pills, avatars */
    /* ============================================
     SHADOWS
     ============================================ */

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Subtle - hover states */
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Medium - cards */
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Large - dropdowns, modals */
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1); /* Extra large - popovers */
    --shadow-card: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
    /* LAYOUT */
    --container-max-width: 1440px;
}

/* ============================================
   CSS RESET & BASE STYLES
   ============================================ */

/* Box sizing - makes padding/border included in width */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default margins */
* {
    margin: 0;
    padding: 0;
}

/* Full height setup */
html, body {
    height: 100%;
}

/* Body defaults - applies to entire site */
body {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-bg-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    /* Sticky footer setup - targets the ASP.NET form */
    body > form {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

.main-content {
    flex: 1;
    padding: var(--spacing-xl) 0;
    /*    background-color: var(--color-white);*/
    background-color: var(--color-bg-main);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
}

h1 {
    font-size: var(--font-size-page-header);
    font-weight: var(--font-weight-bold);
}

h2 {
    font-size: var(--font-size-section-header);
}

/* Links */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

    a:hover {
        color: var(--color-primary-hover);
    }

/* Images */
img {
    max-width: 100%;
    height: auto;
    /*    display: block;*/
}

/* Lists */
ul, ol {
    padding-left: var(--spacing-xl);
}

/* ============================================
   LAYOUT - CONTAINER
   ============================================ */

.container-custom {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto; /* Centers the container */
    padding: 0 var(--spacing-xl);
}

/* On tablets and smaller, reduce side padding */
@media (max-width: 768px) {
    .container-custom {
        padding: 0 var(--spacing-md);
    }
}

/* ============================================
   BOOTSTRAP OVERRIDES - BUTTONS
   ============================================ */

/* Primary Button - Solid blue button */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-light);
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: var(--color-primary-hover);
        border-color: var(--color-primary-hover);
        color: var(--color-white);
    }

    /* Primary button when clicked/active */
    .btn-primary:active,
    .btn-primary.active {
        background-color: var(--color-primary-hover);
        border-color: var(--color-primary-hover);
    }

.btn-outline-primary {
    border-color: var(--color-primary);
    font-weight: var(--font-weight-light);
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-white);
    }

/* Secondary Button - Outlined button */
.btn-secondary {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: var(--font-weight-light);
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .btn-secondary:hover,
    .btn-secondary:focus {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-white);
    }

/* Danger Button - Red button for delete/destructive actions */
.btn-danger {
    background-color: var(--color-error);
    border-color: var(--color-error);
    color: var(--color-white);
    font-weight: var(--font-weight-medium);
}

    .btn-danger:hover,
    .btn-danger:focus {
        background-color: var(--color-error-hover);
        border-color: var(--color-error-hover);
        color: var(--color-white);
    }

/* Small button size */
.btn-sm {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-small);
}

    .btn-sm i {
        font-size: 12px;
    }

/*COPY BUTTON*/
/* Copy button with animated checkmark */
.copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    transition: color 0.2s ease;
    position: relative;
}

    .copy-btn:hover {
        color: var(--color-primary);
    }

    .copy-btn .copy-icon,
    .copy-btn .copy-check {
        font-size: 16px;
        transition: all 0.2s ease;
    }

    .copy-btn .copy-check {
        color: var(--color-success);
    }


.btn-pill {
    font-size: var(--font-size-small);
    font-family: var(--font-primary);
    padding: 2px var(--spacing-sm);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-full);
    background: none;
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-pill:hover {
        background-color: var(--color-primary);
        color: var(--color-white);
    }

.btn-pill-danger {
    font-size: var(--font-size-small);
    font-family: var(--font-primary);
    padding: 2px var(--spacing-sm);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-full);
    background: none;
    color: var(--color-error);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-pill-danger:hover {
        background-color: var(--color-error);
        border-color: var(--color-error);
        color: var(--color-white);
    }

/* ============================================
   BOOTSTRAP OVERRIDES - FORMS
   ============================================ */

/* Text inputs, textareas, selects */
.form-control {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    /*    max-width: 300px;*/
}

    /* Input focus state - when user clicks into field */
    .form-control:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); /* Subtle blue glow */
        outline: none; /* Remove browser default outline */
    }

    /* Placeholder text styling */
    .form-control::placeholder {
        color: var(--color-text-secondary);
        opacity: 0.6;
    }

    /* Disabled inputs */
    .form-control:disabled {
        background-color: var(--color-bg-light);
        color: var(--color-text-secondary);
        cursor: not-allowed;
        opacity: 0.6;
    }

/* Labels */

.form-label {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-bottom: unset;
    display: block;
}

/* Custom checkbox styling */
.form-check-input {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

    .form-check-input:checked {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
    }

    .form-check-input:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    /* Radio buttons - keep them round */
    .form-check-input[type="radio"] {
        border-radius: var(--radius-full);
    }

/* Form field container - wraps label + control together */
/* Form field container - HORIZONTAL layout */
.form-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

/*    .form-field > div:not(.form-field-label):not(.form-field-label-column):not(.selection-panel):not(.upload-area) {
        flex: 1;
        min-width: 0;
    }*/

.form-field-compact {
    margin-bottom: var(--spacing-md);
}

.input-fill {
    flex: 1;
    width: 100%;
}

/* Form field labels - gray, normal weight */
.form-field-label {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-normal); /* CHANGED from medium to normal */
    color: var(--color-text-secondary);
    width: 212px; /* Fixed width for labels so controls align */
}

/* Row for control + button */
.form-field-control-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* Note text under labels */
.form-field-note {
    font-size: var(--font-size-small); /* 12px */
    font-style: italic;
    color: var(--color-text-secondary); /* Gray for most text */
}

/* Red text for NOTE: and NOT */
.note-red {
    color: var(--color-error); /* Red */
    font-weight: var(--font-weight-bold); /* Make it bold too */
}
/* When form field has a label column (label + note stacked on left) */
.form-field-label-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.form-field-with-button {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
}

    .form-field-with-button .form-control {
        flex: 1; /* Textarea takes most space */
        min-width: 400px;
    }

@media (max-width: 768px) {
    .form-field {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-field-label {
        width: auto;
    }

    .form-control,
    .form-field .form-control {
        max-width: 100% !important;
    }
}

/* Page-level instruction text above form */
.form-instructions {
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

/* Use on form-field when the control is tall (radio lists, textareas) */
.form-field-top {
    align-items: flex-start;
    padding-top: var(--spacing-xs);
}

.field-error-text {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-error);
    margin-left: var(--spacing-sm);
}

.text-green {
    color: var(--color-success);
    font-size: var(--font-size-small);
    font-style: italic;
}

/* Selection panel for type selectors */
.selection-panel {
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-lg);
}

.selection-panel-success {
    background-color: #f0fdf4;
    border-color: var(--color-success);
}

/* Required field asterisk */
.required-indicator {
    color: var(--color-error);
    font-weight: var(--font-weight-bold);
    margin-right: var(--spacing-xs);
}

.button-with-note {
    /*    display: flex;*/
    flex-direction: column;
    gap: var(--spacing-xs);
}

.text-success {
    color: var(--color-success);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-small);
}

/* Dropdown styling to make it look like a dropdown */
select.form-control,
.form-control select {
    appearance: none; /* Remove default browser arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    background-size: 12px;
    padding-right: calc(var(--spacing-md) + 20px); /* Extra padding for arrow */
    cursor: pointer;
    min-width: 250px;
    max-width: none;
}

    select.form-control:hover {
        border-color: var(--color-primary);
    }

/* ============================================
   UTILITY CLASSES
   ============================================ */

.flex-row-center {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.flex-row-center-md {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.flex-row-center-lg {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}
/* ============================================
   HEADER
   ============================================ */

.site-header {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-md) 0;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    z-index: 1000;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-brand {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-lg);
}

.brand-bhi {
    font-size: var(--font-size-page-header);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.brand-tracker {
    font-size: var(--font-size-page-header);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.brand-taglines {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.brand-tagline {
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
}

.navbar-nav-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.nav-link {
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    transition: color 0.2s ease;
}

    .nav-link:hover {
        color: var(--color-primary);
    }

.nav-divider {
    color: var(--color-border);
    font-size: var(--font-size-body);
}

/* Hamburger button — hidden on desktop, shown on mobile */
.nav-toggle {
    display: none; /* hidden by default (desktop) */
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-sm);
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
}

/* Group the right side so brand sits left, everything else sits right */
.navbar {
    gap: var(--spacing-lg);
}

.navbar-brand {
    margin-right: auto; /* pushes brand left, rest to the right */
}


@media (max-width: 957px) {
    /* 1. Hide decorative taglines — brand identity stays, decoration goes */
    .brand-taglines {
        display: none;
    }

    /* 2. Show the hamburger (it was display:none on desktop) */
    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    /* 3. Turn the link container into a dropdown panel.
          Hidden by default; the .is-open class (added by JS) reveals it. */
    .navbar-nav-right {
        display: none;
        position: absolute;
        top: 100%; /* directly below the header */
        right: var(--spacing-md); /* pin to right, matching container padding */
        min-width: 200px;
        border-radius: var(--radius-md);
        overflow: hidden; /* clips link hover corners to the radius */
        flex-direction: column; /* links stack vertically */
        align-items: stretch;
        background: var(--color-white);
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg);
        /*        padding: var(--spacing-xs) 0;*/
        z-index: 1000;
        gap: unset;
    }

        .navbar-nav-right.is-open {
            display: flex; /* JS toggles this class */
        }

        /* 4. Each link becomes a full-width row with a proper tap target */
        .navbar-nav-right .nav-link {
            display: block;
            padding: var(--spacing-md) var(--spacing-lg);
            min-height: 44px;
            border-bottom: 1px solid var(--color-border-light);
        }

            .navbar-nav-right .nav-link:last-child {
                border-bottom: none;
            }

            .navbar-nav-right .nav-link:hover {
                background-color: var(--color-bg-light);
            }

        /* 5. The pipe dividers make no sense in a vertical stack */
        .navbar-nav-right .nav-divider {
            display: none;
        }

    /* 6. The header needs to be the positioning anchor for the panel */
    .site-header {
        position: relative;
    }
}
/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background-color: var(--color-bg-light);
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-lg) 0;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-brand {
    display: flex;
    align-items: center;
}

.footer-logo {
    height: 32px;
    width: auto;
}

.footer-copyright {
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
}

@media (max-width: 1061px) {
    .footer-content {
        display: block;
        text-align: center;
    }

    .footer-brand {
        display: unset;
        align-items: unset;
        text-align: center;
    }
}

/* ============================================
   PAGE CONTROLS (Show Calendar checkbox, etc.)
   ============================================ */

.page-controls {
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
}

/* ============================================
   CUSTOM CHECKBOX
   ============================================ */

.custom-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

    /* The actual checkbox input */
    .custom-checkbox input[type="checkbox"] {
        width: 14px;
        height: 14px;
        cursor: pointer;
        accent-color: var(--color-primary);
    }

    /* The label text */
    .custom-checkbox label {
        font-size: var(--font-size-body);
        color: var(--color-text-secondary);
        cursor: pointer;
        margin: 0;
    }

/*Check box for modify submittal*/
.checkbox-green-label label {
    color: var(--color-success);
    font-size: var(--font-size-small);
    font-style: italic;
}

.checkbox-red-label label {
    color: #9f1239;
    font-size: var(--font-size-small);
    font-style: italic;
}
/* ============================================
   DASHBOARD GRID (Three column layout)
   ============================================ */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.dashboard-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    height: 500px;
    overflow-y: auto;
}

/* Tablet and phone: stack to single column so each dense card gets full width */
@media (max-width: 1061px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-card {
        height: fit-content;
        max-height: 500px;
    }
}

/* Header layout to accommodate filter button */
.dashboard-card-header {
    text-align: center;
    padding: var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--color-white);
}

    .dashboard-card-header i {
        font-size: 42px;
        color: var(--color-primary);
        margin-bottom: var(--spacing-md);
    }

    .dashboard-card-header h2 {
        margin: 0;
    }

.dashboard-card-body {
    padding: 0;
}

.project-item {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg-light);
    font-size: var(--font-size-body);
    color: var(--color-text);
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, border-left-color 0.15s ease;
}

    .project-item:first-child {
        border-top: none;
    }

/* Hide columns when backend returns hidden class */
.dashboardHiddenCol1 {
    display: none;
}

.dashboardHiddenCol2 {
    display: none;
}

/* Project items */
.project-link {
    font-size: var(--font-size-body);
    color: var(--color-text);
    text-decoration: none;
    display: block;
}

    .project-link:hover {
        color: var(--color-primary);
    }

.project-meta {
    margin-top: var(--spacing-xs);
}

/* Reusable pill base - shape only, no color.
   inline-block lets padding/background render on inline <span> labels
   while keeping them flowing side by side. */
.stat-pill {
    display: inline-block;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    padding: 2px var(--spacing-sm);
    border-radius: var(--radius-full);
    line-height: var(--line-height-normal);
}

    .stat-pill:empty {
        display: none;
    }

/* Color layers for .stat-pill - tint background + saturated text */
.status-blue {
    color: var(--color-primary);
    background-color: var(--color-primary-bg);
}

.status-red {
    color: var(--color-error);
    background-color: #fee2e2;
    margin-left: var(--spacing-xs);
}

.status-orange {
    color: var(--color-internal);
    background-color: #ffe2cb;
    margin-left: var(--spacing-xs);
}

/* Ownership pill - "mine" stats (calm teal, not alarming red) */
.status-mine {
    color: #7c3aed;
    background-color: #ede9fe;
    margin-left: var(--spacing-xs);
}

/* ============================================
   CALENDAR SECTION
   ============================================ */

.calendar-section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
    align-items: start;
}

@media (max-width: 1061px) {
    .calendar-section {
        grid-template-columns: 1fr;
        gap: unset;
    }

    .calendar-container {
        margin-bottom: var(--spacing-xl);
    }
}

.calendar-container {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
    padding: var(--spacing-xl);
    grid-column: span 2;
    height: fit-content;
}

.task-list-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
    max-height: 65vh;
    overflow-y: auto;
}

.task-list-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-white);
}

    .task-list-header h2 {
        margin: 0;
        font-size: var(--font-size-section-header);
    }

.task-item {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg-light);
}

    .task-item:last-child {
        border-bottom: none;
    }

.task-link {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-normal);
    color: var(--color-text);
    text-decoration: none;
    display: block;
}

    .task-link:hover {
        color: var(--color-primary);
    }

.task-due-date {
    font-size: var(--font-size-small);
    color: var(--color-primary);
    display: block;
    margin-top: var(--spacing-xs);
    font-weight: var(--font-weight-medium);
}

    .task-due-date.is-overdue {
        color: var(--color-error);
    }

    .task-due-date.is-due-soon {
        color: var(--color-warning);
    }

.due-icon {
    margin-right: var(--spacing-sm);
}

.due-project {
    display: block;
    margin-top: 2px;
    color: var(--color-text-secondary);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    color: var(--color-text-secondary);
}

    .empty-state p {
        margin: 0;
        font-size: var(--font-size-body);
        font-style: italic;
    }

/* FullCalendar custom event styling */
.fc-event-custom {
    display: flex;
    align-items: center;
    padding: 2px 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    .fc-event-custom img {
        flex-shrink: 0;
    }

    .fc-event-custom span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ============================================
   FILTER COMPONENT
   ============================================ */


.filter-toggle {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: none;
    border: none;
    color: var(--color-text-light);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    transition: color 0.2s, background-color 0.2s;
}

    .filter-toggle i {
        font-size: 18px;
        color: var(--color-primary);
        margin-bottom: unset;
    }

    .filter-toggle:hover {
        color: var(--color-primary);
        background-color: var(--color-bg-light);
    }

    .filter-toggle.active {
        color: var(--color-primary);
        background-color: var(--color-primary-bg);
    }

/* Filter dropdown */
.filter-dropdown {
    display: none;
    padding: 0 var(--spacing-xl) var(--spacing-md);
    margin-top: var(--spacing-md);
}

    .filter-dropdown.show {
        display: block;
    }

.filter-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-body);
    font-family: var(--font-primary);
}

    .filter-input:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

/* Hide filtered items */
.project-item.filtered-out {
    display: none;
}

/* No results message */
.no-results {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--color-text-light);
    font-style: italic;
}

/* ============================================
   PRIMARY TABS (Navigation Menu User Control)

   Custom palette (AAA contrast family):
   - Blue:    default #E6F1FB / hover #185FA5 / sel #042C53
   - Orange:  default #F5BC8F / hover #CC5500 / sel #9A3C0A
   - Bid:     default #B5D67A / hover #3B6D11 / sel #173404

   All colors inline, no :root variables changed.
   ============================================ */
.basictab {
    list-style: none;
    margin: 0 0 var(--spacing-md) 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: center;
}

    /* ==========================================
           BASE TAB (default / blue category)
           Default: light blue    #E6F1FB  (black text)
           Hover:   medium blue   #185FA5  (white text)
           Sel:     deep navy     #042C53  (white text)
           Sel+hv:  darker navy   #021B33
           ========================================== */


    .basictab li a {
        display: block;
        padding: var(--spacing-sm) var(--spacing-lg);
        text-decoration: none;
        color: var(--color-text);
        font-size: var(--font-size-body);
        background-color: #E6F1FB;
        transition: background-color 0.15s, color 0.15s, border-color 0.15s;
        border-bottom: 1px solid black;
        border-right: 1px solid black;
        border-left: 1px;
        border-top: 1px solid black;
    }

    .basictab li:first-child a {
        border-right: 1px solid black;
        border-radius: var(--radius-md) 0 0 var(--radius-md);
        border-left: 1px solid black;
        border-bottom: 1px solid black;
        border-top: 1px solid black;
    }

        .basictab li:first-child a:hover {
            border-left: 1px solid black;
        }


    .basictab li:last-child a {
        border-radius: 0 var(--radius-md) var(--radius-md) 0;
        border-right: 1px solid black;
    }


    .basictab li a:hover {
        background-color: #185FA5;
        color: #FFFFFF;
        border-color: #185FA5;
        z-index: 2;
        position: relative;
        border-bottom: 1px solid black;
        border-top: 1px solid black;
        border-right: 1px solid black;
    }

    .basictab li.selected a {
        background-color: #042C53;
        border-color: black;
        color: #FFFFFF;
        z-index: 3;
        position: relative;
    }

        .basictab li.selected a:hover {
            background-color: #021B33;
            border-color: black;
        }

    /* ==========================================
           INTERNAL (orange category)
           Default: soft peach    #F5BC8F  (black text, black icon)
           Hover:   burnt orange  #CC5500  (white text, white icon)
           Sel:     deep rust     #9A3C0A  (white text, white icon)
           Sel+hv:  darker rust   #712B07
           ========================================== */

    .basictab li.internal a {
        color: var(--color-text);
        background-color: #F5BC8F;
        z-index: 1;
        position: relative;
        border-left: 1px;
    }

        .basictab li.internal a:hover {
            background-color: #CC5500;
            color: #FFFFFF;
            border-color: #CC5500;
            z-index: 2;
            border-bottom: 1px solid black;
            border-top: 1px solid black;
            border-right: 1px solid black;
        }

    .basictab li.internal:last-child a:hover {
        border-right: 1px solid black;
    }

    .basictab li.internalselected a {
        background-color: #9A3C0A;
        border-color: #9A3C0A;
        color: #FFFFFF;
        z-index: 3;
        position: relative;
        border-right: 1px solid black;
        border-bottom: 1px solid black;
        border-top: 1px solid black;
    }

        .basictab li.internalselected a:hover {
            background-color: #712B07;
            border-color: #712B07;
            border-right-color: #712B07;
            border-bottom: 1px solid black;
            border-top: 1px solid black;
        }

    /* Internal tab icon - BLACK pyramid for default (matches black text) */
    .basictab li.internal a::before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 8px;
        background-image: url('../images/bh-pyramid-black.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: text-top;
    }

    /* Internal tab icon - WHITE pyramid on hover (matches white text) */
    .basictab li.internal a:hover::before {
        background-image: url('../images/bh-pyramid-white.svg');
    }

    /* Internal tab icon - WHITE pyramid for selected state */
    .basictab li.internalselected a::before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 8px;
        background-image: url('../images/bh-pyramid-white.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: text-top;
    }

    .basictab li a span {
        display: inline;
    }

    /* ==========================================
           BID SUBMIT (green category)
           Default: bright green  #B5D67A  (black text)
           Hover:   forest green  #3B6D11  (white text)
           Sel:     deep forest   #314e1a  (white text)
           Sel+hv:  darker forest #0C1F02
           ========================================== */

    .basictab li.bidsubmit a {
        color: var(--color-text);
        background-color: hsl(82 30% 75%);
        font-weight: var(--font-weight-medium);
        z-index: 1;
        position: relative;
        border-left: 1px;
    }

        .basictab li.bidsubmit a:hover {
            background-color: #3B6D11;
            color: #FFFFFF;
            border-color: #3B6D11;
            z-index: 2;
            border-bottom: 1px solid black;
            border-top: 1px solid black;
            border-right: 1px solid black;
        }

    .basictab li.bidsubmitselected a {
        background-color: #314e1a;
        border-color: #314e1a;
        color: #FFFFFF;
        font-weight: var(--font-weight-medium);
        z-index: 3;
        position: relative;
        border-right: 1px solid black;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
    }

        .basictab li.bidsubmitselected a:hover {
            background-color: #0C1F02;
            border-color: #0C1F02;
            border-right-color: #0C1F02;
        }

.selected-tab-underline {
    border-bottom: 1px solid white;
    padding-bottom: 2px;
}

@media (max-width: 1192px) {
    .basictab {
        gap: var(--spacing-sm);
    }

        /* Every tab becomes a self-contained pill */
        .basictab li a {
            border: 1px solid black;
            border-radius: var(--radius-md);
        }

        /* Cancel connected-strip corner logic on the ends */
        .basictab li:first-child a,
        .basictab li:last-child a {
            border-radius: var(--radius-md);
            border-left: 1px solid black;
            border-right: 1px solid black;
        }

        /* Selected states omit left border in the strip design —
       force all four sides so they're complete pills */
        .basictab li.selected a,
        .basictab li.internalselected a,
        .basictab li.bidsubmitselected a,
        .basictab li.teamselected a,
        .basictab li.internal a,
        .basictab li.bidsubmit a,
        .basictab li.team a {
            border: 1px solid black;
            border-radius: var(--radius-md);
        }
}

/* ============================================
   SECONDARY TABS (Sub-navigation)
   ============================================ */
.navTable {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-md);
}

    .navTable tr {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-xl); /* Space between tabs */
        justify-content: center; /* Center secondary tabs */
        padding: 0;
        margin: 0;
    }

@media (max-width: 852px) {
    .navTable tr {
        gap: var(--spacing-md); /* tighter than desktop's xl */
        /*justify-content: flex-start;*/ /* left-align so wraps look clean */
    }
}

.navTable td {
    display: block;
    width: auto !important; /* Override any inline width */
    padding: 0 !important; /* Override any inline padding */
    margin: 0;
    text-align: center !important; /* Override inline text-align */
}

.navTable a.nav1,
.navTable a.nav1Sel {
    display: inline-block;
    padding: var(--spacing-sm) 0;
    text-decoration: none;
    font-size: var(--font-size-body);
    color: var(--color-text-light);
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap; /* Prevent text wrapping */
}

    .navTable a.nav1:hover {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
    }

/* Active/Selected secondary tab */
.navTable a.nav1Sel {
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.navTable a.nav1 {
    color: #4f5258;
}

/* ============================================
   PROJECT TITLE - MODIFY SUBMITTALS
   ============================================ */

.project-title {
    font-size: var(--font-size-page-header);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    text-align: center;
    margin: var(--spacing-lg) 0 var(--spacing-2xl) 0;
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid #d1d5db;
    margin-bottom: var(--spacing-2xl);
}

/* ============================================
   FORM CARDS
   ============================================ */

@media (max-width: 820px) {
    .form-card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .form-card .submittal-table {
            min-width: 600px;
        }
}

.form-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.form-card-divider {
    border-top: 1px solid var(--color-border);
    margin: var(--spacing-lg) 0;
}

/* Reusable top-accent borders for cards */
.card-accent-blue {
    border-top: 4px solid var(--color-primary);
}

.card-accent-amber {
    border-top: 4px solid var(--color-yellow);
}

.card-accent-green {
    border-top: 4px solid var(--color-success);
}

.card-accent-blue .dashboard-card-header i {
    color: var(--color-primary);
}

.card-accent-amber .dashboard-card-header i {
    color: var(--color-yellow);
}

.card-accent-green .dashboard-card-header i {
    color: var(--color-success);
}

/* Project item hover - background tint + card-colored left accent */
.project-item:hover {
    background-color: var(--color-bg-main);
}

.card-accent-blue .project-item:hover {
    border-left-color: var(--color-primary);
}

.card-accent-amber .project-item:hover {
    border-left-color: var(--color-yellow);
}

.card-accent-green .project-item:hover {
    border-left-color: var(--color-success);
}

/* Card title row - title and textbox on same line */
.card-title-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-2xl);
}

.card-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0;
    white-space: nowrap;
}

/* Section heading inside a card */
.card-section-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-lg) 0;
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.subject-display {
    font-size: var(--font-size-body);
    color: var(--color-text);
}

.subject-input {
    flex: 1; /* Takes remaining space */
}

/* Action links row */
.action-links {
    display: flex;
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
}

.action-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-body);
    transition: color 0.2s;
    font-weight: var(--font-weight-semibold);
}

    .action-link:hover {
        color: #1d4ed8;
    }

    .action-link a {
        color: var(--color-primary);
        text-decoration: none;
    }

        .action-link a:hover {
            text-decoration: underline;
        }

    .action-link i {
        font-size: 16px;
    }

/* Hard copy notice */
.hard-copy-notice {
    margin-bottom: var(--spacing-md);
}

.hard-copy-label {
    color: #dc2626; /* Red color */
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    display: block;
}

/* Info grid - 3 columns */
.info-grid {
    display: flex;
    flex-direction: column;
}

.info-item {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-xl);
    align-items: baseline;
    margin-bottom: var(--spacing-sm);
}

.info-label {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    min-width: 150px;
}

.info-value {
    font-size: var(--font-size-body);
    color: var(--color-text);
}

.pm-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* two equal columns on desktop */
    gap: var(--spacing-lg);
}

@media (max-width: 768px) {
    .pm-summary-grid {
        grid-template-columns: 1fr; /* stack on phone */
    }
}

/* A paired stat row: two related label/value pairs that belong together */
.info-item-pair {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-xl);
    align-items: baseline;
}

@media (max-width: 768px) {
    /* On mobile, break the pair so each stat is on its own line,
       but keep them visually grouped (no big gap between the two) */
    .info-item-pair .info-label:nth-child(3) {
        flex-basis: 100%; /* second stat starts a new line */
    }
}

/* ============================================
   CORRESPONDENCE - MODIFY SUBMITTALS
   ============================================ */

/* Content sections inside correspondence card */
.correspondence-section {
    margin-bottom: var(--spacing-xl);
}

    .correspondence-section .section-label {
        font-weight: var(--font-weight-bold);
        color: var(--color-text);
        display: block;
        margin-bottom: var(--spacing-xs);
    }

.correspondence-container {
    background-color: var(--color-bg-light); /* Light gray #f9fafb */
    padding: var(--spacing-xl); /* 24px padding all around */
    border-radius: var(--radius-lg); /* 8px rounded corners */
    margin-bottom: var(--spacing-2xl); /* 32px space below */
}


.correspondence-label {
    display: block;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-sm);
}

.correspondence-content {
    display: block;
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-xs);
}


.correspondence-meta {
    display: block;
    font-size: var(--font-size-small);
    font-style: italic;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.correspondence-list {
    list-style-type: disc;
    padding-left: var(--spacing-3xl);
    margin-top: var(--spacing-md);
}

.correspondence-list-item {
    margin-bottom: var(--spacing-lg);
}

    .correspondence-list-item .correspondence-content {
        display: inline;
        margin-bottom: 0;
    }

    .correspondence-list-item .correspondence-meta {
        display: inline;
        margin-bottom: 0;
        margin-left: var(--spacing-sm);
    }

/* Attachment row - keeps everything on one line */
.attachment-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

    .attachment-row .correspondence-content {
        display: inline;
        margin-bottom: 0;
    }

.download-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.attachment-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}



/* Assigned To History Section */
.assigned-history {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

/* History table */
.history-table {
    width: 100%;
    max-width: 500px;
    border-collapse: collapse;
    border: 1px solid var(--color-border);
    margin-top: var(--spacing-md);
}

    .history-table thead th {
        background-color: var(--color-bg-light);
        padding: var(--spacing-sm) var(--spacing-md);
        text-align: left;
        font-weight: var(--font-weight-semibold);
        font-size: var(--font-size-body);
        border-bottom: 1px solid var(--color-border);
    }

    .history-table tbody td {
        padding: var(--spacing-sm) var(--spacing-md);
        border-bottom: 1px solid var(--color-border);
        font-size: var(--font-size-body);
    }

    .history-table tbody tr:last-child td {
        border-bottom: none;
    }


/* Wrapper for icon button */
.icon-button-wrapper {
    position: relative;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

/* Hide the actual image */
.icon-button-hidden {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Show Font Awesome icon on top */
.icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    color: var(--color-primary);
    pointer-events: none; /* Click goes through to button */
}


/* File upload wrapper */
.file-upload-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* Hide the actual file input */
.file-upload-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Custom styled button */
.file-upload-button {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--color-white);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    border: 2px solid;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .file-upload-button:hover {
        background-color: var(--color-primary-hover);
        color: var(--color-white);
    }

/* File name display */
.file-upload-name {
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
}


/* Two column layout for form + email */
.two-column-layout {
    display: grid;
    grid-template-columns: 1fr 350px; /* Left column flexible, right column 350px */
    gap: var(--spacing-2xl); /* 32px gap between columns */
    align-items: start; /* Align both columns to top */
}

.left-column {
    /* Left column takes remaining space */
}

.right-column {
    /* Right column is fixed 350px */
}

.two-column-equal {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 1070px) {
    .two-column-layout {
        grid-template-columns: 1fr;
    }
}

.field-helper-text {
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    margin-left: var(--spacing-sm);
}


/* Email section styling */
.email-section {
    display: flex;
    flex-direction: column;
}

.email-listbox {
    width: 100%;
    min-height: 300px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
}

    .email-listbox:focus {
        border-color: var(--color-primary);
        outline: none;
    }

.validation-messages {
    font-size: var(--font-size-small);
}

/* Radio button list styling - simple approach */
.radio-list td {
    padding-right: var(--spacing-2xl) !important;
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
}

.radio-list label {
    vertical-align: middle;
}

.radio-list input[type="radio"] {
    margin-right: var(--spacing-xs);
    vertical-align: middle;
    accent-color: var(--color-primary);
}

@media (max-width: 1142px) {
    .radio-list,
    .radio-list tbody,
    .radio-list tr,
    .radio-list td {
        display: block;
    }

        .radio-list td {
            padding-right: 0 !important;
        }
}


/* Modal overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: block;
}

/* Modal overlay */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Modal content box */
.modal-content {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    z-index: 1001;
}

/* Modal header */
.modal-header {
    padding: var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0;
}

/* Close button */
.modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    line-height: 1;
}

    .modal-close:hover {
        color: var(--color-text);
    }

/* Modal body */
.modal-body {
    padding: var(--spacing-xl);
    font-size: var(--font-size-body);
    line-height: var(--line-height-relaxed);
    color: var(--color-text);
}

/* Modal footer */
.modal-footer {
    padding: var(--spacing-lg) var(--spacing-xl);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-start;
    gap: var(--spacing-md);
}

.modal-title-warning {
    color: var(--color-error);
}


/* Email checkbox list - simple vertical layout */
.email-checklist {
    display: block !important;
    width: fit-content;
    min-width: 230px;
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    background: var(--color-white) !important;
}

    .email-checklist table {
        display: block !important;
        width: 100% !important;
    }

    .email-checklist tbody {
        display: block !important;
    }

    .email-checklist tr {
        display: block !important;
        margin-bottom: var(--spacing-sm);
    }

    .email-checklist td {
        display: flex !important;
        align-items: center;
        border: none !important;
        cursor: pointer;
    }

        .email-checklist td:hover {
            background-color: var(--color-bg-light);
            border-radius: var(--radius-sm);
        }

    .email-checklist input[type="checkbox"] {
        margin-right: var(--spacing-sm);
        flex-shrink: 0;
        /* Checkbox styling */
        width: 18px;
        height: 18px;
        border: 2px solid var(--color-border);
        border-radius: var(--radius-sm); /* Rounded corners */
        cursor: pointer;
        appearance: none; /* Remove default browser styling */
        background-color: var(--color-white);
        position: relative;
        transition: all 0.2s ease;
    }

        /* Checkbox hover state */
        .email-checklist input[type="checkbox"]:hover {
            border-color: var(--color-primary);
        }

        /* Checkbox checked state */
        .email-checklist input[type="checkbox"]:checked {
            background-color: var(--color-primary);
            border-color: var(--color-primary);
        }

            /* Checkmark inside checkbox */
            .email-checklist input[type="checkbox"]:checked::after {
                content: "";
                position: absolute;
                left: 5px;
                top: 2px;
                width: 4px;
                height: 8px;
                border: solid white;
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
            }

    .email-checklist label {
        color: var(--color-text-secondary);
        font-size: var(--font-size-body);
        cursor: pointer;
    }

        .email-checklist label:hover {
            color: var(--color-primary);
        }

    .email-checklist input[type="checkbox"]:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

        .email-checklist input[type="checkbox"]:disabled + label {
            color: var(--color-text-secondary);
            cursor: not-allowed;
        }


/* Search and action bar */
.search-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto var(--spacing-2xl) auto; /* Center horizontally, margin bottom */
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    width: 50%;
}

/* ============================================
   FOLDER/FILE GRIDVIEW TABLES
   ============================================ */
.folder-tree-table {
    border: none !important;
    background: transparent !important;
    border-collapse: collapse !important;
}

    .folder-tree-table td,
    .folder-tree-table th {
        border: none !important;
        padding: var(--spacing-xs) !important;
        vertical-align: middle !important;
    }

/* Hide the "Add Folder" header row */
/*    .folder-tree-table > tbody > tr:first-child th {
        padding: var(--spacing-xs) !important;
    }*/

/* Folder toggle (chevron + folder icon) */
.folder-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    text-decoration: none;
    cursor: pointer;
    color: var(--color-text);
}

    .folder-toggle:hover {
        color: var(--color-primary);
    }

    /* Chevron icon (rotates on expand) */
    .folder-toggle .fa-chevron-right,
    .folder-toggle .fa-chevron-down {
        font-size: 12px;
        transition: transform 0.2s ease;
    }

    /* Folder icon */
    .folder-toggle .fa-folder {
        font-size: 16px;
        color: var(--color-primary);
    }

/* Add Folder link */
.add-folder-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-small);
    color: var(--color-primary);
    text-decoration: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: background-color 0.2s ease;
}

    .add-folder-link:hover {
        background-color: var(--color-bg-light);
        text-decoration: none;
    }

    .add-folder-link .fa-plus {
        font-size: 12px;
    }

/* Subfolder container (indented) */
.subfolder-container {
    margin-left: var(--spacing-2xl);
    padding-top: var(--spacing-sm);
}

/* Files container (indented further) */
.files-container {
    margin-left: var(--spacing-xl);
    padding-top: var(--spacing-md);
}

#vwCategory {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.chevron-color {
    color: var(--color-text-secondary);
}

/* Folder name text */
.folder-name {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    margin-left: var(--spacing-xs);
}

.folder-toggle:hover .folder-name {
    color: var(--color-primary);
}


@media (max-width: 768px) {
    .files-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .files-container table {
            table-layout: auto;
            min-width: 600px;
        }

        .files-container td:nth-child(1) {
            padding-right: var(--spacing-md) !important;
        }

    /* Let long filenames wrap between words, not run off or break mid-word */
    .file-link {
        overflow-wrap: break-word; /* wrap long names onto the next line */
        white-space: normal; /* allow wrapping (undo the nowrap) */
    }

    /* Search and action bar */
    .search-action-bar {
        width: 100%;
    }
}

/* ============================================
   FILE TABLE STYLING (UPDATE)
   ============================================ */
/* Files table container */
.files-container table {
    width: 100%;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-2xl);
    table-layout: fixed;
}

/* Table headers */
.files-container th {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-align: left;
    padding: var(--spacing-sm) var(--spacing-xl) !important;
    border-bottom: 2px solid var(--color-border);
    background: transparent;
}

    /* File Name - widest */
    .files-container th:nth-child(1) {
        width: 50%;
    }

    /* Date */
    .files-container th:nth-child(2) {
        width: 15%;
    }

    /* Uploaded By */
    .files-container th:nth-child(3) {
        width: 20%;
    }
    /* Actions */
    .files-container th:nth-child(4) {
        width: 20%;
    }

/* Table rows */
.files-container tr {
    border-bottom: 1px solid var(--color-border-light);
}

.files-container td {
    padding: var(--spacing-sm) var(--spacing-xl) !important; /* Tighter vertical, more horizontal */
    word-wrap: break-word;
    text-align: left !important;
}

    /* Add extra spacing between File Name and Date columns */
    .files-container td:nth-child(1) {
        padding-right: var(--spacing-3xl) !important;
    }

.files-container tr:hover {
    background-color: var(--color-bg-light);
}

/* File links */
.file-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

    .file-link:hover {
        text-decoration: underline;
    }

/* Action icons in table */
.action-icon {
    width: 18px;
    height: 18px;
    margin: 0 var(--spacing-xs);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    border: none;
    background: none;
    display: inline-block;
    font-size: large;
}

    .action-icon:hover {
        opacity: 1;
    }

    .action-icon i {
        font-size: large;
    }


.new-folder .folder-name::after {
    content: "NEW";
    display: inline-block;
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    color: white;
    background-color: var(--color-yellow);
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: var(--spacing-sm);
    text-transform: uppercase;
}

/* Search results container */
.search-results-container {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
    border-bottom: 1px solid var(--color-border)
}
/* ============================================
   SEARCH RESULTS TABLE STYLING
   ============================================ */
.search-results-table {
    width: 100%;
    table-layout: fixed; /* CRITICAL: Forces column widths to be respected */
    border-collapse: separate; /* Allows border-spacing to work */
    border-spacing: 0; /* No gaps between cells */
    margin-top: var(--spacing-lg);
}

    /* Table headers */
    .search-results-table th {
        font-size: var(--font-size-body);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text);
        text-align: left;
        padding: var(--spacing-md) var(--spacing-lg) !important;
        border-bottom: 2px solid var(--color-border);
        background: transparent;
    }

        /* Column widths */
        .search-results-table th:nth-child(1) {
            width: 30%;
        }
        /* File Name */
        .search-results-table th:nth-child(2) {
            width: 35%;
        }
        /* Location - widest */
        .search-results-table th:nth-child(3) {
            width: 15%;
        }
        /* Uploaded By */
        .search-results-table th:nth-child(4) {
            width: 12%;
        }
        /* Date */
        .search-results-table th:nth-child(5) {
            width: 8%;
        }
    /* Actions */

    /* Table rows */
    .search-results-table tr {
        border-bottom: 1px solid var(--color-border-light);
    }

    .search-results-table td {
        padding: var(--spacing-md) var(--spacing-lg) !important;
        vertical-align: top;
        text-align: left;
    }

    .search-results-table tr:hover {
        background-color: var(--color-bg-light);
    }


/* ============================================
   Submittal Summary Page
   ============================================ */
.submittal-days {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
}

.submittal-section-title {
    font-size: var(--font-size-section-header);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
    display: block;
}

.submittal-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
}

    .submittal-table th {
        /*        background-color: var(--color-bg-light);*/
        background-color: #edf0f4;
        /*        padding: var(--spacing-lg) var(--spacing-xl);*/
        padding: var(--spacing-sm) var(--spacing-sm);
        text-align: left;
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-secondary);
        position: relative;
    }

        .submittal-table th:not(:last-child)::after {
            content: "";
            position: absolute;
            right: 0;
            top: 25%;
            bottom: 25%;
            width: 1px;
            /*            background-color: var(--color-border);*/
            background-color: #cdd3db;
        }

        .submittal-table th a {
            color: var(--color-text-secondary) !important;
            text-decoration: none;
        }

            .submittal-table th a:hover {
                text-decoration: underline;
            }

    .submittal-table td {
        padding: var(--spacing-sm) var(--spacing-sm);
        /*        padding-left: var(--spacing-sm);*/
        /*        padding-right: var(--spacing-sm);*/
        border-bottom: 1px solid var(--color-border);
        position: relative;
    }

        .submittal-table td:not(:last-child)::after {
            content: "";
            position: absolute;
            right: 0;
            top: 25%;
            bottom: 25%;
            width: 1px;
            background-color: var(--color-border);
        }

    .submittal-table tbody tr:nth-child(odd) {
        background-color: var(--color-bg-light);
    }

    .submittal-table tbody tr:hover {
        background-color: var(--color-primary-subtle);
    }

    /* Parent phase table - blue header, subtle gray rows */
    .submittal-table.submittal-table-phase thead tr {
        background-color: var(--color-primary);
        color: var(--color-white);
    }

        .submittal-table.submittal-table-phase thead tr th {
            color: var(--color-white);
        }

    .submittal-table.submittal-table-phase tbody tr {
        background-color: var(--color-bg-light);
    }

        .submittal-table.submittal-table-phase tbody tr:nth-child(even) {
            background-color: var(--color-white);
        }

        .submittal-table.submittal-table-phase tbody tr:hover {
            background-color: var(--color-primary-subtle);
        }

        .submittal-table.submittal-table-phase tbody tr td {
            font-weight: var(--font-weight-medium);
        }

        .submittal-table.submittal-table-phase tbody tr:last-child td {
            font-weight: var(--font-weight-semibold);
            color: var(--color-text);
            background-color: var(--color-white);
        }


    /* Nested child table - orange header, white rows */
    .submittal-table.submittal-table-nested thead tr {
        background-color: var(--color-internal);
        color: var(--color-white);
    }

        .submittal-table.submittal-table-nested thead tr th {
            color: var(--color-white);
        }

    .submittal-table.submittal-table-nested tbody tr {
        background-color: var(--color-white);
    }

        .submittal-table.submittal-table-nested tbody tr:nth-child(even) {
            background-color: var(--color-white);
        }

        .submittal-table.submittal-table-nested tbody tr:hover {
            background-color: var(--color-internal-bg);
        }

.submittal-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 950px) {
    .submittal-toolbar {
        flex-direction: column; /* stack Show group over Key group */
        align-items: flex-start; /* left-align both instead of stretching */
        gap: var(--spacing-xl); /* space between the stacked groups */
    }

    .show-submittals {
        width: 100%
    }
}


.qaqc-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 680px) {
    .qaqc-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xl);
    }

    .show-submittals {
        width: 100%
    }
}


.col-header-center {
    text-align: center !important;
}

/* Child table container - orange left border signals nesting */
.child-table-container {
    border-left: 3px solid var(--color-internal);
    box-shadow: var(--shadow-md);
    margin: var(--spacing-xs) 0 var(--spacing-md) 0;
}

/* Expand toggle icon */
.expand-toggle {
    color: var(--color-primary);
    cursor: pointer;
    font-size: var(--font-size-body);
    transition: transform 0.2s ease;
}

    .expand-toggle.open {
        color: var(--color-primary-hover);
    }

.table-cell-text {
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
}

.status-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}


/* ============================================
   Filter Bar
   ============================================ */
.filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

    .filter-bar .form-control {
        width: auto;
        min-width: 140px;
    }

.filter-bar-divider {
    width: 1px;
    height: 24px;
    background-color: var(--color-border);
}

.filter-sort-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.filter-label {
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

@media (max-width: 768px) {
    .filter-bar {
        flex-direction: column; /* stack fields vertically */
        align-items: stretch; /* each field fills the width */
        justify-content: flex-start; /* kill the space-between spreading */
    }

        .filter-bar .form-control {
            width: 100%; /* dropdowns/search fill their field */
        }

    .filter-bar-divider {
        display: none; /* vertical divider is meaningless stacked */
    }
}

.sort-btn {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-body);
    transition: all 0.2s ease;
}

    .sort-btn:hover {
        border-color: var(--color-primary);
        color: var(--color-primary);
        background-color: var(--color-primary-bg);
    }

/* ============================================
   Project Log Cards
   ============================================ */
.log-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-primary);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
}

.log-card-info {
    border-left-color: var(--color-primary);
}

.log-card-decision {
    border-left-color: var(--color-success);
}

.log-card-issue {
    border-left-color: var(--color-error);
}

.log-card-change {
    border-left-color: var(--color-internal);
}

/*for submittals card - similar to log card - new color coding*/
.submittal-card-rfi {
    border-left-color: var(--color-primary);
}

.submittal-card-submittal {
    border-left-color: #7c3aed;
}

.submittal-card-cp {
    border-left-color: var(--color-yellow);
}

.submittal-card-ap {
    border-left-color: #42c1b5; /* teal */
}

/* Header */
.log-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg-light);
}

.log-card-header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.log-card-icon {
    width: 24px;
    height: 24px;
}

.log-card-subject {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-decoration: none;
}

    .log-card-subject:hover {
        color: var(--color-primary);
        text-decoration: underline;
    }
/* Log type badge */
.log-type-badge {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    background-color: var(--color-primary-bg);
    color: var(--color-primary);
    flex-shrink: 0; /* pill keeps its size, doesn't get squished */
    white-space: nowrap;
}

.log-type-badge-open {
    background-color: var(--color-primary-bg);
    color: var(--color-primary);
}

.log-type-badge-closed {
    background-color: #dcfce7;
    color: var(--color-success);
}

.log-card-info .log-type-badge {
    background-color: var(--color-primary-bg);
    color: var(--color-primary);
}

.log-card-decision .log-type-badge {
    background-color: #d1fae5;
    color: #085c40;
}

.log-card-issue .log-type-badge {
    background-color: #fee2e2;
    color: var(--color-error);
}

.log-card-change .log-type-badge {
    background-color: #ffe2cb;
    color: var(--color-internal);
}

.submittal-type-badge-rfi {
    background-color: #dbeafe;
    color: var(--color-primary);
}

.submittal-type-badge-submittal {
    background-color: #ede9fe;
    color: #7c3aed;
}

.submittal-type-badge-cp {
    background-color: #fef9c3;
    color: #d97706;
}

.submittal-type-badge-ap {
    background-color: #d0f5f3;
    color: #42c1b5;
}


/* Body */
.log-card-body {
    padding: var(--spacing-lg) var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.log-card-field {
    display: flex;
    gap: var(--spacing-md);
}

.log-card-label {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    min-width: 100px;
    flex-shrink: 0;
}

.log-card-value {
    font-size: var(--font-size-body);
    color: var(--color-text);
}

/* Metadata strip */
.log-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
    padding: var(--spacing-md) var(--spacing-xl);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg-light);
    font-size: var(--font-size-small);
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
}

.log-card-meta-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin-right: var(--spacing-xs);
}

/* Comments */
.log-card-comment {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-xl);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-border-light);
}

.log-card-comment-icon {
    color: var(--color-text-light);
    margin-top: 2px;
    flex-shrink: 0;
}

.log-card-comment-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    font-size: var(--font-size-body);
    color: var(--color-text);
    font-style: italic;
}

.log-card-comment-meta {
    font-size: var(--font-size-small);
    color: var(--color-text-light);
    font-style: normal;
}


.attachment-icon {
    color: var(--color-text-secondary);
    font-size: large;
    vertical-align: middle;
    margin-left: var(--spacing-xs);
}

    .attachment-icon:hover {
        color: var(--color-primary);
    }

.hidden-download-btn {
    display: none !important;
}

.attachment-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    padding: 0;
    font-size: var(--font-size-body);
    vertical-align: middle;
}

    .attachment-icon-btn:hover {
        color: var(--color-primary);
    }


.log-type-icon {
    font-size: 20px;
}

.log-type-icon-info {
    color: var(--color-primary);
}

.log-type-icon-decision {
    color: var(--color-success);
}

.log-type-icon-issue {
    color: var(--color-error);
}

.log-type-icon-change {
    color: var(--color-internal);
}

.attachment-icon-btn-danger {
    color: var(--color-error);
}

    .attachment-icon-btn-danger:hover {
        color: var(--color-error-hover);
    }





/* ============================================
   Project Log Cards
   ============================================ */
.upload-area {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg) var(--spacing-xl);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--color-white);
    max-width: 300px;
}

    .upload-area:hover {
        border-color: var(--color-primary);
        background: var(--color-primary-bg);
    }

    .upload-area.has-file {
        border-color: var(--color-success);
        border-style: solid;
        background: #f0fdf4;
    }

    .upload-area.drag-over {
        border-color: var(--color-primary);
        background: var(--color-primary-bg);
        transform: scale(1.01);
    }

.upload-area-icon {
    font-size: 24px;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
}

.upload-area.has-file .upload-area-icon,
.upload-area.has-error .upload-area-icon {
    display: none;
}

.upload-area-text {
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    margin: 0;
}

.upload-area.has-file .upload-area-text,
.upload-area.has-error .upload-area-text {
    display: none;
}

.upload-area-link {
    /* reset default button styles so it reads as a link */
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    /* link styling (after `font: inherit` so it isn't overwritten) */
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

    .upload-area-link:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
    }

.upload-area-file-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    justify-content: center;
    max-width: 100%;
}

.upload-area-filename {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-area-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    transition: color 0.2s ease;
}

    .upload-area-remove:hover {
        color: var(--color-error);
    }

.upload-area-hint {
    font-size: var(--font-size-small);
    color: var(--color-text-light);
    margin: 0;
}

.upload-area-error {
    font-size: var(--font-size-small);
    color: var(--color-error);
    margin: var(--spacing-xs) 0 0 0;
}

.upload-area.has-error {
    border-color: var(--color-error);
    background: #fef2f2;
}

.upload-area-file-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 160px; /* ~5 rows, then scroll — keeps the modal from growing unbounded */
    overflow-y: auto;
    text-align: left;
}

.upload-area-file-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-small);
}

    .upload-area-file-item .upload-area-filename {
        flex: 1;
        min-width: 0; /* lets the span actually shrink inside flex */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .upload-area-file-item .upload-area-remove {
        margin-left: auto;
        flex-shrink: 0;
    }

.upload-area-file-count {
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    padding-bottom: var(--spacing-xs);
}

.modal-content-large .upload-area {
    max-width: 500px;
}


/* Legend/key display */

.legend-box {
    display: flex;
    align-items: center; /* center the PM/PA/TR items within the box */
    gap: var(--spacing-xl);
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--color-bg-light);
    border-radius: var(--radius-md);
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    width: fit-content;
}

.legend-item strong {
    color: var(--color-text);
}


/* Warning/confirmation modal */
.modal-warning {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-xl);
    z-index: 1001;
    width: 400px;
    max-width: 90%;
}

.modal-warning-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-error);
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Profile menu */
.profile-menu {
    position: relative;
    display: inline-block;
}

.profile-menu-trigger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    border-radius: 50%;
}

    .profile-menu-trigger:hover {
        background-color: rgba(0, 0, 0, 0.08);
    }

    .profile-menu-trigger:focus {
        outline: 2px solid #0054a6;
        outline-offset: 2px;
    }

.profile-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    margin-top: var(--spacing-xs); /* 4px — keeps the existing gap */
    overflow: hidden; /* so hover corners respect the radius */
    z-index: 10;
}

.profile-menu-item {
    display: block;
    padding: var(--spacing-md) var(--spacing-lg);
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
    border-bottom: 1px solid var(--color-border-light);
}

    .profile-menu-item:hover {
        background-color: var(--color-bg-light);
    }

    .profile-menu-item:focus {
        background-color: var(--color-bg-light);
        outline: none;
    }


.preview-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary, #2563eb);
    align-self: center; /* centers it within a flex parent row */
}

.pending-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--spacing-sm, 0.4rem);
    padding: 0.25rem 0.75rem;
    background: var(--color-surface-secondary, #f3f4f6);
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--color-text-secondary, #4b5563);
}

.pending-chip-x {
    color: var(--color-text-secondary, #6b7280);
    text-decoration: none;
    margin-left: 0.15rem;
}

    .pending-chip-x:hover {
        color: var(--color-danger, #dc2626);
    }

/* Deadline warning rows (Team log) — class assigned in code-behind
       based on Needed By date vs. today */

/* Overdue: past Needed By, not resolved */
.submittal-table tbody tr.row-overdue,
.submittal-table tbody tr.row-overdue:nth-child(odd) {
    background-color: #fef2f2;
}

.submittal-table tr.row-overdue td {
    color: #b91c1c;
}

    .submittal-table tr.row-overdue td:first-child {
        border-left: 4px solid #dc2626;
    }

/* Due soon: within 5 days of Needed By, not resolved */
.submittal-table tbody tr.row-duesoon,
.submittal-table tbody tr.row-duesoon:nth-child(odd) {
    background-color: #fef9c3;
}

.submittal-table tr.row-duesoon td {
    color: #854d0e;
}

    .submittal-table tr.row-duesoon td:first-child {
        border-left: 4px solid #eab308;
    }

/* ===== Print styles ===== */
@media print {

    @page {
        size: landscape;
    }

    .noprint,
    .site-header,
    .site-footer,
    .basictab,
    .btn {
        display: none !important;
    }

    .form-card {
        box-shadow: none;
        border: none;
        padding: 0;
    }

    .submittal-table th,
    .submittal-table td {
        font-size: 10pt;
    }

    .submittal-table tr.row-overdue td,
    .submittal-table tr.row-duesoon td {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* Textarea + upload side by side */
.field-pair {
    display: flex;
    align-items: stretch; /* upload box matches textarea height */
    gap: var(--spacing-lg);
    flex: 1;
    min-width: 0;
    max-width: 900px;
}

.field-pair-text {
    flex: 1; /* textarea takes the leftover width */
    min-width: 0;
}

.field-pair-upload {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 260px;
    flex-shrink: 0;
}

    .field-pair-upload .upload-area {
        flex: 1; /* stretch to fill the height */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: none;
    }

.field-pair-caption {
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
}

@media (max-width: 992px) {
    .field-pair {
        flex-direction: column;
        width: 100%;
    }

    .field-pair-upload {
        width: 100%;
    }
}