/* ============================================================================
   Rizzy Doors Quote System - Main Styles
   ============================================================================ */

/* ============================================================================
   FONTS & CUSTOM PROPERTIES
   ============================================================================ */

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

/* Mokoto Font */
@font-face {
    font-family: 'Mokoto';
    src: url('../fonts/mokoto.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* CSS Custom Properties */
:root {
    --primary-color: #00204b;
    --secondary-color: #2D3748;
    --accent-color: #334d6f;
    --background-color: #F7FAFC;
    --text-color: #1A202C;
    --spacing-unit: 1rem;

    /* Additional semantic colors */
    --success-color: #28a745;
    --warning-color: #fd7e14;
    --danger-color: #dc3545;
    --info-color: #17a2b8;
    --light-color: #f8f9fa;
    --dark-color: #343a40;

    /* Border and shadow */
    --border-color: #dee2e6;
    --border-radius: 6px;
    --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --box-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* Derived color variants */
    --primary-dark: #001a3d;
}

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
    overflow-y: scroll;
}

/* Typography hierarchy */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

/* Mokoto font application */
header h1,
.login-form h2 {
    font-family: 'Mokoto', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: normal;
    letter-spacing: 0.3px;
}

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

a:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-unit);
}

/* ============================================================================
   HEADER & NAVIGATION
   ============================================================================ */

.header {
    background-color: var(--primary-color);
    color: white;
    box-shadow: var(--box-shadow);
    position: relative;
    z-index: 1001;
}

.nav-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-unit);
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
}

/* Logo - Left */
.logo {
    position: absolute;
    left: var(--spacing-unit);
}

.logo img {
    height: 40px;
    width: auto;
    display: block;
}

.logo a {
    display: block;
    transition: opacity 0.3s ease;
    cursor: pointer;
    pointer-events: auto;
}

.logo a:hover {
    opacity: 0.8;
    cursor: pointer;
}

/* Navigation - Center */
.nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
    min-width: 600px;
}

.nav-links li {
    margin-right: 1.5rem;
}

.nav-links li:last-child {
    margin-right: 0;
}

.nav-link {
    text-decoration: none;
    color: white;
    font-weight: 500;
    font-family: 'Mokoto', sans-serif;
    font-size: 0.9rem;
    transition: color 0.3s ease;
    padding: 0.5rem 0;
    border-bottom: 2px solid transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: pointer;
    pointer-events: auto;
}

.nav-link:hover {
    color: var(--accent-color);
    text-decoration: none;
    cursor: pointer;
}

.nav-link.active {
    border-bottom-color: rgba(255, 255, 255, 0.9);
}


/* Keyboard-only focus ring — avoids a persistent outline lingering after mouse clicks */
.nav-link:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Modest separation between the dashboard link and the main module links */
.nav-link[href*="takeoffs"] {
    margin-left: 2rem;
}

/* Attention marker on a nav link — currently the Products tab when extension
   price checks are waiting to be reviewed. Sized to sit alongside the label
   without changing the nav's line height, and given its own colour rather than
   --accent-color so it stays legible against the hover state. */
.nav-alert-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    margin-left: 0.4rem;
    padding: 0 4px;
    border-radius: 8px;
    background: #ff9800;
    color: #1a1a1a;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

.nav-alert-badge[hidden] {
    display: none;
}

/* User Actions Navigation - Right */
.nav-links-right {
    position: absolute;
    right: var(--spacing-unit);
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2rem;
}

/* Title - Right */
.header-title {
    position: absolute;
    right: var(--spacing-unit);
}

.header-title h1 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: normal;
    letter-spacing: 0.5px;
    color: white;
}

/* ============================================================================
   MAIN CONTENT AREAS
   ============================================================================ */

main {
    padding: 2rem 0;
}

.page-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 2rem;
}

.actions {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem; /* 8px gap between buttons */
}

.actions > * {
    flex-shrink: 0; /* Prevent buttons from shrinking */
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    font-family: 'Mokoto', sans-serif;
    text-align: center;
    line-height: 1;
}

.btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.btn:active {
    transform: translateY(0);
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Button variants */
.btn-primary {
    background-color: var(--primary-color);
    color: white;
    border: 1px solid var(--primary-color);
    box-shadow: 0 2px 4px rgba(0, 32, 75, 0.2);
}

.btn-primary:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 4px 8px rgba(0, 32, 75, 0.3);
    color: white;
}

.btn-secondary {
    background: var(--secondary-color);
    color: white;
    border: 1px solid var(--secondary-color);
}

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

/* Compact "20%" markup shortcut chip — sets a custom product's sell price to
   cost + 20%. Used in the quote edit row and the takeoff custom-product modal. */
.markup-chip {
    flex-shrink: 0;
    border: 1px solid var(--secondary-color);
    background: #fff;
    color: var(--secondary-color);
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 4px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.markup-chip:hover {
    background: var(--secondary-color);
    color: #fff;
}

.btn-success {
    background: var(--success-color);
    color: white;
    border: 1px solid var(--success-color);
}

.btn-success:hover {
    background: #218838;
    border-color: #218838;
    color: white;
}

.btn-info {
    background: var(--info-color);
    color: white;
    border: 1px solid var(--info-color);
}

.btn-info:hover {
    background: #138496;
    border-color: #138496;
    color: white;
}

.btn-warning {
    background: var(--warning-color);
    color: white;
    border: 1px solid var(--warning-color);
}

.btn-warning:hover {
    background: #e8660c;
    border-color: #e8660c;
    color: white;
}

.btn-danger {
    background: var(--danger-color);
    color: white;
    border: 1px solid var(--danger-color);
}

.btn-danger:hover {
    background: #c82333;
    border-color: #c82333;
    color: white;
}

/* Confirm price button */
.btn-confirm-price {
    background: var(--success-color);
    color: white;
    border: 1px solid var(--success-color);
    font-weight: 900;
    width: 27px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-confirm-price:hover {
    background: #218838;
    border-color: #218838;
    color: white;
}

/* Button sizes */
.btn-small {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}



.btn-large {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

/* Button variants */
.btn-outline {
    background: transparent;
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

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

/* Semantic button classes */
.btn-edit {
    background: var(--info-color);
    color: white;
    border: 1px solid var(--info-color);
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-edit:hover {
    background: #138496;
    border-color: #138496;
    color: white;
}

.btn-duplicate {
    background: var(--accent-color);
    color: white;
    border: 1px solid var(--accent-color);
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

.btn-delete {
    background: var(--danger-color);
    color: white;
    border: 1px solid var(--danger-color);
    font-weight: bold;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    width: 27px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-delete:hover {
    background: #c82333;
    border-color: #c82333;
    color: white;
}

.btn-deactivate {
    background: var(--warning-color);
    color: white;
    border: 1px solid var(--warning-color);
}
.btn-deactivate:hover {
    background: #e8660c;
    border-color: #e8660c;
    color: white;
}

.btn-activate {
    background: var(--success-color);
    color: white;
    border: 1px solid var(--success-color);
}
.btn-activate:hover {
    background: #218838;
    border-color: #218838;
    color: white;
}

.btn-view {
    background: #6f42c1;
    color: white;
    border: 1px solid #6f42c1;
}
.btn-view:hover {
    background: #5a32a3;
    border-color: #5a32a3;
    color: white;
}

.btn-quote {
    background: var(--success-color);
    color: white;
    border: 1px solid var(--success-color);
}
.btn-quote:hover {
    background: #218838;
    border-color: #218838;
    color: white;
}

/* ============================================================================
   FORMS
   ============================================================================ */

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--secondary-color);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(51, 77, 111, 0.1);
}

.form-group textarea {
    min-height: 100px;
}

.form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-row .form-group {
    flex: 1;
}

.form-group.full-width {
    flex: 1 1 100%;
}

/* Date fields container */
.date-fields {
    display: flex;
    gap: 1rem;
}

.date-field {
    flex: 1;
}

.date-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--secondary-color);
    margin-bottom: 0.375rem;
}

.date-field input[type="date"] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
    box-sizing: border-box;
}

.date-field input[type="date"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 32, 75, 0.1);
}

.date-field select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
    box-sizing: border-box;
    background-color: white;
}

.date-field select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 32, 75, 0.1);
}

/* Checkbox styling */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: normal;
    cursor: pointer;
    margin-bottom: 0;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
    margin: 0;
    transform: scale(1.2);
}

.checkbox-group .help-text {
    color: #666;
    font-size: 0.875rem;
    font-style: italic;
    margin-left: 1.5rem;
}

/* ============================================================================
   FILTERS & SEARCH
   ============================================================================ */

.filters-row {
    display: flex;
    align-items: center;
    margin: 2rem 0;
    gap: 2rem;
    position: relative;
    padding-right: 300px; /* Reserve space for filter buttons on the right */
}

/* Status filters - positioned to the right */
.status-filter-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.status-filter-section label {
    font-weight: 600;
    color: var(--secondary-color);
    margin: 0;
    white-space: nowrap;
}

/* Column reset section */
.column-reset-section {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Add button section */
.add-button-section {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.add-button-section .btn {
    width: 160px;
    white-space: nowrap;
    font-family: 'Mokoto', sans-serif;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2; /* Better vertical centering */
}

/* Search section - standardized layout */
.search-section {
    flex-shrink: 0;
}

/* Header Menu - 3-dot menu in Actions column header */
.header-menu-wrapper {
    float: right;
    position: relative;
    display: inline-block;
}

.header-menu {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 1rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
    user-select: none;
}

.header-menu:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.header-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    min-width: 140px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    border-radius: 4px;
    z-index: 1000;
    border: 1px solid #ddd;
    margin-top: 2px;
}

.header-dropdown-content .btn-reset-columns {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.85rem;
    color: #333;
    border-radius: 4px;
    line-height: 1.2;
}

.header-dropdown-content .btn-reset-columns:hover {
    background: #f8f9fa;
}

.header-menu-wrapper.active .header-dropdown-content {
    display: block;
}

/* Category filters - match status filter styling */
.category-filter-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.category-filter-section label {
    font-weight: 600;
    color: var(--secondary-color);
    margin: 0;
    white-space: nowrap;
}

.status-filter-buttons,
.category-filter-buttons {
    display: flex;
    gap: 0.5rem;
}

.category-filters-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

/* ---------------------------------------------------------------------------
   Status pills relocated into the second filter row (quotes module).

   The row above reserves a fixed 300px on the right and absolutely positions
   .status-filter-section into it, which stops scaling once there are more than
   a handful of pills. Both of those rules are global — products, customers,
   purchase-orders and takeoffs still rely on them — so everything here is
   scoped to the two opt-in classes and changes nothing elsewhere.
   --------------------------------------------------------------------------- */

/* Row above: reclaim the reservation once the pills have left it. */
.filters-row.no-status-section {
    padding-right: 0;
}

/* Undo the absolute positioning inherited from the global rule. */
.category-filters-row.has-status-filters > .status-filter-section {
    position: static;
    transform: none;
    top: auto;
    right: auto;
    flex: 0 0 auto;
}

/* True centring: the two outer sections share the leftover space equally, so
   the pills sit centred in the row regardless of how wide the customer name
   or the follow-up label happens to be. justify-content on the row has nothing
   left to distribute once these grow, so it no longer applies. */
.category-filters-row.has-status-filters > .category-filter-section,
.category-filters-row.has-status-filters > .follow-up-filter-section {
    flex: 1 1 0;
    min-width: 0;
}

.category-filters-row.has-status-filters > .follow-up-filter-section {
    justify-content: flex-end;
}

/* Below the desktop breakpoint the pills already scroll horizontally
   (mobile.css). Let the row wrap so they get a line of their own rather than
   squeezing the dropdown, and drop the equal-share centring that assumes one
   line. */
@media (max-width: 900px) {
    .category-filters-row.has-status-filters {
        flex-wrap: wrap;
    }

    .category-filters-row.has-status-filters > .status-filter-section {
        order: 3;
        flex: 1 1 100%;
        min-width: 0;
    }

    .category-filters-row.has-status-filters > .category-filter-section,
    .category-filters-row.has-status-filters > .follow-up-filter-section {
        flex: 0 1 auto;
    }
}

/* Products module: groups the vendor filter dropdown with the category filter
   buttons on the left side of the filters row, keeping the dropdown immediately
   to the left of the category buttons. */
.products-left-filters {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Shared filter dropdown (customer filter on quotes/takeoffs, vendor filter on
   purchase orders). Centralized here so the three modules stay in sync. */
.customer-dropdown {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--secondary-color);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--secondary-color);
    background: white;
    transition: all 0.2s ease;
    line-height: 1.5;
    cursor: pointer;
    min-width: 200px;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334d6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}
.customer-dropdown:hover {
    background-color: var(--light-color);
    border-color: var(--accent-color);
}
.customer-dropdown:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 32, 75, 0.2);
}

.status-filter-btn {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--secondary-color);
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--secondary-color);
    background: white;
    transition: all 0.2s ease;
    line-height: 1.2; /* Better vertical centering */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.status-filter-btn:hover {
    background: var(--secondary-color);
    color: white;
    text-decoration: none;
}

.status-filter-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Search */
.search-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.search-bar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.search-bar input {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--secondary-color);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    background: white;
    color: var(--secondary-color);
    transition: all 0.2s ease;
    min-width: 455px;
    line-height: 1.2; /* Better vertical centering */
}

.search-bar input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 32, 75, 0.1);
}

.search-bar input::placeholder {
    color: var(--secondary-color);
    font-weight: 400;
}

.search-bar .btn-secondary {
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    line-height: 1.2; /* Better vertical centering */
    font-family: 'Inter', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ----------------------------------------------------------------------------
   Search syntax help icon — used next to search/filter inputs to surface
   the supported query syntax (AND terms, -exclude, "phrases").
   ---------------------------------------------------------------------------- */
.search-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
    background: white;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    cursor: help;
    user-select: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.search-help:hover,
.search-help:focus {
    color: var(--primary-color);
    border-color: var(--primary-color);
    outline: none;
}
.search-help-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #1f2937;
    color: #f9fafb;
    padding: 0.65rem 0.8rem;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    width: 280px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
    text-align: left;
    white-space: normal;
}
.search-help:hover .search-help-tooltip,
.search-help:focus .search-help-tooltip {
    visibility: visible;
    opacity: 1;
}
.search-help-tooltip strong {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
}
.search-help-row {
    margin-top: 0.2rem;
}
.search-help-tooltip code {
    display: inline-block;
    background: rgba(255, 255, 255, 0.14);
    color: #ffd66e;
    padding: 0 5px;
    margin-right: 4px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
}
.search-help-example {
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: #d1d5db;
}

/* Footer shown in product/search dropdowns when matches exceed the render cap,
   so the user knows the item they want may be below the cut. Sticks to the
   bottom of scrollable lists. */
.search-result-cap-notice {
    position: sticky;
    bottom: 0;
    padding: 0.4rem 0.75rem;
    background: #fff8e1;
    border-top: 1px solid #f0d99b;
    color: #7a5c00;
    font-size: 0.75rem;
    font-style: italic;
    text-align: center;
    cursor: default;
}

/* ============================================================================
   TABLES
   ============================================================================ */

.table-container,
.vendors-table-container,
.customers-table-container,
.products-table-container,
.quotes-table-container,
.takeoffs-table-container,
.archived-orders-table-container {
    background: white;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    margin-bottom: 2rem;
    width: 100%;
    /* Hide table until column widths are applied to prevent visual jarring */
    opacity: 0;
    transition: opacity 0.15s ease-in;
}

.table-container.widths-applied,
.vendors-table-container.widths-applied,
.customers-table-container.widths-applied,
.products-table-container.widths-applied,
.quotes-table-container.widths-applied,
.takeoffs-table-container.widths-applied,
.archived-orders-table-container.widths-applied {
    opacity: 1;
}

.table,
.vendors-table,
.customers-table,
.products-table,
.quotes-table,
.takeoffs-table,
.archived-orders-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 1px 0;
    table-layout: fixed;
}

.table th,
.table td,
.vendors-table th,
.vendors-table td,
.customers-table th,
.customers-table td,
.products-table th,
.products-table td,
.quotes-table th,
.quotes-table td,
.takeoffs-table th,
.takeoffs-table td,
.archived-orders-table th,
.archived-orders-table td {
    padding: 0.75rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 0;
    font-size: 0.8rem;
}

/* Single-line cell content with ellipsis truncation — applied across all
   list-style tables that share the resizer + paginated UX. Keeps every
   row at one line so the table height is constant across pages, so
   pagination controls and the surrounding layout don't shift while the
   user browses. The .buttons column is excluded since it holds action
   buttons, not text. Full text is surfaced via a native title tooltip
   on hover only when content is actually clipped — TableResizer's
   _applyOverflowTitles() sets/removes the attribute based on
   scrollWidth vs clientWidth after every render + resize. */
.products-table tbody td:not(.buttons),
.quotes-table tbody td:not(.buttons),
.takeoffs-table tbody td:not(.buttons),
.customers-table tbody td:not(.buttons),
.vendors-table tbody td:not(.buttons) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: normal;
    overflow-wrap: normal;
}
/* Flex-container fix-up for the primary "name" cell on each table — the
   <a class="X-name-link"> sits inside <div class="name-with-indicator">,
   so we need (a) the flex parent to be allowed to shrink below its
   content's intrinsic width and (b) the inner link itself to truncate. */
.products-table tbody td.description .name-with-indicator,
.quotes-table tbody td .name-with-indicator,
.takeoffs-table tbody td .name-with-indicator,
.customers-table tbody td .name-with-indicator,
.vendors-table tbody td .name-with-indicator {
    min-width: 0;
}
.products-table tbody td.description .product-description-link,
.quotes-table tbody td .quote-name-link,
.takeoffs-table tbody td .takeoff-name-link,
.customers-table tbody td .customer-name-link,
.vendors-table tbody td .vendor-name-link {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

.table th,
.vendors-table th,
.customers-table th,
.products-table th,
.quotes-table th,
.takeoffs-table th,
.archived-orders-table th {
    padding: 0.5rem 0.75rem;
    line-height: 0.8;
    background: var(--primary-color);
    font-weight: 500;
    font-size: 0.9rem;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.table thead th:first-child,
.vendors-table thead th:first-child,
.customers-table thead th:first-child,
.products-table thead th:first-child,
.quotes-table thead th:first-child,
.takeoffs-table thead th:first-child,
.archived-orders-table thead th:first-child {
    border-top-left-radius: 8px;
}

.table thead th:last-child,
.vendors-table thead th:last-child,
.customers-table thead th:last-child,
.products-table thead th:last-child,
.quotes-table thead th:last-child,
.takeoffs-table thead th:last-child,
.archived-orders-table thead th:last-child {
    border-top-right-radius: 8px;
}

.table tbody tr:hover,
.vendors-table tbody tr:hover,
.customers-table tbody tr:hover,
.products-table tbody tr:hover,
.quotes-table tbody tr:hover,
.takeoffs-table tbody tr:hover,
.archived-orders-table tbody tr:hover {
    background: var(--light-color);
}

/* Table content styling */

/* Action columns should be narrower */
.table .actions,
.vendors-table .actions,
.customers-table .actions,
.products-table .actions,
.quotes-table .actions {
    width: 125px;
    min-width: 125px;
    max-width: 125px;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    padding: 0.75rem 0.25rem; /* Keep vertical padding same as other cells, reduce horizontal */
}

/* Buttons column for table data cells - avoids flexbox inheritance from global .actions */
.table td.buttons,
.vendors-table td.buttons,
.customers-table td.buttons,
.products-table td.buttons,
.quotes-table td.buttons,
.takeoffs-table td.buttons,
.archived-orders-table td.buttons {
    width: 125px;
    min-width: 125px;
    max-width: 125px;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    padding: 0.75rem 0.25rem;
}

/* Status indicators and small content can be narrower */
.table th:first-child,
.table td:first-child {
    width: 30%;
}

/* Cost/price columns can be narrow */
.cost, .sell-price, .quote-count, .last-quote {
    width: 100px;
    white-space: nowrap;
}

/* Currency columns should be right-aligned */
.cost, .sell-price, .quote-total {
    text-align: right;
}

/* ============================================================================
   TABLE COLUMN RESIZING
   ============================================================================ */

/* Resizable table headers */
.resizable {
    position: relative;
}

/* Resize handle styling */
.resize-handle {
    position: absolute;
    right: -2px;
    top: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    z-index: 1000;
    user-select: none;
}

.resize-handle:hover {
    background: rgba(255, 255, 255, 0.3);
    border-right: 2px solid rgba(255, 255, 255, 0.6);
}

.resize-handle:active {
    background: rgba(255, 255, 255, 0.5);
    border-right: 2px solid rgba(255, 255, 255, 0.8);
}

/* Visual feedback during resize */
.resizing {
    background: var(--accent-color);
    transition: none;
}

/* Prevent text selection during resize */
.no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Enhanced cursor feedback */
.resize-handle:hover,
.resizing .resize-handle {
    cursor: col-resize;
}

/* Name styling */
.vendor-name,
.customer-name,
.product-name,
.quote-name {
    font-weight: normal;
    color: var(--primary-color);
    min-width: 200px;
}

.name-with-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quote-name-link,
.product-description-link,
.customer-name-link,
.vendor-name-link {
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
}

.quote-name-link:hover,
.product-description-link:hover,
.customer-name-link:hover,
.vendor-name-link:hover {
    text-decoration: underline;
    color: var(--primary-dark);
}

.status-indicator {
    width: 5px;
    height: 1.2em;
    border-radius: 2px;
    flex-shrink: 0;
    margin-right: 0;
}

.status-indicator.status-active {
    background-color: var(--success-color);
}

.status-indicator.status-inactive {
    background-color: var(--danger-color);
}

/* Takeoff status indicators */
.status-indicator.status-draft {
    background-color: var(--danger-color); /* Red */
}

.status-indicator.status-quoted {
    background-color: #22c55e; /* Bright green - more contrast with blue */
}

.status-indicator.status-sent {
    background-color: #22c55e; /* Bright green - matches quoted */
}

.status-indicator.status-archived {
    background-color: #3b82f6; /* Bright blue - more contrast with green */
}

/* Follow-up flag in quotes table */
.follow-up-flag {
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
    transition: filter 0.2s, opacity 0.2s;
    font-size: 0.85em;
    line-height: 1;
}

tr[data-follow-up="false"] .follow-up-flag {
    filter: grayscale(1);
    opacity: 0.3;
}

tr[data-follow-up="false"] .follow-up-flag:hover {
    filter: none;
    opacity: 0.7;
}

tr[data-follow-up="true"] .follow-up-flag:hover {
    opacity: 0.7;
}

/* Follow-up filter button */
.follow-up-filter-section {
    display: flex;
    align-items: center;
}

.follow-up-filter-btn,
.deep-search-btn {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--secondary-color);
    border-radius: 20px;
    background: transparent;
    color: var(--text-color);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
}

.follow-up-filter-btn:hover,
.deep-search-btn:hover {
    background: var(--secondary-color);
    color: white;
}

.follow-up-filter-btn.active,
.deep-search-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Stale product name — red text on description when pricing data is stale */
.stale-product-name,
input.stale-product-name {
    color: #dc3545 !important;
}
.stale-product-name:not(a) {
    cursor: help;
}

/* Table utility classes */
.text-center { text-align: center; }
.text-muted { color: #6c757d; }
.text-nowrap { white-space: nowrap; }

.no-data {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    padding: 2rem;
}

.no-data a {
    color: var(--accent-color);
    text-decoration: none;
}

.no-data a:hover {
    text-decoration: underline;
    color: var(--primary-color);
}

/* ============================================================================
   MODALS - LARGE VIEW/EDIT SYSTEM
   ============================================================================ */

/* Modal overlay */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
}

/* Modal content - dynamic height based on content */
.modal-content {
    background-color: white;
    position: fixed;
    top: 80px; /* Start underneath nav header - fixed */

    /* Dynamic height - fit content but don't exceed bottom constraint */
    max-height: calc(100vh - 130px); /* Maximum: 50px from bottom */
    min-height: 200px; /* Minimum height for usability */
    height: auto; /* Let content determine height */

    /* Horizontal positioning: 25px margins on each side of 1200px main table */
    left: 50%;
    transform: translateX(-50%);
    width: 1150px; /* 1200px table - 50px total margins */
    max-width: calc(100vw - 50px); /* Never exceed viewport with margins */
    min-width: 600px; /* Increased minimum to prevent header text collision */

    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--box-shadow-lg);
    display: flex;
    flex-direction: column;
}

/* Modal header - three-column layout for centered print button */
.modal-header {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Title | Print Button | Close */
    align-items: center;
    padding: 0.75rem 1.5rem; /* Reduced height to match table headers */
    border-bottom: 1px solid var(--border-color);
    background: var(--primary-color);
    border-radius: 8px 8px 0 0;
}

/* Modal header titles with Mokoto font */
.modal-header h3 {
    font-family: 'Mokoto', sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    color: white;
}

/* Header actions container - right-aligned */
.modal-header .header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Print button in modal headers - centered */
.modal-header .btn-print {
    background: var(--accent-color);
    border: 1px solid white;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.2; /* Reduced line-height for better vertical centering */
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    grid-column: 2; /* Place in center column */
}

.modal-header .btn-print:hover {
    background: var(--secondary-color);
    color: white;
    border-color: white;
}

/* Close button - positioned in right column */
.modal-header .close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: white;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    grid-column: 3; /* Place in right column */
    justify-self: end; /* Align to right within the column */
}

.modal-header .close:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Modal body - flex layout for scrolling */
.modal-body,
.view-modal-body,
.edit-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* Modal actions */
.modal-actions,
.view-modal-actions {
    position: relative;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: #f8f9fa;
}

/* View modal styles */
.view-modal-body {
    padding: 1.5rem;
}

.view-field-group {
    margin-bottom: 1.5rem;
}

.view-field-row {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
}

.view-field {
    flex: 1;
}

.view-field-label {
    display: block;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.view-field-value {
    font-size: 1rem;
    color: var(--text-color);
    min-height: 1.5rem;
}

.view-field-value.email a,
.view-field-value.phone a {
    color: var(--primary-color);
    text-decoration: none;
}

.view-field-value.email a:hover,
.view-field-value.phone a:hover {
    text-decoration: underline;
}

/* Duplicate .view-modal-actions removed — see line 1337 */

.view-modal-meta {
    font-size: 0.875rem;
    color: var(--secondary-color);
}

.view-modal-buttons {
    display: flex;
    gap: 0.5rem;
}

/* Right-hand button group in a view modal footer. Lives here rather than in a
   page <style> block because both the quotes and orders quote-view modals use
   it — without the flex row a second button stacks instead of sitting inline. */
.view-modal-action-buttons {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

/* Dead CSS removed: .dashboard-cards, .card, .stats-grid, .stat-item, .stat-number, .stat-label
   Dashboard was refactored to use db-stats-grid and db-stat-item classes in dashboard.css */


/* ============================================================================
   LOGIN PAGE
   ============================================================================ */

.login-page {
    background-color: var(--primary-color);
    min-height: 100vh;
    padding-top: 0;
}

.login-page .header {
    position: relative;
    z-index: 1000;
    box-shadow: none;
}

.login-page .nav-container {
    justify-content: space-between;
}

.login-page .logo {
    position: static;
}

.login-page .header-title {
    position: static;
}

.login-container {
    width: 100%;
    max-width: 400px;
    margin: 4rem auto 2rem;
    padding: 0 var(--spacing-unit);
}

.login-form {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--box-shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.login-form h2 {
    text-align: center;
    color: var(--secondary-color);
    margin-bottom: 2rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.login-form .btn {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

.development-note {
    margin-top: 1.5rem;
    text-align: center;
}

.development-note p {
    color: var(--secondary-color);
    font-size: 0.875rem;
    margin: 0;
}

/* ============================================================================
   MESSAGES & ALERTS
   ============================================================================ */

.error {
    background-color: var(--danger-color);
    color: white;
    padding: 0.75rem;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    text-align: center;
}

.success {
    background-color: var(--success-color);
    color: white;
    padding: 0.75rem;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    text-align: center;
}

.warning {
    background-color: var(--warning-color);
    color: white;
    padding: 0.75rem;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    text-align: center;
}

.info {
    background-color: var(--info-color);
    color: white;
    padding: 0.75rem;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    text-align: center;
}

.field-error {
    color: var(--danger-color);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.similarity-warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: var(--border-radius);
    padding: 0.75rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
    font-size: 0.85rem;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.similarity-warning .warning-icon {
    display: inline-block;
    margin-right: 0.25rem;
}

.similarity-warning .similar-names {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
    list-style: disc;
}

.similarity-warning .similar-names li {
    margin: 0.25rem 0;
}

.similarity-warning .similarity-acknowledgment {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.similarity-warning .acknowledge-similarity-btn {
    flex-shrink: 0;
}

.similarity-warning .acknowledgment-text {
    font-size: 0.8rem;
    color: #666;
}

/* Ensure the input field maintains its width when warning appears */
.info-value input#name {
    width: 100%;
    box-sizing: border-box;
}

/* Wrapper for name field to handle similarity warning without breaking layout */
.info-value:has(#name) {
    display: block; /* Override flex for name field container only */
}

.info-value:has(#name) input {
    display: block;
    width: 100%;
}

/* Ensure form-group inputs also maintain width */
.form-group input#name,
.form-group input#name:focus {
    width: 100%;
    box-sizing: border-box;
}



/* ============================================================================
   STANDARDIZED DATA VIEW LAYOUT (All Modules - Internal Review Tool)

   This pattern provides a unified modal layout for all modules (quotes, products,
   customers, vendors). It supports two layout approaches:

   1. SECTION-BASED LAYOUT (New Pattern - Recommended):
      - Use .data-view class on modal body
      - Organize content in sections with .section-header
      - Use .info-grid and .info-row for data display
      - Best for comprehensive data review

   2. FIELD-BASED LAYOUT (Legacy Pattern - Still Supported):
      - Use .data-view class on modal body
      - Use .view-field-group, .view-field-row, .view-field pattern
      - Best for simple data display

   Both patterns work within .data-view and provide:
   - Consistent typography and spacing
   - Professional internal tool appearance
   - Proper scrolling for long content
   - Easy transition from view to edit modals
   ============================================================================ */

.data-view, .quote-data-view {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    background: white;
    padding: 20px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* Section Layout */
.data-view > div, .quote-data-view > div {
    margin-bottom: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    background: #fafafa;
}

/* Data-view / quote-data-view section header (all view modals) */
.data-view .section-header,
.quote-data-view .section-header,
.customer-data-view .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
}

.data-view .section-header h3,
.quote-data-view .section-header h3,
.customer-data-view .section-header h3 {
    margin: 0;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 16px;
}

.item-count {
    background: var(--accent-color);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

/* Info Grid Layout */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 30px;
    align-items: start;
}

.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 300px;
    margin-left: auto;
}

.info-row, .pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e8e8e8;
}

.info-row:last-child, .pricing-row:last-child {
    border-bottom: none;
}

.info-row > label, .pricing-row > label {
    font-weight: 600;
    color: #555;
    min-width: 120px;
    text-align: left;
}

.info-row span, .pricing-row span {
    color: #333;
    text-align: right;
    word-break: break-word;
}

/* Special Styling */
.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.status-clickable {
    cursor: pointer;
    user-select: none;
    transition: opacity 0.15s;
}

.status-badge.status-clickable:hover {
    opacity: 0.75;
}

.status-badge.status-draft {
    background: #fff3cd;
    color: #856404;
}

.status-badge.status-sent {
    background: #d1ecf1;
    color: #0c5460;
}

.status-badge.status-approved {
    background: #d4edda;
    color: #155724;
}

.status-badge.status-active {
    background: #d4edda;
    color: #155724;
}

.status-badge.status-inactive {
    background: #f8d7da;
    color: #721c24;
}

.status-badge.status-warning {
    background: #fff3cd;
    color: #856404;
}

/* ============================================================
   REVISION SYSTEM STYLES
   ============================================================ */

/* Revision badge (inline in table rows) */
.revision-badge-inline {
    display: inline-block;
    background: var(--secondary-color);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.5px;
}

/* Revision badge (in view modal header and edit modal header) */
.revision-badge {
    display: inline-block;
    background: var(--secondary-color);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    letter-spacing: 0.5px;
}


/* Revision History Section */
.revision-history-section {
    margin-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
    padding-top: 1rem;
}

.revision-history-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.revision-count {
    font-size: 0.85rem;
    color: #666;
    font-weight: normal;
}

.revision-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0.75rem;
    max-height: 300px;
    overflow-y: auto;
}

.revision-entry {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.revision-entry-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.revision-entry-left .btn {
    font-size: 0.75rem;
    padding: 2px 10px;
    flex-shrink: 0;
}

.revision-entry-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.revision-number {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--primary-color);
    flex-shrink: 0;
}

.revision-date {
    font-size: 0.8rem;
    color: #666;
    white-space: nowrap;
}

.revision-total {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
}

.revision-reason-text {
    font-size: 0.8rem;
    color: #555;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    /* Italics lean past the glyph's advance width, and overflow:hidden clips
       at the padding edge — without this the last character loses its tail. */
    padding-right: 4px;
}

/* Accepted revision styles */
.revision-badge-accepted {
    background: #2e7d32;
}

.revision-badge-inline.revision-badge-accepted {
    background: #2e7d32;
}

/* Inactive revision (viewing a snapshot from history) */
.revision-badge-inactive {
    background: #9e9e9e;
    color: white;
}

.revision-badge-inline.revision-badge-pending {
    background: #e65100;
    margin-left: 2px;
}

.accepted-revision-indicator {
    display: inline-block;
    background: #e65100;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
    letter-spacing: 0.5px;
}

.revision-entry-active {
    background: #e8f5e9;
    border-color: #2e7d32;
}

.revision-active-badge {
    display: inline-block;
    background: #2e7d32;
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

.revision-entry-right .revision-label {
    font-size: 0.8rem;
    color: #666;
    font-style: italic;
}

/* Revision Detail View */
/* .view-modal-center-buttons removed — the orders quote-view modal was its only
   consumer, and its "Back to Current" now sits in the left button group beside
   Edit, matching the quotes module. */

.revision-notes-section {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px 14px;
    margin-top: 1rem;
    font-size: 0.9rem;
}


.amount-highlight {
    font-weight: normal;
    color: var(--primary-color);
    font-size: inherit;
}

.total-amount {
    font-weight: normal;
    color: var(--primary-color);
    font-size: inherit;
}

.total-row {
    border-top: 2px solid var(--primary-color);
    padding-top: 15px;
    margin-top: 10px;
}

.uuid-text {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #666;
}

/* Items Table */
.items-table-container {
    overflow-x: auto;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.items-data-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background: white;
}

.items-data-table thead th {
    background: var(--primary-color);
    color: white;
    padding: 12px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.items-data-table tbody td {
    padding: 10px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
    font-size: 13px;
}

.items-data-table tbody td.item-drag-handle {
    padding: 0;
    vertical-align: middle;
}

.items-data-table tbody td.item-quantity {
    padding: 0;
}

.items-data-table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

.items-data-table tbody tr:hover {
    background: #e3f2fd;
}

/* Quote Items Table Column Widths */
.items-data-table .drag-handle-column {
    width: 18px;
    text-align: center;
    min-width: 18px;
}

.items-data-table .qty-column {
    width: 40px;
    text-align: center;
    min-width: 40px;
}

.items-data-table .description-column {
    width: auto; /* Takes remaining space */
    min-width: 200px;
}

.items-data-table .cost-column {
    width: 90px;
    text-align: right;
    min-width: 90px;
}

.items-data-table .unit-price-column {
    width: 90px;
    text-align: right;
    min-width: 90px;
}

/* Custom-price badge — shown next to a quote-item's unit-price input when
   the price was set by the user (custom items, manual overrides). The flag
   tells hardware-group propagation to leave this item's price alone. */
.unit-price-override-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 6px;
    background: #eef3f7;
    border: 1px solid #c5d4e0;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--primary-color);
    cursor: help;
    text-transform: uppercase;
}

.items-data-table .amount-column {
    width: 100px;
    text-align: right;
    min-width: 100px;
}

.items-data-table .actions-column {
    width: 30px;
    text-align: center;
    min-width: 30px;
}

.items-data-table tbody td.actions-column {
    padding: 0;
    padding-right: 8px;
}

.items-data-table tbody td.item-actions {
    padding: 10px 10px 10px 0;
    text-align: center;
}

/* Column content alignment */
.items-data-table tbody td:nth-child(1) { /* Qty */
    text-align: center;
}

.items-data-table tbody td:nth-child(2) { /* Description */
    text-align: left;
}

.items-data-table tbody td:nth-child(3) { /* Unit Price */
    text-align: right;
}

.items-data-table tbody td:nth-child(4) { /* Amount */
    text-align: right;
}

.items-data-table tbody td:nth-child(5) { /* Actions */
    text-align: center;
}

/* Item Status Indicators */
.item-status {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.item-status.current {
    background: #d4edda;
    color: #155724;
}

.item-status.changed {
    background: #fff3cd;
    color: #856404;
}

.item-status.deleted {
    background: #f8d7da;
    color: #721c24;
}

/* Item Details */
.item-description-full {
    font-weight: 500;
    margin-bottom: 4px;
}

.item-snapshot-info {
    font-size: 11px;
    color: #666;
    font-style: italic;
}

/* Modal Integration - Preserve existing modal structure */
#quote-view-modal .modal-header,
#order-quote-view-modal .modal-header {
    background: var(--primary-color);
    color: white;
    font-family: 'Mokoto', sans-serif;
}

#quote-view-modal .view-modal-actions,
#order-quote-view-modal .view-modal-actions {
    background: white;
    border-top: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
}

/* Scrolling for long content */
.data-view, .quote-data-view {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ccc #f1f1f1;
}

.data-view::-webkit-scrollbar, .quote-data-view::-webkit-scrollbar {
    width: 8px;
}

.data-view::-webkit-scrollbar-track, .quote-data-view::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.data-view::-webkit-scrollbar-thumb, .quote-data-view::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.data-view::-webkit-scrollbar-thumb:hover, .quote-data-view::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Bridge CSS: Allow existing view-field system to work with new data-view */
.data-view .view-field-group, .data-view .view-field-row, .data-view .view-field {
    margin-bottom: 1.5rem;
}

.data-view .view-field-row {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
}

.data-view .view-field {
    flex: 1;
}

.data-view .view-field-label {
    display: block;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.data-view .view-field-value {
    font-size: 1rem;
    color: var(--text-color);
    min-height: 1.5rem;
}

/* Preserve modal button styling */
#quote-view-modal .modal-header h3,
#quote-view-modal .modal-header .btn-print,
#quote-view-modal .modal-header .close,
#order-quote-view-modal .modal-header h3,
#order-quote-view-modal .modal-header .btn-print,
#order-quote-view-modal .modal-header .close {
    font-family: 'Mokoto', sans-serif;
}

/* Print styles */
@media print {
    .header,
    .filters-row,
    .actions,
    .btn {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    .container {
        max-width: none;
        padding: 0;
    }
}

/* ============================================================================
   PLACEHOLDER SECTIONS
   ============================================================================ */

.placeholder-section {
    padding: 2rem;
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    text-align: center;
    margin: 1rem 0;
}

.placeholder-content {
    max-width: 400px;
    margin: 0 auto;
}

.placeholder-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.7;
}

.placeholder-content h5 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.placeholder-content p {
    font-size: 0.95rem;
    color: #6c757d;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.placeholder-note {
    font-style: italic;
    font-size: 0.875rem;
    color: #495057;
}

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

/* Display utilities */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }

/* Flex utilities */
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }

/* Spacing utilities */
.m-0 { margin: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.p-0 { padding: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 1rem; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 1rem; }

/* ============================================================================
   SETTINGS PAGE STYLES
   ============================================================================ */

/* Settings Page Enhancements */
html {
    scroll-behavior: smooth;
}

/* ============================================================================
   SETTINGS MODULE
   ============================================================================ */

/* Quick Navigation */
.settings-nav {
    background: white;
    border-radius: var(--border-radius);
    padding: 0.75rem 1.5rem;
    margin: 1rem 0;
    box-shadow: var(--box-shadow);
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.settings-nav .nav-header h3 {
    margin: 0;
    font-family: 'Mokoto', sans-serif;
    font-weight: 500;
    color: var(--primary-color);
    font-size: 1rem;
    white-space: nowrap;
}

.settings-nav .quick-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1;
}

.settings-nav .quick-nav-link {
    padding: 0.3rem 0.6rem;
    background: var(--light-color);
    color: var(--secondary-color);
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.settings-nav .quick-nav-link:hover {
    background: var(--primary-color);
    color: white;
}

/* Section Cards */
.settings-section {
    background: white;
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--box-shadow);
    margin-bottom: 1.5rem;
}

.settings-section:last-of-type {
    margin-bottom: 5rem;
}

.settings-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.settings-section .section-header h3 {
    margin: 0;
    color: var(--primary-color);
    font-family: 'Mokoto', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Unified Row Layout — used by all settings sections */
.settings-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.settings-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.settings-label {
    flex: 0 0 180px;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-color);
    padding-top: 0.45rem;
    cursor: default;
}

.settings-label[title] {
    cursor: help;
}

.settings-label[title]:hover {
    color: var(--primary-color);
}

.settings-field {
    flex: 1;
    min-width: 0;
}

.settings-field-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Hint text — consistent helper text across all sections */
.settings-hint {
    margin: 0.4rem 0 0.75rem 0;
    font-size: 0.75rem;
    color: #888;
    line-height: 1.4;
}

.settings-hint-warning {
    color: #856404;
}

/* Inputs */
.setting-input {
    width: 100%;
    max-width: 400px;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.2s ease;
    background: white;
}

.setting-input-wide {
    max-width: 550px;
}

.setting-input[type="checkbox"] {
    width: auto;
    max-width: none;
    padding: 0;
    border: none;
    border-radius: 0;
}

textarea.setting-input {
    max-width: 500px;
    resize: vertical;
}

.setting-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 32, 75, 0.1);
}

.setting-input.changed {
    border-color: var(--accent-color);
    background-color: #fff9e6;
}

.setting-input.invalid {
    border-color: var(--danger-color);
    background-color: #ffe6e6;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.1);
}

/* Input with suffix (tax rate %) */
.input-with-suffix {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-suffix input {
    padding-right: 3rem;
}

.input-suffix {
    position: absolute;
    right: 12px;
    color: var(--secondary-color);
    font-weight: 500;
    pointer-events: none;
}

.margin-input {
    max-width: 70px !important;
    text-align: right;
    padding-right: 0.5rem !important;
}

.input-with-suffix .margin-input + .input-suffix {
    position: static;
    margin-left: 2px;
    padding-left: 2px;
}

/* Floating Save Bar */
.settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-lg);
    border: 1px solid var(--border-color);
    position: fixed;
    bottom: calc(2rem + 25px);
    right: calc(50vw - 600px + var(--spacing-unit));
    width: auto;
    z-index: 1000;
}

.settings-actions .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Backup Info Grid */
.settings-info-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0.4rem 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--light-color);
    border-radius: 4px;
}

.settings-info-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--secondary-color);
}

.settings-info-value {
    font-size: 0.8rem;
    color: var(--text-color);
}

/* Tax Rates */
.tax-rates-container {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.tax-rates-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tax-rate-item {
    display: grid;
    grid-template-columns: 1fr auto 160px;
    align-items: center;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.15s ease;
    gap: 0.75rem;
    font-size: 0.85rem;
}

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

.tax-rate-item:hover {
    background-color: var(--light-color);
}

.tax-rate-item.inactive {
    opacity: 0.6;
}

.tax-rate-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tax-rate-name {
    color: var(--text-color);
    font-weight: 500;
}

.tax-rate-value {
    color: var(--primary-color);
    font-weight: 600;
}

.inactive-label {
    background: var(--secondary-color);
    color: white;
    padding: 1px 5px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.tax-rate-middle {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tax-rate-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    min-height: 28px;
}

.button-spacer {
    width: 55px;
    height: 28px;
}

/* Hardware Categories */
.hw-categories-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hw-category-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.75rem;
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.hw-category-item:hover {
    background: #e8edf2;
}

.hw-cat-drag-handle {
    cursor: grab;
    color: var(--secondary-color);
    font-size: 0.9rem;
    user-select: none;
}

.hw-cat-drag-handle:active {
    cursor: grabbing;
}

.hw-cat-label {
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: capitalize;
    color: var(--text-color);
    min-width: 100px;
}

.hw-cat-value {
    color: var(--secondary-color);
    font-size: 0.7rem;
    font-family: monospace;
}

.hw-cat-remove {
    margin-left: auto;
    background: none;
    border: 1px solid transparent;
    color: var(--secondary-color);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 0.35rem;
    border-radius: 3px;
    line-height: 1;
}

.hw-cat-remove:hover {
    color: var(--danger-color);
    border-color: var(--danger-color);
    background: rgba(220, 53, 69, 0.05);
}

.hw-categories-add {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.75rem;
}

.hw-categories-add input[type="text"] {
    max-width: 200px;
    margin: 0;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
}

.sortable-ghost .hw-category-item,
.hw-category-item.sortable-ghost {
    opacity: 0.4;
}

.badge {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-primary {
    background: var(--primary-color);
    color: white;
}

.badge-secondary {
    background: var(--secondary-color);
    color: white;
}

.badge-edit {
    background: var(--secondary-color);
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.badge-edit:hover {
    background: #4a5568;
}

.badge-danger {
    background: var(--danger-color);
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.badge-danger:hover {
    background: #c82333;
}

.badge-success {
    background: #28a745;
    color: white;
}


.tax-rate-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.tax-rate-meta small {
    color: var(--secondary-color);
    font-size: 0.8rem;
}

/* Tax Rate Form */
.tax-rate-form .form-group {
    margin-bottom: 1.5rem;
}

.tax-rate-form .settings-row {
    margin-bottom: 1rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: normal;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    margin: 0;
}

/* Empty State (unified — was duplicated at two locations) */
.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--secondary-color);
}

.empty-state p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

/* Text utilities */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }
.font-weight-normal { font-weight: normal; }
.font-weight-bold { font-weight: bold; }

/* Color utilities */
.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-success { color: var(--success-color); }
.text-danger { color: var(--danger-color); }
.text-warning { color: var(--warning-color); }
.text-info { color: var(--info-color); }
.text-light { color: var(--light-color); }
.text-dark { color: var(--dark-color); }
.text-muted { color: #6c757d; }

/* Background utilities */
.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-success { background-color: var(--success-color); }
.bg-danger { background-color: var(--danger-color); }
.bg-warning { background-color: var(--warning-color); }
.bg-info { background-color: var(--info-color); }
.bg-light { background-color: var(--light-color); }
.bg-dark { background-color: var(--dark-color); }

/* Border utilities */
.border { border: 1px solid var(--border-color); }
.border-0 { border: 0; }
.rounded { border-radius: var(--border-radius); }
.rounded-0 { border-radius: 0; }

/* Shadow utilities */
.shadow { box-shadow: var(--box-shadow); }
.shadow-lg { box-shadow: var(--box-shadow-lg); }
.shadow-none { box-shadow: none; }

/* ============================================================================
   TABLE SORTING STYLES
   ============================================================================ */

/* Sortable column headers */
.table th.sortable,
.vendors-table th.sortable,
.customers-table th.sortable,
.products-table th.sortable,
.quotes-table th.sortable,
.archived-orders-table th.sortable {
    position: relative;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.table th.sortable:hover,
.vendors-table th.sortable:hover,
.customers-table th.sortable:hover,
.products-table th.sortable:hover,
.quotes-table th.sortable:hover,
.archived-orders-table th.sortable:hover {
    background-color: var(--accent-color);
}

/* Inset line sort indicators */
.table th.sortable.sort-asc,
.vendors-table th.sortable.sort-asc,
.customers-table th.sortable.sort-asc,
.products-table th.sortable.sort-asc,
.quotes-table th.sortable.sort-asc,
.archived-orders-table th.sortable.sort-asc {
    background-color: var(--accent-color);
    position: relative;
}

.table th.sortable.sort-asc::before,
.vendors-table th.sortable.sort-asc::before,
.customers-table th.sortable.sort-asc::before,
.products-table th.sortable.sort-asc::before,
.quotes-table th.sortable.sort-asc::before,
.archived-orders-table th.sortable.sort-asc::before {
    content: '';
    position: absolute;
    top: 6px; /* Inset from top edge */
    left: 8px; /* Inset from left edge */
    right: 8px; /* Inset from right edge */
    height: 3px;
    background-color: white;
    border-radius: 1px;
}

.table th.sortable.sort-desc,
.vendors-table th.sortable.sort-desc,
.customers-table th.sortable.sort-desc,
.products-table th.sortable.sort-desc,
.quotes-table th.sortable.sort-desc,
.archived-orders-table th.sortable.sort-desc {
    background-color: var(--accent-color);
    position: relative;
}

.table th.sortable.sort-desc::before,
.vendors-table th.sortable.sort-desc::before,
.customers-table th.sortable.sort-desc::before,
.products-table th.sortable.sort-desc::before,
.quotes-table th.sortable.sort-desc::before,
.archived-orders-table th.sortable.sort-desc::before {
    content: '';
    position: absolute;
    bottom: 6px; /* Inset from bottom edge */
    left: 8px; /* Inset from left edge */
    right: 8px; /* Inset from right edge */
    height: 3px;
    background-color: white;
    border-radius: 1px;
}

/* Ensure sort indicator doesn't break layout */
.table th.sortable,
.vendors-table th.sortable,
.customers-table th.sortable,
.products-table th.sortable,
.quotes-table th.sortable,
.archived-orders-table th.sortable {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Special handling for actions column with menu - no sorting */
.table th.actions,
.vendors-table th.actions,
.customers-table th.actions,
.products-table th.actions,
.quotes-table th.actions,
.archived-orders-table th.actions {
    cursor: default;
}


/* ============================================================================
   PAGINATION STYLES
   ============================================================================ */

.pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-top: 1px solid var(--border-color);
    margin-top: 0.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.pagination-info {
    color: var(--secondary-color);
    font-size: 0.85rem;
}

.pagination-info strong {
    color: var(--text-color);
    font-weight: 600;
}

.pagination-controls {
    display: flex;
    align-items: center;
}

.pagination-buttons {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pagination-btn {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    background: white;
    color: var(--text-color);
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 2.5rem;
    text-align: center;
    white-space: nowrap;
}

.pagination-btn:hover:not([disabled]) {
    background: var(--background-color);
    border-color: var(--accent-color);
}

.pagination-btn:active:not([disabled]) {
    transform: translateY(1px);
}

.pagination-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.pagination-btn[disabled] {
    background: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

.pagination-prev,
.pagination-next {
    padding: 0.5rem 1rem;
    font-weight: 600;
}

.pagination-ellipsis {
    padding: 0.5rem 0.25rem;
    color: var(--secondary-color);
    font-weight: 500;
}


/* ============================================================================
   GLOBAL NUMBER INPUT SPINNER REMOVAL
   ============================================================================ */

/* Remove spinner arrows from all number input fields across all modules */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox support for removing number input spinners */
input[type="number"] {
    -moz-appearance: textfield;
}

/* ============================================================================
   BACKUP REMINDER NOTIFICATION
   ============================================================================ */

#backup-reminder {
    position: relative;
    background: linear-gradient(135deg, #fff3cd 0%, #ffe8a1 100%);
    border-bottom: 2px solid #ffc107;
    padding: 0.75rem 1.5rem;
    display: none;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

#backup-reminder.show {
    display: flex;
}

.backup-reminder-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.backup-reminder-icon {
    font-size: 24px;
    line-height: 1;
}

.backup-reminder-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.backup-reminder-title {
    font-weight: 600;
    color: #856404;
    font-size: 14px;
}

.backup-reminder-message {
    font-size: 13px;
    color: #856404;
}

.backup-reminder-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.backup-reminder-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.backup-reminder-btn-primary {
    background: #ffc107;
    color: #000;
}

.backup-reminder-btn-primary:hover {
    background: #e0a800;
}

.backup-reminder-btn-dismiss {
    background: transparent;
    color: #856404;
    text-decoration: underline;
}

.backup-reminder-btn-dismiss:hover {
    color: #533f03;
}

/* Adjust main content to account for notification */
#spa-main-content {
    padding-top: 32px;
    min-height: calc(100vh - 32px - 60px); /* 32px for notification space, 60px for header */
    transition: padding-top 0.2s ease;
}
/* ============================================================================
   TAKEOFFS TABLE - Apply all standard table styles
   ============================================================================ */

/* Apply all quotes-table styles to takeoffs-table */
.takeoffs-table tbody tr {
    cursor: default;
}

.takeoffs-table .actions {
    width: 125px;
    min-width: 125px;
    max-width: 125px;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    padding: 0.75rem 0.25rem;
}

.takeoffs-table th.actions {
    cursor: default;
}

/* Sorting styles for takeoffs table */
.takeoffs-table th.sortable {
    position: relative;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.takeoffs-table th.sortable:hover {
    background-color: var(--accent-color);
}

.takeoffs-table th.sortable.sort-asc {
    background-color: var(--accent-color);
    position: relative;
}

.takeoffs-table th.sortable.sort-asc::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 8px;
    right: 8px;
    height: 3px;
    background-color: white;
    border-radius: 1px;
}

.takeoffs-table th.sortable.sort-desc {
    background-color: var(--accent-color);
    position: relative;
}

.takeoffs-table th.sortable.sort-desc::before {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 8px;
    right: 8px;
    height: 3px;
    background-color: white;
    border-radius: 1px;
}

/* Takeoff name link styling */
.takeoff-name-link {
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
}

.takeoff-name-link:hover {
    text-decoration: underline;
    color: var(--primary-dark);
}

/* ==========================================================================
   Orders Module - Kanban Board Styles
   ========================================================================== */

/* Orders module uses standard .container class for 1200px constraint */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--accent-color);
}

.page-header h1 {
    margin: 0;
    color: var(--primary-color);
}

.header-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

.archived-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.archived-toggle input[type="checkbox"] {
    cursor: pointer;
}

/* Orders View Toggle */
.orders-view-toggle {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.orders-total-display {
    position: absolute;
    right: 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
}

/* Kanban Board Layout */

/* The orders page is the one screen that needs more than the app-wide 1200px
   .container cap: five kanban columns will not fit inside it at the width the
   cards were designed for. 292px is exactly what a column measured back when
   four of them shared 1200px, so this cap is that same column width times five
   plus the container's own 1rem of side padding — the container grew by one
   column, the cards did not change at all. */
.orders-container {
    max-width: 1492px;
}

.kanban-board {
    display: grid;
    /* Fixed tracks rather than 1fr: the cards should neither stretch on a wide
       monitor nor squeeze on a laptop. Above 1492px of viewport all five fit
       and the board sits centered; below it the board scrolls sideways instead
       of narrowing the columns. Any breakpoint that re-specifies this property
       defeats that — see the 768px rule near the end of this file, which is
       deliberate, and note there is no longer a 1400px rule. */
    grid-template-columns: repeat(5, 292px);
    gap: 0;
    margin-bottom: 40px;
    overflow-x: auto;
    /* Without this a trackpad swipe past the left edge triggers browser
       back-navigation on Chrome and Safari. */
    overscroll-behavior-x: contain;
}

.kanban-column {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 8px;
    min-height: 500px;
    min-width: 0;
    overflow: hidden;
}

.column-header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 15px;
    padding: 8px 12px;
    background: var(--primary-color);
    border-radius: 4px;
}

.column-header h3 {
    margin: 0;
    line-height: 1;
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.count-badge {
    background: var(--accent-color);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
}

.column-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Order Card Styles */
.order-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: stretch;
}

.order-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: translateY(-2px);
    border-color: var(--accent-color);
}

.order-card.archived {
    opacity: 0.8;
}

/* When invoiced, the green outline moves from the whole card to the
   progress indicator badge on the card face (see .progress-indicator). */

/* Drag handle */
.card-drag-handle {
    display: flex;
    align-items: center;
    padding: 0 8px 0 0;
    color: #ccc;
    cursor: grab;
    font-size: 16px;
    letter-spacing: -3px;
    user-select: none;
}

.card-drag-handle:hover {
    color: var(--accent-color);
}

.card-drag-handle:active {
    cursor: grabbing;
}

.card-content {
    flex: 1;
    min-width: 0;
}

/* Sortable drag states */
.order-card.sortable-ghost {
    opacity: 0.4;
    background: #f0f0f0;
}

.order-card.sortable-drag {
    opacity: 0.9;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.order-card.sortable-chosen {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Hardware Group Item Drag Handle */
.hw-drag-handle {
    cursor: grab;
    color: #ccc;
    font-size: 12px;
    letter-spacing: -2px;
    user-select: none;
    padding: 0 4px;
}

.hw-drag-handle:hover {
    color: var(--accent-color);
}

.hw-drag-handle:active {
    cursor: grabbing;
}

/* Hardware Group Sortable States */
.compact-product-row.hw-sortable-ghost {
    opacity: 0.4;
    background: #f0f0f0;
}

/* Cost/price warning icons on hardware group items. Lives here rather than in a
   page <style> block because the quotes and orders quote-view modals both render
   them. The takeoff editor keeps its own copy scoped to .takeoff-hw-group-card,
   which is more specific and still wins where it applies. */
.hw-warnings {
    display: inline;
}

.hw-warning-icon {
    font-size: 1rem;
    font-weight: bold;
    cursor: help;
    display: inline-block;
    margin-right: 2px;
}

.hw-warning-icon.below-cost {
    color: #dc3545; /* Red */
}

.hw-warning-icon.cost-increased {
    color: #dc3545; /* Red - cost went up, margin shrunk */
    font-size: 0.75rem;
}

.hw-warning-icon.cost-decreased {
    color: #28a745; /* Green - cost went down, margin grew */
    font-size: 0.75rem;
}

/* Drag handle on the hardware-group card header (reorders whole groups,
   not the products inside them). Padding on both sides + a wider min-width
   gives the cursor a meaningful hit-target — without it the user has to
   hover precisely on the two-char glyph for grab/grabbing to register. */
.hw-group-drag-handle {
    cursor: grab;
    flex: 0 0 auto;
    color: #bbb;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -1px;
    user-select: none;
    padding: 4px 8px;
    margin-right: 2px;
    display: inline-block;
    vertical-align: middle;
    min-width: 18px;
    text-align: center;
    border-radius: 3px;
}
.hw-group-drag-handle:hover { background: #f5f5f5; color: #444; }
.hardware-group-card:hover .hw-group-drag-handle { color: #777; }
.hw-group-drag-handle:active { cursor: grabbing; background: #ececec; }

.compact-product-row.hw-sortable-drag {
    opacity: 0.9;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Full-text description popup for truncated .product-desc in hardware group builders */
.description-tooltip {
    background: white;
    border: 2px solid var(--primary-color);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    padding: 0.125rem 0.25rem;
    font-size: 12px;
    color: #333;
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.4;
    pointer-events: none;
    cursor: default;
}

/* Qty warning — shown when a product type typically needs qty > 1 */
/* !important needed to override higher-specificity .qty-input-wrapper input rules */
.qty-mini.qty-warn {
    border: 2px solid #dc3545 !important;
    background-color: #fff5f5 !important;
}
.qty-mini.qty-warn:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.2) !important;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #eee;
    min-width: 0;
}

.card-header h4 {
    margin: 0;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.progress-indicator {
    background: #e9ecef;
    color: var(--primary-color);
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    /* Transparent by default so the invoiced green border adds no layout shift. */
    border: 2px solid transparent;
}

/* Invoiced orders: bold green outline around the progress badge. */
.order-card.invoiced .progress-indicator {
    border-color: #28a745;
    color: #1e7e34;
}

.card-body {
    margin-bottom: 0;
}

.card-field {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 14px;
}

.card-field label {
    color: #666;
    font-weight: 500;
    /* The browser's own form stylesheet sets cursor: default on <label>, and a
       UA rule matching the element directly beats the pointer inherited from
       .order-card — so without this the Job Number / Value / Delivery rows are
       the only dead-looking patches on a card that is clickable end to end.
       The sibling <span> has no UA cursor rule, which is why it looks right.
       inherit rather than a literal pointer so these keep following the card if
       its own cursor ever changes. Same fix as .order-checklist-item label. */
    cursor: inherit;
}

.card-field span {
    color: var(--primary-color);
    font-weight: 600;
}

.card-field span.missing-value {
    color: #999;
    font-style: italic;
    font-weight: 400;
}

.card-field-row {
    align-items: center;
}

.card-field-row span:first-child {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin-right: 8px;
}

.card-footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 4px;
    border-top: 1px solid #eee;
    gap: 12px;
}

.view-quote-link,
.buyout-list-link {
    color: var(--accent-color);
    text-decoration: none;
    font-size: 13px;
}

.view-quote-link:hover,
.buyout-list-link:hover {
    text-decoration: underline;
}

/* Delete button on order card */
.btn-delete-card {
    background: var(--danger-color);
    color: white;
    border: none;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    border-radius: var(--border-radius);
    line-height: 1;
    transition: background 0.2s ease;
}

.btn-delete-card:hover {
    background: #c82333;
}

.view-details-btn {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.view-details-btn:hover {
    background: #e55a00;
}

/* Order Detail Modal - centered, draggable */
.order-detail-modal.modal[style*="display: block"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.order-detail-modal-content {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 900px;
    max-width: calc(100vw - 40px);
    min-width: 0;
    max-height: 85vh;
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header inherits global .modal-header grid layout and h3 typography. */
.order-detail-modal-header {
    cursor: grab;
}

.order-detail-modal-header:active {
    cursor: grabbing;
}

.order-detail-modal-body {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
}

.order-detail-modal-footer {
    justify-content: flex-end;
}

/* Job number "missing" highlight — shaken when user tries to open the door
   schedule before entering a job number on the order detail modal. */
@keyframes order-job-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.order-detail-info #job-number-input.job-number-missing {
    border: 1px solid #dc3545;
    background: #fff5f5;
    animation: order-job-shake 0.45s ease-in-out;
}

/* Order Door Schedule Modal — wide, holds the door schedule editor.
   Opens beneath the nav with an 80px gap (matches the quotes view modal). */
.order-door-schedule-modal.modal[style*="display: block"] {
    display: flex !important;
    align-items: flex-start;
    justify-content: center;
    padding-top: 80px;
}

.order-door-schedule-modal-content {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    /* Fluid up to a ceiling. A plain `width: 1280px` never grew past 1280 no
       matter the display, since max-width can only shrink. min() lets wide
       monitors buy real column width for Door/Frame/Notes, which split every
       pixel left over after the eight fixed-width columns (see
       door-schedule.css). Capped at 1800px — past that the header row spans
       so far that scanning a row gets harder, not easier. */
    width: min(1800px, 95vw);
    min-width: 1000px;
    max-height: calc(100vh - 130px);
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.order-door-schedule-modal-body {
    padding: 16px 20px;
    flex: 1;
    overflow-y: auto;
}

.order-door-schedule-modal-footer {
    justify-content: flex-end;
}

/* 2-column layout: checklist | (info / tools) */
.order-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.order-detail-left {
    min-width: 0;
}

.order-detail-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.order-detail-section {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px 14px;
}

.order-detail-section h5 {
    margin: 0 0 10px 0;
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.order-detail-tools-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-detail-tools-list a {
    display: block;
    padding: 8px 10px;
    background: #f5f7fa;
    border: 1px solid #d6dae0;
    border-radius: 4px;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
}

.order-detail-tools-list a:hover,
.order-detail-tools-list a.buyout-list-link:hover,
.order-detail-tools-list a.view-quote-link:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
    text-decoration: none;
}

/* Narrow the delivery date input so it sits inline with its label */
.order-detail-info #delivery-date-input {
    width: 150px;
    padding: 4px 6px;
    font-size: 13px;
}

/* Order detail body content */
.order-modal-body {
    padding: 12px;
    flex: 1;
    overflow-y: auto;
}

/* Modal body content - mimics card front */
.order-modal-info {
    margin-bottom: 12px;
}

.order-modal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
}

.order-modal-row:last-child {
    margin-bottom: 0;
}

.order-modal-row label {
    color: #666;
    font-weight: 500;
}

.order-modal-row span {
    color: var(--primary-color);
    font-weight: 600;
}

.order-modal-customer {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin-right: 8px;
}

/* Checklist in modal */
.order-modal-checklist {
    border-top: 1px solid #eee;
    padding-top: 12px;
}

.order-modal-checklist h5 {
    margin: 0 0 10px 0;
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    font-weight: 600;
}

.order-modal-checklist-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Each row holds one checkbox (single) or two side-by-side (ordered | received).
   The 50/50 split keeps the received column aligned across all paired rows. */
.order-checklist-row {
    display: flex;
    gap: 12px;
}

.order-checklist-row .order-checklist-item {
    flex: 1 1 0;
    min-width: 0;
}

.order-checklist-item {
    display: flex;
    align-items: center;
    font-size: 12px;
}

.order-checklist-item label {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 100%;
}

.order-checklist-item input[type="checkbox"] {
    margin-right: 8px;
    cursor: pointer;
}

.order-checklist-item span {
    color: var(--text-color);
}

/* A received box disabled until its ordered box is ticked reads as muted. */
.order-checklist-item input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

.order-checklist-item input[type="checkbox"]:disabled + span {
    color: #aaa;
}

.order-checklist-item input[type="checkbox"]:disabled ~ * {
    cursor: not-allowed;
}

/* Free-form notes — sits below the checklist on the modal's left column */
.order-modal-notes {
    margin-top: 12px;
}
.order-notes-textarea {
    width: 100%;
    min-height: 100px;
    padding: 8px 10px;
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-color);
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}
.order-notes-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}
.order-notes-textarea:disabled {
    background: #f5f5f5;
    color: #888;
    cursor: not-allowed;
}

/* Inline notes area at the bottom of the kanban card front. The top border is
   the horizontal rule that demarcates the notes from the card summary above.
   Notes render in full — the card flexes vertically to fit — with the source
   text's line breaks preserved via white-space:pre-wrap. */
.card-notes {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #eee;
}
.card-notes-text {
    font-size: 11px;
    line-height: 1.4;
    color: var(--primary-color);
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
}
.card-notes-empty {
    font-size: 11px;
    color: #aaa;
    font-style: italic;
}

.order-checklist-item input[type="checkbox"]:checked + span {
    color: #666;
    text-decoration: line-through;
}

.order-checklist-link {
    padding: 4px 0 4px 26px; /* align with checkbox labels */
}

.order-checklist-link a {
    font-size: 11px;
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s;
}

.order-checklist-link a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Delivery date in modal */
.order-modal-delivery {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.order-modal-delivery label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 6px;
    font-weight: 500;
}

.order-modal-delivery input[type="date"] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
}

/* Archived notice in modal */
.order-archived-notice {
    background: #fff3cd;
    border: 1px solid #ffc107;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 11px;
    color: #856404;
    margin-top: 12px;
    text-align: center;
}

/* View toggle styling */
/* Two-column grid centers the SPLIT between the toggle pairs on the page
   midpoint. Toggle 1 right-aligns in col 1, toggle 2 left-aligns in col 2;
   the column-gap is the visible separation. Total is positioned absolutely
   so it doesn't shift the toggles. */
.orders-view-toggle {
    margin-bottom: 20px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    align-items: center;
}

.orders-view-toggle .status-filter-buttons {
    justify-content: flex-start;
}

.orders-view-toggle > .status-filter-buttons:first-child {
    grid-column: 1;
    justify-self: end;
}

.orders-view-toggle > .orders-layout-toggle {
    grid-column: 2;
    justify-self: start;
}

.orders-view-toggle > .orders-total-display {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* ---- Orders Calendar Layout ---- */

.orders-calendar {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
}

.orders-calendar-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.orders-calendar-toolbar .btn {
    padding: 4px 12px;
    font-size: 14px;
}

/* Cumulative count of dated orders beyond the current month, rendered as a
   standalone pill on the interior (title-facing) side of each nav button.
   When hidden we use visibility:hidden instead of display:none so the badge's
   layout space is reserved — keeps the nav buttons' positions fixed whether
   or not a count is showing. */
.cal-nav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 11px;
    box-sizing: border-box;
}

.cal-nav-count[hidden] {
    display: inline-flex;
    visibility: hidden;
}

.orders-calendar-title {
    margin: 0 8px;
    flex: 1;
    text-align: center;
    color: var(--primary-color);
    font-size: 1.1rem;
    font-weight: 600;
}

.orders-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}

.orders-calendar-weekdays > div {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 0;
}

.orders-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(110px, 1fr);
    gap: 4px;
}

.cal-day {
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.cal-day.cal-day-other {
    background: #f3f4f6;
    opacity: 0.6;
}

.cal-day.cal-day-today {
    border-color: var(--primary-color);
    box-shadow: inset 0 0 0 1px var(--primary-color);
}

.cal-day-number {
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}

.cal-day-today .cal-day-number {
    color: var(--primary-color);
}

.cal-day-orders {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-height: 0;
}

.cal-pill {
    background: var(--primary-color);
    color: white;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: grab;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    user-select: none;
}

.cal-pill:hover {
    filter: brightness(1.1);
}

.cal-pill:active {
    cursor: grabbing;
}

/* Status-based pill colors — match kanban column semantics */
.cal-pill[data-status="admin"]      { background: #2563eb; }
.cal-pill[data-status="review"]     { background: #0891b2; }
.cal-pill[data-status="ordering"]   { background: #f59e0b; }
.cal-pill[data-status="processing"] { background: #8b5cf6; }
.cal-pill[data-status="delivering"] { background: #16a34a; }

.cal-more-btn {
    background: transparent;
    border: none;
    color: #4b5563;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 4px;
    text-align: left;
    cursor: pointer;
    border-radius: 3px;
}

.cal-more-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* Popover for "+N more" — escapes day cell overflow:hidden via position:fixed */
.cal-popover {
    position: fixed;
    z-index: 10000;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    padding: 6px;
    min-width: 160px;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cal-popover-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    padding: 2px 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Drag visual states */
.cal-day.cal-drag-over {
    background: #e0f2fe;
    border-color: var(--primary-color);
}

.cal-pill.sortable-ghost {
    opacity: 0.4;
}

.cal-pill.sortable-drag {
    cursor: grabbing;
}

/* Archived Section */
.archived-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #ddd;
}

.section-header h2 {
    color: var(--primary-color);
    margin-bottom: 20px;
}

.archived-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* .empty-state duplicate removed — see unified definition above */

/* Order Detail Modal */
.order-details {
    padding: 20px 0;
}

.order-info {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 25px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 8px 0;
}

.info-row:last-child {
    margin-bottom: 0;
}

.info-row > label {
    color: #666;
    font-weight: 500;
}

.info-row span {
    color: var(--primary-color);
    font-weight: 600;
}

/* Delivery Address styling - keep same horizontal layout as other fields */
.info-row-delivery-address span {
    white-space: pre-wrap;
    line-height: 1.5;
}

.quote-link {
    color: var(--accent-color);
    text-decoration: none;
}

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

.delivery-date-section {
    margin-bottom: 25px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
}

.delivery-date-section label {
    display: block;
    margin-bottom: 8px;
    color: #666;
    font-weight: 500;
}

#job-number-input {
    width: 80px;
    padding: 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    text-align: right;
}

#job-number-input:disabled {
    background: #e9ecef;
    cursor: not-allowed;
}

#delivery-date-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

#delivery-date-input:disabled {
    background: #e9ecef;
    cursor: not-allowed;
}

.checklist-section h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
    font-size: 18px;
}

.checklist-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checklist-item {
    padding: 10px 15px;
    background: #f8f9fa;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.checklist-item:hover {
    background: #e9ecef;
}

.checklist-item label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.checklist-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

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

.checklist-item span {
    color: var(--primary-color);
    font-weight: 500;
}

.archived-notice {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-left: 4px solid #ffc107;
    padding: 15px;
    margin-top: 20px;
    border-radius: 4px;
    color: #856404;
    font-weight: 500;
}

/* Responsive Design */

/* There used to be a 1400px rule here dropping .kanban-board to two fluid
   columns. It was removed when the board went to five fixed 292px tracks:
   1400px is precisely the range where the board is now meant to scroll
   sideways at full card width, and re-specifying grid-template-columns there
   would have squeezed the cards instead. */

@media (max-width: 768px) {
    /* Phones stack. A 292px board scrolling horizontally on a 390px screen
       would be worse than one column at full width, so this override of the
       fixed tracks is intentional. */
    .kanban-board {
        grid-template-columns: 1fr;
    }

    .archived-grid {
        grid-template-columns: 1fr;
    }
    
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

/* ============================================================================
   INTERNAL NOTES - SHARED STYLES
   ============================================================================ */

/* Info icon in ProductSelector dropdown (quotes module) */
.product-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    color: #3B82F6;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: default;
    line-height: 1;
    vertical-align: middle;
}

.product-info-icon:hover {
    background: #DBEAFE;
    border-color: #93C5FD;
}

/* Spacing when info icon is inside category badge */
.product-category-badge .product-info-icon {
    margin-left: 6px;
}

/* Internal Notes Tooltip (shared) */
.internal-notes-tooltip {
    position: fixed;
    z-index: 10000;
    background: white;
    border: 2px solid #3B82F6;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    padding: 6px 10px;
    font-size: 12px;
    color: #333;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.4;
    max-width: 320px;
    pointer-events: none;
}

/* Quote Edit Modal - Internal Notes Callout */
.quote-internal-notes-callout {
    background: #F0F4FF;
    border-left: 3px solid #3B82F6;
    padding: 4px 8px;
    margin: 4px 0;
    font-size: 0.8rem;
    color: #4B5563;
    line-height: 1.3;
    border-radius: 0 3px 3px 0;
}

.quote-internal-notes-callout .callout-label {
    font-weight: 600;
    color: #3B82F6;
    font-size: 0.75rem;
}

/* View mode variant (slightly more subtle) */
.quote-internal-notes-callout.view-mode {
    background: #F8FAFC;
    border-left-color: #93C5FD;
    margin-top: 4px;
}

/* Quote Edit Modal - side-by-side notes, public left and internal right. Each
   sits in its own half-width cell (`td.item-notes-public` /
   `td.item-notes-internal`) rather than stacking inside the description column;
   placement and widths are in api/pages/quotes.php. */
.quote-note-callout {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 8px 6px;
    border-left: 3px solid;
    border-radius: 0 3px 3px 0;
}

.quote-note-callout .callout-label {
    font-weight: 600;
    font-size: 0.75rem;
}

.quote-note-callout textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid;
    border-radius: 3px;
    background: #FFFFFF;
    padding: 4px 6px;
    font-family: inherit;
    font-size: 0.8rem;
    color: #1F2937;
    line-height: 1.3;
    resize: vertical;
    min-height: 28px;
    max-height: 200px;
    overflow-y: auto;
}

.quote-note-callout textarea:focus {
    outline: none;
}

.quote-note-callout textarea::placeholder {
    color: #9CA3AF;
    font-style: italic;
}

/* Public (customer-facing) notes - light grey theme */
.quote-note-callout.note-public {
    background: #F3F4F6;
    border-left-color: #9CA3AF;
}

.quote-note-callout.note-public .callout-label {
    color: #6B7280;
}

.quote-note-callout.note-public textarea {
    border-color: #D1D5DB;
}

.quote-note-callout.note-public textarea:focus {
    border-color: #6B7280;
    box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.15);
}

/* Internal notes - blue theme */
.quote-note-callout.note-internal {
    background: #F0F4FF;
    border-left-color: #3B82F6;
}

.quote-note-callout.note-internal .callout-label {
    color: #3B82F6;
}

.quote-note-callout.note-internal textarea {
    border-color: #C7D2FE;
}

.quote-note-callout.note-internal textarea:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* Takeoff Line Item Notes Input - Auto-scaling Multiline Field */
.line-item-notes-input {
    width: 100%;
    min-height: calc(1.2em + 8px); /* 1 line minimal */
    max-height: calc(3.4em + 12px); /* 3 lines */
    padding: 4px 8px;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    resize: none; /* Disable manual resize since we're auto-scaling */
    box-sizing: border-box;
    overflow-y: auto;
    transition: height 0.1s ease;
}

.line-item-notes-input:focus {
    outline: none;
    border-color: #00204b;
    box-shadow: 0 0 0 2px rgba(0, 32, 75, 0.1);
}

.line-item-notes-input::placeholder {
    color: #9CA3AF;
}

/* ============================================================================
   PRICE CHECKS SECTION
   ============================================================================ */

.price-checks-section,
.url-entry-section {
    margin-top: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: #fff;
    box-shadow: var(--box-shadow);
}

.price-checks-section .section-bar,
.url-entry-section .section-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.price-checks-section .section-bar h3,
.url-entry-section .section-bar h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.section-bar-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* btn-confirm for bulk confirm button (green) */
.btn-confirm {
    background: var(--success-color);
    color: #fff;
    border: 1px solid var(--success-color);
}

.btn-confirm:hover {
    background: #218838;
    border-color: #218838;
}

/* Individual price check item.
   Two independent columns: the text body on the left, the action buttons on the
   right. The buttons are a sibling of the body rather than a cell inside its top
   line, so they grow downward on their own without dragging the text rows taller. */
.pc-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    padding: 8px 16px;
    border-bottom: 1px solid #f0f0f0;
}

/* Explicit placement for every child, so a row missing its confidence badge (the
   no-price and error rows) still lands its buttons in the same column. */
.pc-item > .pc-desc       { grid-column: 1; grid-row: 1; }
.pc-item > .pc-badges     { grid-column: 2; grid-row: 1; }
.pc-item > .pc-actions    { grid-column: 3; grid-row: 1; }

.pc-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

/* Records that our own escalation path re-ran this check with extended thinking —
   read from the stored row, not claimed by the model. */
.pc-escalated {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
    background: #e3e9f5;
    color: #3a5488;
}

/* Row two spans the full width: extraction detail left, vendor centred, price hard
   right beneath the buttons. The equal 1fr tracks either side of the vendor are what
   centre it in the row — centring it in the leftover space instead would let it
   drift as the detail text changes length. */
.pc-item > .pc-item-footer {
    grid-column: 1 / span 3;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: 12px;
}

/* Placed explicitly, not auto-flowed: rows with no raw snippet or notes emit no
   detail element, and auto-placement would slide the vendor and price a column left. */
.pc-item-footer > .pc-item-detail { grid-column: 1; min-width: 0; }
.pc-item-footer > .pc-vendor      { grid-column: 2; }
.pc-item-footer > .pc-pricing,
.pc-item-footer > .pc-no-price    { grid-column: 3; justify-self: end; }

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

.pc-item:hover {
    background: #fafbfc;
}

/* The product name gets the full width of the top row. It is the thing being
   identified, and sharing a line with the figures left it ellipsized to almost
   nothing. */
.pc-desc {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-pricing {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.pc-current {
    color: #666;
}

.pc-arrow {
    font-size: 11px;
}

.pc-extracted {
    font-weight: 700;
}

.pc-diff {
    font-size: 11px;
}

.pc-price-up {
    color: var(--danger-color);
}

.pc-price-down {
    color: var(--success-color);
}

.pc-match {
    color: var(--success-color);
    font-weight: 600;
}

.pc-no-price {
    color: #999;
    font-style: italic;
    font-size: 12px;
}

.pc-item-error .pc-no-price {
    color: #e74c3c;
    font-style: normal;
    font-weight: 600;
}

.pc-item-error .pc-notes {
    color: #c0392b;
    font-size: 11px;
}

.pc-confidence {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    text-align: center;
}

.pc-conf-high {
    background: #d4edda;
    color: #155724;
}

.pc-conf-medium {
    background: #fff3cd;
    color: #856404;
}

.pc-conf-low {
    background: #f8d7da;
    color: #721c24;
}

.pc-vendor {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Single row, equal-width buttons. Sitting in their own column beside the text body
   rather than inside its first line, the two-line labels fit within the height the
   body already occupies, so they cost no extra row height. */
.pc-actions {
    flex: 0 0 auto;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 58px;
    gap: 4px;
    align-content: start;
}

/* Two-line action buttons: glyph (or short word) over a spelled-out label, so the
   difference between approving the extracted price and keeping the one on file is
   readable without hovering for a tooltip. */
.pc-actions .btn {
    padding: 3px 4px;
    font-size: 13px;
    line-height: 1;
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.pc-btn-label {
    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.85;
}

/* Both of this button's lines are label text — "KEEP CURRENT" is one phrase split
   across two rows, not a glyph with a caption under it. Tighten the gap so it reads
   as a single wrapped label rather than two separate marks. */
.pc-btn-keep {
    gap: 1px;
}

/* Raw snippet and LLM reasoning share one ellipsized line instead of stacking two.
   The full text stays available on hover, so nothing is lost. */
.pc-item-detail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-raw-text {
    font-size: 11px;
    color: #888;
    font-style: italic;
}

.pc-notes {
    font-size: 11px;
    color: #999;
}

.pc-detail-sep {
    font-size: 11px;
    color: #ccc;
    padding: 0 6px;
}

.pc-empty {
    padding: 16px;
    text-align: center;
    color: #999;
    font-size: 13px;
}

/* ============================================================================
   URL ENTRY MODE
   ============================================================================ */

.url-entry-help {
    padding: 8px 16px;
    font-size: 12px;
    color: #666;
    background: #fefcf3;
    border-bottom: 1px solid #f0f0f0;
}

.url-vendor-select {
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: #fff;
    min-width: 160px;
}

/* Header row */
.url-entry-header {
    display: flex;
    align-items: center;
    padding: 6px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid var(--border-color);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
}

/* Data rows */
.url-entry-row {
    display: flex;
    align-items: center;
    padding: 4px 16px;
    border-bottom: 1px solid #f5f5f5;
    font-size: 12px;
}

.url-entry-row:hover {
    background: #fafbfc;
}

/* Column sizing */
.url-col-desc {
    flex: 3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
}

.url-col-vendor {
    flex: 0 0 120px;
    color: #666;
    padding-right: 8px;
}

.url-col-cost {
    flex: 0 0 70px;
    text-align: right;
    font-weight: 500;
    padding-right: 12px;
}

.url-col-url {
    flex: 2;
    min-width: 0;
    padding-right: 8px;
}

.url-col-status {
    flex: 0 0 28px;
    text-align: center;
}

.url-entry-input {
    width: 100%;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-family: monospace;
    transition: border-color 0.15s;
}

.url-entry-input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 32, 75, 0.1);
}

.url-save-ok {
    color: var(--success-color);
    font-weight: 700;
    font-size: 14px;
}

.url-save-error {
    color: var(--danger-color);
    font-size: 14px;
    cursor: help;
}

.url-save-pending {
    color: #999;
    font-size: 12px;
}

.url-entry-paging {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid #f0f0f0;
}

.url-page-info {
    font-size: 12px;
    color: #666;
}

/* ============================================================================
   PRICING TOOLS ROW (below category filters)
   ============================================================================ */

.pricing-tools-section {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Toggle filter buttons (Stale, Has URL) - outlined style when inactive, filled when active */
.btn-toggle-filter {
    background: transparent;
    color: var(--secondary-color);
    border-color: var(--secondary-color);
    font-size: 0.8rem;
}

.btn-toggle-filter:hover {
    background: rgba(0, 32, 75, 0.08);
    color: var(--secondary-color);
}

.btn-toggle-filter.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* Spacer between toggle filters and action buttons */
.pricing-tools-divider {
    width: 16px;
}

/* Pricing tool buttons inherit pill style from .status-filter-btn
   but use accent color to distinguish from category filters */
.btn-pricing-tool {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-pricing-tool:hover {
    background: #2a4060;
    border-color: #2a4060;
    color: #fff;
}

.btn-pricing-tool .count-badge {
    background: rgba(255,255,255,0.3);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
}

/* Price Checks Modal overrides */
.price-checks-modal-content {
    width: 900px;
}

.price-checks-modal-body {
    padding: 0;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

/* Sticky so the bulk confirm button stays reachable while scrolling a long
   list — the toolbar lives inside the scrolling modal body. */
.price-checks-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 16px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
    min-height: 40px;
    position: sticky;
    top: 0;
    z-index: 2;
}

.price-checks-help-inline {
    font-size: 12px;
    color: #888;
}

.price-checks-truncated {
    font-size: 12px;
    color: #a06000;
    margin-left: auto;
}

/* URL Entry Modal overrides */
.url-entry-modal-content {
    width: 90vw;
    max-width: 1400px;
}

.url-entry-modal-body {
    padding: 0;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

.url-entry-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}

.url-entry-help-inline {
    font-size: 12px;
    color: #888;
}

/* New columns */
.url-col-model {
    flex: 0 0 140px;
    font-size: 11px;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
}

.url-col-stale {
    flex: 0 0 36px;
    text-align: center;
}

.url-product-link {
    color: #333;
    text-decoration: none;
}

.url-product-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.btn-dismiss-product {
    background: none;
    border: 1px solid #e57373;
    border-radius: 3px;
    color: #c62828;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    width: 20px;
    height: 20px;
    line-height: 16px;
    padding: 0;
}

.btn-dismiss-product:hover {
    background: #fee;
    border-color: #e57373;
    color: #c62828;
}

/* Saved row dim effect — keeps row visible but indicates it's been updated */
.url-entry-row-saved {
    opacity: 0.45;
    background: #f0faf0;
}

.url-entry-row-saved .url-entry-input {
    background: #f5f5f5;
}

/* ============================================================================
   SHARED MODAL COMPONENT STYLES
   Consolidated from inline <style> blocks across customers.php, vendors.php,
   products.php, quotes.php, takeoffs.php, settings.php.
   These provide a unified modal editing experience across all modules.
   ============================================================================ */

/* --- Modal Section Containers ---
   Unified from .customer-info-section, .vendor-info-section, .product-info-section,
   .quote-info-section, .takeoff-info-section and their -additional-section variants.
   All share identical styling: bordered, rounded, light background containers.
*/
.modal-section,
.customer-info-section,
.customer-additional-section,
.vendor-info-section,
.vendor-additional-section,
.product-info-section,
.product-additional-section,
.product-pricing-section,
.product-brand-section,
.product-vendor-section,
.quote-info-section,
.takeoff-info-section {
    margin-bottom: 1.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    background: #fafafa;
}

/* --- Section Header (Edit Modals) ---
   Flex row with bottom border, used at top of each modal section.
   Note: This targets .modal-section context to avoid conflicting with
   the .data-view .section-header (view modals) and .settings-section .section-header.
*/
.modal-section .section-header,
.customer-info-section .section-header,
.customer-additional-section .section-header,
.vendor-info-section .section-header,
.vendor-additional-section .section-header,
.product-info-section .section-header,
.product-additional-section .section-header,
.product-pricing-section .section-header,
.product-brand-section .section-header,
.product-vendor-section .section-header,
.quote-info-section .section-header,
.takeoff-info-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

/* --- Two-Column Grid Layout ---
   Used in all modal edit forms for side-by-side field layout.
*/
.info-grid-two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 0;
}

.info-column-left,
.info-column-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* --- Info Row (Edit Modal Context) ---
   Row layout for label + value pairs in edit modals.
   Scoped to modal section containers to avoid conflicting with
   .data-view .info-row (view modals) and .order-info .info-row (orders).
*/
.modal-section .info-row,
.customer-info-section .info-row,
.customer-additional-section .info-row,
.vendor-info-section .info-row,
.vendor-additional-section .info-row,
.product-info-section .info-row,
.product-additional-section .info-row,
.product-pricing-section .info-row,
.product-brand-section .info-row,
.product-vendor-section .info-row,
.quote-info-section .info-row,
.takeoff-info-section .info-row {
    padding: 8px 0;
    margin-bottom: 0;
}

/* --- Info Row Labels (Edit Modals) ---
   Consistent label styling across all modal edit forms.
   Standardized to: 13px, #555, 600 weight.
*/
.modal-section .info-row > label,
.customer-info-section .info-row > label,
.customer-additional-section .info-row > label,
.vendor-info-section .info-row > label,
.vendor-additional-section .info-row > label,
.product-info-section .info-row > label,
.product-additional-section .info-row > label,
.product-pricing-section .info-row > label,
.product-brand-section .info-row > label,
.product-vendor-section .info-row > label,
.quote-info-section .info-row > label,
.takeoff-info-section .info-row > label {
    font-weight: 600;
    color: #555;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    margin-bottom: 0;
    min-width: 100px;
    flex-shrink: 0;
}

/* Wider labels for Additional Information sections (longer label text) */
.product-additional-section .info-row > label {
    min-width: 140px;
}

/* --- Info Value Container ---
   Flex container for form field + optional icons/buttons.
*/
.info-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

/* --- Form Fields in Info Value ---
   Unified input/select styling for all modal edit forms.
   Standardized to 13px across all modules (was mixed 13/14px).
*/
.info-value input,
.info-value select {
    flex: 1;
    padding: 0.15rem 0.4rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    line-height: 1.4;
    background: white;
    min-height: auto;
}

.info-value input:focus,
.info-value select:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 1px rgba(0, 32, 75, 0.1);
}

/* --- Textareas in Modal Sections ---
   Unified textarea styling for notes, descriptions, etc.
*/
.info-value textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    background: white;
}

.info-value textarea:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 1px rgba(0, 32, 75, 0.1);
}

/* Global textarea resize */
textarea {
    resize: both;
}

/* --- Textarea Row Overrides ---
   When a row contains a textarea, adjust alignment and width.
   Consolidated from customer, vendor, product, quote additional sections.
*/
.customer-additional-section .info-row:has(textarea),
.vendor-additional-section .info-row:has(textarea),
.product-info-section .info-row:has(textarea),
.product-additional-section .info-row:has(textarea),
.quote-info-section .info-row:has(textarea) {
    justify-content: space-between;
    align-items: flex-start;
}

.customer-additional-section .info-value,
.vendor-additional-section .info-value,
.product-info-section .info-value:has(textarea),
.product-additional-section .info-value {
    width: 350px;
}

/* --- View Modal Span/Value Styling ---
   Consolidated from #customer-view-modal, #vendor-view-modal, #product-view-modal.
   Removes need for !important by using sufficient specificity.
*/
#customer-view-modal .info-row span,
#vendor-view-modal .info-row span,
#product-view-modal .info-row span {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #333;
}

/* --- View Modal Label Styling ---
   Consistent label styling in view modals.
*/
#customer-view-modal .info-row > label,
#vendor-view-modal .info-row > label,
#product-view-modal .info-row > label {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #555;
    margin-bottom: 0.5rem;
}

/* --- Modal Action Bars ---
   Consolidated from per-module #*-modal .view-modal-actions.
   White background with border-top. Buttons inherit Mokoto from .btn.
*/
#customer-modal .view-modal-actions,
#customer-view-modal .view-modal-actions,
#vendor-modal .view-modal-actions,
#vendor-view-modal .view-modal-actions,
#product-modal .view-modal-actions,
#product-view-modal .view-modal-actions {
    background: white;
    border-top: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
}

/* --- Modal Footer Button Sizing ---
   Inherited from base .btn (padding: 0.5rem 1rem, border-radius: 4px, font: Mokoto).
*/

/* --- Delete & Action Buttons ---
   Color-only rules (sizing handled by .view-modal-actions .btn above).
*/
.btn-delete-from-view {
    background: #dc3545;
    color: white;
    border: none;
}

.btn-delete-from-view:hover {
    background: #c82333;
}

/* .btn-oqv-duplicate is the orders module's equivalent of .btn-duplicate-from-view.
   It cannot reuse that class: quotes-management.js delegates the duplicate click
   on the class at document level, and that listener survives SPA navigation, so
   the orders button would fire twice. */
.btn-duplicate-from-view,
.btn-oqv-duplicate {
    background: var(--accent-color);
    color: white;
    border: none;
}

.btn-duplicate-from-view:hover,
.btn-oqv-duplicate:hover {
    background: var(--primary-color);
}

.view-modal-action-buttons .btn-create-revision,
.view-modal-action-buttons .btn-revision-from-detail {
    background: var(--accent-color);
    color: white;
    border: none;
}

.view-modal-action-buttons .btn-create-revision:hover,
.view-modal-action-buttons .btn-revision-from-detail:hover {
    background: var(--primary-color);
}

.btn-confirm-price-view {
    background: var(--success-color);
    color: white;
    border: none;
}

.btn-confirm-price-view:hover {
    background: #218838;
}

/* --- Dropdown Pattern ---
   Consolidated from products.php and quotes.php inline styles.
*/
.dropdown-wrapper {
    position: relative;
    display: inline;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background: white;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    border-radius: 4px;
    z-index: 1000;
    border: 1px solid #ddd;
}

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

.dropdown-content a,
.dropdown-content button {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    color: var(--text-color);
    text-decoration: none;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
}

.dropdown-content a:hover,
.dropdown-content button:hover {
    background: #f5f5f5;
}

/* --- Vendor Checkbox Group ---
   From vendors.php — unique to vendor module.
*/
.vendor-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vendor-checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.vendor-checkbox-group input[type="checkbox"] {
    width: auto !important;
    margin: 0;
}

.vendor-checkbox-group .help-text {
    color: #666;
    font-size: 0.85em;
    font-style: italic;
    margin-top: 4px;
}

/* --- SPA Loading Overlay ---
   From index.php — loading overlay shown during page transitions.
*/
#spa-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.loading-spinner {
    font-size: 18px;
    color: #007cba;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Smooth page transitions */
#spa-main-content {
    animation: fadeIn 0.2s ease-in-out;
}

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

/* --- Notification Classes ---
   Consolidated from app.js cssText inline styling.
*/
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 24px;
    border-radius: 8px;
    z-index: 100000;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    transform: translateX(0);
    opacity: 1;
}

.notification--error {
    background: #dc3545;
    color: white;
}

.notification--warning {
    background: #ffc107;
    color: #212529;
}

.notification--info {
    background: #007cba;
    color: white;
}

.notification--success {
    background: #28a745;
    color: white;
}

/* --- Button Disabled State ---
   For JS-toggled disabled buttons (replaces inline .style.opacity).
*/
.btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================================
   SETTINGS MODULE — Continued (Margin toggles, Backup, Manifest)
   ============================================================================ */

/* Margin Type Toggle (%/$ selector) */
.margin-type-toggle {
    display: flex;
    gap: 4px;
}

.margin-type-toggle .markup-type-option {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.margin-type-toggle .markup-type-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.margin-type-toggle .markup-button-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    background: white;
    transition: all 0.2s ease;
    cursor: pointer;
    font-weight: 500;
}

.margin-type-toggle .markup-type-option input[type="radio"]:checked + .markup-button-small {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.margin-type-toggle .markup-button-small:hover {
    border-color: var(--primary-color);
}

/* Input with Symbol (margin value) */
.input-with-symbol-settings {
    position: relative;
    display: flex;
    align-items: center;
    width: 75px;
}

.input-with-symbol-settings .input-symbol {
    position: absolute;
    font-size: 12px;
    color: #888;
    pointer-events: none;
    font-family: 'Inter', sans-serif;
}

.input-with-symbol-settings .input-symbol-left { left: 8px; }
.input-with-symbol-settings .input-symbol-right { right: 8px; }

.input-with-symbol-settings .margin-value-input {
    width: 100%;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
    background: white;
}

.input-with-symbol-settings.has-left-symbol .margin-value-input { padding-left: 16px; }
.input-with-symbol-settings.has-right-symbol .margin-value-input { padding-right: 24px; }

/* Backup */
.backup-file-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.file-name-display {
    font-size: 0.8rem;
    color: #888;
}

.btn-warning {
    background: #ffc107;
    color: #333;
}

.btn-warning:hover:not(:disabled) {
    background: #e0a800;
}

.btn-warning:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Extension Manifest */
.domain-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 2px 0;
}

.domain-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

.domain-tag-current {
    background: #e8f4fd;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.domain-tag-discovered {
    background: var(--light-color);
    color: #333;
    border: 1px solid var(--border-color);
}

.domain-tag-new {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
}

.domain-tag-none {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    font-style: italic;
}

.manifest-instructions {
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    line-height: 1.7;
}

.manifest-instructions ol {
    margin: 0;
    padding-left: 1.25rem;
}

.manifest-instructions details {
    margin-top: 0.5rem;
}

.manifest-instructions summary {
    cursor: pointer;
    color: var(--primary-color);
}

.manifest-instructions ul {
    margin-top: 0.5rem;
    font-size: 0.7rem;
}

.manifest-instructions code {
    background: #e9ecef;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.7rem;
}

.loading-text {
    color: #999;
    font-style: italic;
    font-size: 0.8rem;
}


/* ==========================================================================
   Output Quote dialog
   ==========================================================================
   Global (markup lives in index.php) because print-handler.js serves the Output
   Quote button in both the quotes and orders modules. */

.quote-output-modal-content {
    width: 640px;
    min-width: 380px;
    max-width: calc(100vw - 50px);
    min-height: 0;
}

.quote-output-warning {
    margin-bottom: 0.9rem;
    padding: 0.55rem 0.75rem;
    border-radius: 4px;
    border-left: 3px solid #f0ad4e;
    background: #fcf8e3;
    color: #8a6d3b;
    font-size: 0.85rem;
}

.quote-output-intro {
    margin: 0 0 0.9rem;
    font-size: 0.85rem;
    color: #4b5563;
}

.quote-output-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.1rem;
    border: 2px dashed var(--border-color, #ddd);
    border-radius: 6px;
    color: #6b7280;
    transition: border-color 0.15s, background 0.15s;
}

.quote-output-dropzone.is-dragover {
    border-color: var(--primary-color, #2a629a);
    background: rgba(42, 98, 154, 0.06);
}

.quote-output-drop-text {
    margin: 0;
    font-size: 0.9rem;
}

.quote-output-drop-or {
    margin: 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.quote-output-help {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #6b7280;
}

.quote-output-list {
    margin-top: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.quote-output-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    background: #fff;
}

/* Drag is on the handle only, so the caption field stays selectable. */
.quote-output-handle {
    cursor: grab;
    color: #9ca3af;
    font-size: 0.95rem;
    letter-spacing: -2px;
    user-select: none;
    flex-shrink: 0;
}

.quote-output-handle:active {
    cursor: grabbing;
}

/* contain, not cover. These are arbitrary-aspect snips: cropping one to fill a
   fixed box can leave a quarter of a wide strip standing in for the whole
   snapshot, which defeats the point of a thumbnail meant to tell them apart.
   Fitting inside means the image meets whichever edge binds first and the box
   shows through around it as a frame. The box stays a fixed size so the rows
   line up rather than going ragged with each image's aspect ratio. */
.quote-output-thumb {
    width: 88px;
    height: 56px;
    object-fit: contain;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 3px;
    background: #f3f4f6;
    flex-shrink: 0;
}

.quote-output-caption {
    flex: 1;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
}

.quote-output-caption:focus {
    outline: none;
    border-color: var(--primary-color, #2a629a);
}

.quote-output-remove {
    border: none;
    background: none;
    color: #9ca3af;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.2rem;
    flex-shrink: 0;
}

.quote-output-remove:hover {
    color: #dc3545;
}