/* business.css - Business Management System Styles */

/* ============================================
   Layout & Container Styles
   ============================================ */

#edit-page {
    /* Layout from .main (translucent area + side margins) and .container (max-width + padding) */
}

.top-sections {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.left-section,
.right-section {
    flex: 1;
    min-width: 260px;
    max-width: 480px;
}

/* Right-align the right section */
.right-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Right-align the quote details table */
.quote-details {
    text-align: right;
    margin-right: 0;
}

.quote-details th {
    text-align: right;
}

.quote-details td {
    text-align: right;
}

/* Right-align input content in quote details (Issue Date, Lead Time) to match Quote #, Created, Last Updated */
.quote-details input[type="date"],
.quote-details input[type="number"] {
    text-align: right;
}

.timestamp-cell {
    font-size: 0.9em;
    color: var(--text-muted, #666);
}

/* Quote currency block: below the quote-details table, right-aligned */
.quote-currency-block {
    margin-top: 4px;
    padding: 4px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    justify-content: flex-end;
    color: var(--text-dark, #212529);
}
.quote-currency-block .quote-currency-label {
    font-weight: 500;
    color: var(--text-muted, #6c757d);
    margin: 0;
}
.quote-currency-block .quote-currency-select {
    min-width: 6em;
    padding: 6px 10px;
    border: 1px solid var(--border-color, #ced4da);
    border-radius: 4px;
    background: var(--background-white, #fff);
    color: var(--text-dark, #212529);
    font-size: 14px;
}
.quote-currency-block .quote-rate-info {
    color: var(--text-muted, #6c757d);
    font-size: 13px;
}
.quote-currency-block .quote-rate-input,
.quote-currency-block .quote-rate-date {
    width: 90px;
    padding: 6px 8px;
    border: 1px solid var(--border-color, #ced4da);
    border-radius: 4px;
    background: var(--background-white, #fff);
    color: var(--text-dark, #212529);
    font-size: 14px;
    text-align: right;
}
.quote-currency-block .quote-rate-date {
    width: 130px;
}

[data-theme="dark"] .quote-currency-block {
    color: var(--text-dark, #e0e0e0);
}
[data-theme="dark"] .quote-currency-block .quote-currency-label {
    color: var(--text-muted, #b0b0b0);
}
[data-theme="dark"] .quote-currency-block .quote-currency-select {
    border-color: var(--text-muted, #b0b0b0);
    background: var(--background-white, #1a1a1a);
    color: var(--text-dark, #e0e0e0);
}
[data-theme="dark"] .quote-currency-block .quote-rate-info {
    color: var(--text-muted, #b0b0b0);
}
[data-theme="dark"] .quote-currency-block .quote-rate-input,
[data-theme="dark"] .quote-currency-block .quote-rate-date {
    border-color: var(--text-muted, #b0b0b0);
    background: var(--background-white, #1a1a1a);
    color: var(--text-dark, #e0e0e0);
}
[data-theme="dark"] .quote-currency-block .quote-rate-input:focus,
[data-theme="dark"] .quote-currency-block .quote-rate-date:focus,
[data-theme="dark"] .quote-currency-block .quote-currency-select:focus {
    background: #2a2a2a;
    border-color: var(--brand-color, #af6464);
}

.item-table-section {
    margin-bottom: 30px;
    width: 100%;
    overflow-x: auto;
}

.sales-notes-summary {
    display: flex;
    flex-direction: row;
    gap: 40px;
    margin-top: 30px;
    max-width: 100%;
    justify-content: space-between;
    align-items: flex-start;
}

.sales-notes-summary .notes {
    flex: 1 1 0;
    margin-right: 20px;
}

.sales-notes-summary .summary {
    flex: 0 0 400px !important;
    max-width: 400px !important;
    min-width: 350px !important;
    width: 400px !important;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* ============================================
   Table Styles
   ============================================ */

.edit-table-header {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px;
}

.edit-table-header th {
    text-align: left;
    padding: 4px 10px;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light, #ffffff);
    background-color: var(--brand-color, rgb(175, 100, 100));
    border: 2px solid var(--header-table-border, #a8a8a8);
    width: 36%;
}

.edit-table-header td {
    padding: 0;
    position: relative;
    min-height: 32px;
    border: 2px solid var(--header-table-border, #a8a8a8);
    background-color: var(--background-card, transparent);
    color: var(--text-dark, #333);
}

.edit-table-header td.timestamp-cell {
    padding: 4px 8px;
}

[data-theme="dark"] .edit-table-header th,
[data-theme="dark"] .edit-table-header td {
    border-color: var(--header-table-border, #151515);
}

/* Inputs fill parent cell like items table */
.edit-table-header input[type="text"],
.edit-table-header input[type="date"],
.edit-table-header input[type="number"] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 4px 8px;
    border: 1px solid var(--border-color, #ced4da);
    border-radius: 0;
    font-size: 14px;
    background-color: var(--background-card, #ffffff);
    color: var(--text-dark, #333);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.edit-table-header input[type="text"]:focus,
.edit-table-header input[type="date"]:focus,
.edit-table-header input[type="number"]:focus {
    outline: none;
    border-color: var(--brand-color, #007bff);
    box-shadow: 0 0 0 2px var(--brand-color-light, rgba(0, 123, 255, 0.25));
}

.sales-items-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--background-card, #ffffff);
    box-shadow: none; /* Match v2_01 - no box-shadow */
    border: 1px solid var(--text-dark, #000000);
    font-size: 15px;
}

/* Outer borders for table - 1px (matching v2_01) */
.sales-items-table {
    border: 1px solid var(--text-dark, #000000) !important;
}

/* Base borders on cells only - dotted grey like v2_01; overrides make outer/row borders solid black */
.sales-items-table td {
    border: 1px dotted var(--text-muted, #cccccc) !important;
}

/* Internal vertical separators - solid for header, dotted for body cells */
.sales-items-table th:not(:last-child) {
    border-right: 1px solid var(--text-dark, #000000) !important; /* Solid for header - more distinct */
}

.sales-items-table td:not(:last-child) {
    border-right: 1px dotted var(--text-muted, #cccccc) !important; /* Dotted for body */
}

/* Internal horizontal separators - solid */
.sales-items-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid var(--text-dark, #000000) !important;
}

/* Outer borders - 1px solid (matching v2_01) */
.sales-items-table th:first-child,
.sales-items-table td:first-child {
    border-left: 1px solid var(--text-dark, #000000) !important;
}

.sales-items-table th:last-child,
.sales-items-table td:last-child {
    border-right: 1px solid var(--text-dark, #000000) !important;
}

.sales-items-table tbody tr:last-child td {
    border-bottom: 1px solid var(--text-dark, #000000) !important;
}

/* Top border for header row - 1px (matching v2_01) */
.sales-items-table thead th {
    border-top: 1px solid var(--text-dark, #000000) !important;
}

/* Dark mode borders - use theme colors (opposite to light mode), opacity 1.0 */
/* --text-dark in dark mode = light (#f5f5f5), --text-muted = grey (#b0b0b0) */
[data-theme="dark"] .sales-items-table {
    border: 1px solid var(--text-muted, #b0b0b0) !important;
}

/* Base cell borders in dark mode */
[data-theme="dark"] .sales-items-table td {
    border-color: var(--text-muted, #b0b0b0) !important;
    color: var(--text-dark, #e0e0e0) !important;
}

/* Header vertical separators in dark mode */
[data-theme="dark"] .sales-items-table th:not(:last-child) {
    border-right: 1px solid var(--text-muted, #b0b0b0) !important;
}

/* Body vertical separators in dark mode - dotted, uses muted */
[data-theme="dark"] .sales-items-table td:not(:last-child) {
    border-right: 1px dotted var(--text-muted, #b0b0b0) !important;
}

/* Internal horizontal separators in dark mode */
[data-theme="dark"] .sales-items-table tbody tr:not(:last-child) td {
    border-bottom-color: var(--text-muted, #b0b0b0) !important;
}

/* Outer borders in dark mode */
[data-theme="dark"] .sales-items-table th:first-child,
[data-theme="dark"] .sales-items-table td:first-child {
    border-left-color: var(--text-muted, #b0b0b0) !important;
}

[data-theme="dark"] .sales-items-table th:last-child,
[data-theme="dark"] .sales-items-table td:last-child {
    border-right-color: var(--text-muted, #b0b0b0) !important;
}

[data-theme="dark"] .sales-items-table tbody tr:last-child td {
    border-bottom-color: var(--text-muted, #b0b0b0) !important;
}

/* Top border for header row in dark mode */
[data-theme="dark"] .sales-items-table thead th {
    border-top-color: var(--text-muted, #b0b0b0) !important;
}

/* Thead border-bottom in dark mode */
[data-theme="dark"] .sales-items-table thead {
    border-bottom-color: var(--text-muted, #b0b0b0) !important;
}

.sales-items-table thead {
    background-color: var(--brand-color, rgb(175, 100, 100));
    border-bottom: 1px solid var(--text-dark, #000000) !important;
}

/* Override .header-content min-height (from style.css) - that rule targets main nav, not table headers */
.sales-items-table thead th .header-content {
    min-height: 0 !important;
    padding: 0 !important;
    gap: 0.25rem;
}

.sales-items-table th {
    padding: 10px 12px !important;
    line-height: 1;
    text-align: left;
    font-weight: bold;
    color: var(--text-light, #ffffff);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* Border handled by specific rules above - don't set here to avoid conflicts */
    vertical-align: middle;
    background-color: var(--brand-color, rgb(175, 100, 100)) !important;
}

.sales-items-table td {
    padding: 2px 12px !important; /* Match v2_01 - more compact */
    /* Border handled by specific rules above - don't set here to avoid conflicts */
    vertical-align: middle;
    color: var(--text-dark, #333);
    background: var(--background-card, #ffffff);
    position: relative;
}

/* Total column - currency symbol positioned absolutely, total text flows normally */
.sales-items-table td.total-col {
    position: relative; /* Ensure absolute positioning context for currency symbol */
}

.sales-items-table td.total-col .currency-symbol {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    color: #c00;
    z-index: 10;
}

.sales-items-table td.total-col .item-total {
    display: inline-block;
    padding-left: 2.3em; /* Make room for currency symbol */
    text-align: right;
    width: 100%;
    box-sizing: border-box;
}

/* Total column styling - red color and bold like v2_01 */
.sales-items-table td.total-col,
.sales-items-table td.total {
    color: #c00 !important;
    font-weight: bold !important;
}

/* Total column elements are red (now directly in td, not in flex container) */
.sales-items-table td.total-col .currency-symbol,
.sales-items-table td.total-col .item-total {
    color: #c00 !important;
}

.sales-items-table td.total-col .item-total {
    font-weight: bold !important;
}

/* Dark mode total column - brighter red for visibility */
[data-theme="dark"] .sales-items-table td.total-col,
[data-theme="dark"] .sales-items-table td.total {
    color: #ff6b6b !important; /* Brighter red for dark mode */
}

[data-theme="dark"] .sales-items-table td.total-col .currency-symbol,
[data-theme="dark"] .sales-items-table td.total-col .item-total {
    color: #ff6b6b !important; /* Brighter red for dark mode */
}

/* Note: border-bottom for last row is handled above */

/* Alternating row colors for better visual separation */
.sales-items-table tbody tr:nth-child(even):not(.add-row) {
    background-color: #e8e8e8 !important;
}

.sales-items-table tbody tr:nth-child(even):not(.add-row) td {
    background-color: #e8e8e8 !important;
}

.sales-items-table tbody tr:nth-child(odd):not(.add-row) {
    background-color: var(--background-card, #ffffff) !important;
}

.sales-items-table tbody tr:nth-child(odd):not(.add-row) td {
    background-color: var(--background-card, #ffffff) !important;
}

/* Dark mode alternating rows - odd soft black, even lighter for clear stripe */
[data-theme="dark"] .sales-items-table tbody tr:nth-child(odd):not(.add-row),
[data-theme="dark"] .sales-items-table tbody tr:nth-child(odd):not(.add-row) td {
    background-color: #111111 !important;
}

[data-theme="dark"] .sales-items-table tbody tr:nth-child(even):not(.add-row),
[data-theme="dark"] .sales-items-table tbody tr:nth-child(even):not(.add-row) td {
    background-color: #2a2a2a !important;
}

/* Hover with slight brand color tint */
.sales-items-table tbody tr:hover:not(.add-row) {
    background-color: color-mix(in srgb, var(--brand-color) 7%, #f8f9fa) !important;
}

.sales-items-table tbody tr:hover:not(.add-row) td {
    background-color: color-mix(in srgb, var(--brand-color) 7%, #f8f9fa) !important;
}

/* Dark mode hover state - visible hover with brand tint */
[data-theme="dark"] .sales-items-table tbody tr:hover:not(.add-row),
[data-theme="dark"] .sales-items-table tbody tr:hover:not(.add-row) td {
    background-color: color-mix(in srgb, var(--brand-color) 14%, #2a2a2a) !important;
}

.sales-items-table tbody tr.dragging {
    opacity: 0 !important; /* Completely hide original - custom drag image shows instead */
    pointer-events: none !important; /* Prevent interaction with original during drag */
    /* Take it out of visual flow but keep in DOM for drag to work */
    height: 0 !important;
    overflow: hidden !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Smooth transitions for rows when placeholder moves */
.sales-items-table tbody tr:not(.dragging):not(.drag-placeholder) {
    transition: transform 0.15s ease-out;
}

.sales-items-table tbody tr.drag-over {
    background-color: var(--brand-color-lighter, #fff3cd);
}

/* Add row styling - yellow/beige background like v2_01 */
.sales-items-table tbody tr.add-row {
    background-color: #fff3cd !important; /* Yellow/beige like v2_01 */
}

.sales-items-table tbody tr.add-row:hover {
    background-color: #ffe69c !important; /* Slightly darker yellow on hover */
}

.sales-items-table tbody tr.add-row td {
    background-color: #fff3cd !important; /* Match row background */
    font-weight: bold !important; /* Bold text like v2_01 */
    padding: 2px 12px !important; /* Match v2_01 padding */
    border-top: 1px solid #000000 !important; /* Match v2_01 - solid black (on cells for reliable rendering) */
}

/* Dark mode for add-row - distinct warm dark background, clear text */
[data-theme="dark"] .sales-items-table tbody tr.add-row,
[data-theme="dark"] .sales-items-table tbody tr.add-row td {
    background-color: #3d3628 !important; /* Lighter warm dark for contrast and readability */
}

[data-theme="dark"] .sales-items-table tbody tr.add-row td {
    color: #e8e8e8 !important; /* Clear text on warm dark background */
    border-top: 1px solid var(--text-muted, #b0b0b0) !important;
}

[data-theme="dark"] .sales-items-table tbody tr.add-row .currency-symbol,
[data-theme="dark"] .sales-items-table tbody tr.add-row .item-total {
    color: #e8e8e8 !important;
}

[data-theme="dark"] .sales-items-table tbody tr.add-row:hover,
[data-theme="dark"] .sales-items-table tbody tr.add-row:hover td {
    background-color: #453d2e !important; /* Slightly lighter on hover */
}

/* Dark mode for input fields in table */
[data-theme="dark"] .sales-items-table input[type="text"],
[data-theme="dark"] .sales-items-table input[type="number"],
[data-theme="dark"] .sales-items-table input[type="date"] {
    color: #e0e0e0 !important; /* Light text for dark backgrounds */
}

[data-theme="dark"] .sales-items-table input[type="text"]::placeholder,
[data-theme="dark"] .sales-items-table input[type="number"]::placeholder,
[data-theme="dark"] .sales-items-table input[type="date"]::placeholder {
    color: #909090 !important; /* Visible placeholder on dark backgrounds */
}

/* Dark mode add-row: input fields with dark theme (background + placeholder) */
/* Add-row inputs: visible border like top tables */
.sales-items-table tbody tr.add-row input[type="text"],
.sales-items-table tbody tr.add-row input[type="number"],
.sales-items-table tbody tr.add-row input[type="date"] {
    border: 1px solid var(--border-color, #ced4da) !important;
}

[data-theme="dark"] .sales-items-table tbody tr.add-row input[type="text"],
[data-theme="dark"] .sales-items-table tbody tr.add-row input[type="number"],
[data-theme="dark"] .sales-items-table tbody tr.add-row input[type="date"] {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #e8e8e8 !important;
}

[data-theme="dark"] .sales-items-table tbody tr.add-row input[type="text"]::placeholder,
[data-theme="dark"] .sales-items-table tbody tr.add-row input[type="number"]::placeholder,
[data-theme="dark"] .sales-items-table tbody tr.add-row input[type="date"]::placeholder {
    color: #b0b0b0 !important; /* Clear placeholder in add-row */
}

[data-theme="dark"] .sales-items-table tbody tr.add-row input[type="text"]:focus,
[data-theme="dark"] .sales-items-table tbody tr.add-row input[type="number"]:focus,
[data-theme="dark"] .sales-items-table tbody tr.add-row input[type="date"]:focus {
    background: rgba(0, 0, 0, 0.35) !important;
    border-color: var(--brand-color, rgb(175, 100, 100)) !important;
}

/* Dark mode for input focus state (data rows) */
[data-theme="dark"] .sales-items-table input[type="text"]:focus,
[data-theme="dark"] .sales-items-table input[type="number"]:focus,
[data-theme="dark"] .sales-items-table input[type="date"]:focus {
    background: #2a2a2a !important; /* Dark background instead of white */
    color: #e0e0e0 !important; /* Light text */
}

/* Dark theme: Style date picker calendar icon and calendar popup */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(0.8); /* Make calendar icon visible on dark background */
    opacity: 0.7;
    cursor: pointer;
}

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Dark mode for line column - ensure header text is white */
[data-theme="dark"] .sales-items-table th.line-col {
    color: var(--text-light, #ffffff) !important; /* White text for header in dark mode */
}

/* Dark mode for line column body cells */
[data-theme="dark"] .sales-items-table td.line-col {
    color: #b0b0b0 !important; /* Lighter gray for dark mode */
}

/* Dark mode for input labels */
[data-theme="dark"] .sales-items-table .input-label {
    color: #b0b0b0 !important; /* Lighter gray for dark mode */
}

.list-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--background-card, #ffffff);
    box-shadow: 0 2px 4px var(--shadow-color, rgba(0, 0, 0, 0.1));
    border: 2px solid var(--border-color, #dee2e6);
}

.list-table thead {
    background-color: var(--brand-color, rgb(175, 100, 100));
}

.list-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--text-dark, #000000);
    color: var(--text-light, #ffffff);
    background-color: var(--brand-color, rgb(175, 100, 100)) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.list-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color, #dee2e6);
    color: var(--text-dark, #333);
    background: var(--background-card, #ffffff);
}

.list-table tbody tr:hover {
    background-color: var(--background-light, #f8f9fa);
    cursor: pointer;
}

.list-table tbody tr:hover td {
    background-color: var(--background-light, #f8f9fa);
}

.table-row-link {
    cursor: pointer;
}

.table-row-link:hover {
    background-color: var(--background-light, #f8f9fa);
}

/* Dark mode adjustments for list-table */
[data-theme="dark"] .list-table {
    border-color: var(--border-color, #666666);
}

[data-theme="dark"] .list-table th {
    background-color: var(--brand-color, rgb(175, 100, 100)) !important;
    color: var(--text-light, #ffffff);
    border-bottom-color: var(--border-color, #666666);
}

[data-theme="dark"] .list-table td {
    color: var(--text-dark, #f5f5f5);
    background: var(--background-card, #1e1e1e);
    border-bottom-color: var(--border-color, #333333);
}

[data-theme="dark"] .list-table tbody tr:hover,
[data-theme="dark"] .list-table tbody tr:hover td {
    background-color: var(--background-light, #0f0f0f);
}

/* Activity log table: styled like sales-items-table (borders, header, alternating rows) */
.activity-log-table {
    width: auto;
    table-layout: fixed;
    border-collapse: collapse;
    background: var(--background-card, #ffffff);
    border: 1px solid var(--text-dark, #000000);
    font-size: 15px;
}

.activity-log-table td {
    border: 1px dotted var(--text-muted, #cccccc);
    padding: 2px 12px;
    vertical-align: middle;
    color: var(--text-dark, #333);
    background: var(--background-card, #ffffff);
}

.activity-log-table th {
    padding: 10px 12px;
    line-height: 1;
    text-align: left;
    font-weight: bold;
    color: var(--text-light, #ffffff);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
    background-color: var(--brand-color, rgb(175, 100, 100));
    border: 1px solid var(--text-dark, #000000);
}

.activity-log-table th:not(:last-child) {
    border-right: 1px solid var(--text-dark, #000000);
}

.activity-log-table td:not(:last-child) {
    border-right: 1px dotted var(--text-muted, #cccccc);
}

.activity-log-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid var(--text-dark, #000000);
}

.activity-log-table thead th {
    border-top: 1px solid var(--text-dark, #000000);
}

/* Alternating row colors */
.activity-log-table tbody tr:nth-child(even) td {
    background-color: #e8e8e8;
}

.activity-log-table tbody tr:nth-child(odd) td {
    background-color: var(--background-card, #ffffff);
}

.activity-log-table tbody tr:hover td {
    background-color: color-mix(in srgb, var(--brand-color) 7%, #f8f9fa);
}

/* Compact column widths */
.activity-log-col-user {
    width: 100px;
}

.activity-log-col-action {
    width: 220px; /* Fits "Quotation header updated" on one line in modal */
}

.activity-log-col-details {
    width: 420px;
}

.activity-log-col-datetime {
    width: 105px;
}

.activity-log-datetime-cell {
    white-space: nowrap;
}

.activity-log-action-cell {
    white-space: nowrap;
}

.activity-log-table td:nth-child(3) {
    white-space: nowrap; /* User column */
}

/* Dark mode - activity log table */
[data-theme="dark"] .activity-log-table {
    border-color: var(--text-muted, #b0b0b0);
}

[data-theme="dark"] .activity-log-table td {
    border-color: var(--text-muted, #b0b0b0);
    color: var(--text-dark, #e0e0e0);
}

[data-theme="dark"] .activity-log-table th {
    border-color: var(--text-muted, #b0b0b0);
    background-color: var(--brand-color, rgb(175, 100, 100));
    color: var(--text-light, #ffffff);
}

[data-theme="dark"] .activity-log-table th:not(:last-child) {
    border-right-color: var(--text-muted, #b0b0b0);
}

[data-theme="dark"] .activity-log-table td:not(:last-child) {
    border-right-color: var(--text-muted, #b0b0b0);
}

[data-theme="dark"] .activity-log-table tbody tr:not(:last-child) td {
    border-bottom-color: var(--text-muted, #b0b0b0);
}

[data-theme="dark"] .activity-log-table tbody tr:nth-child(odd) td {
    background-color: #111111;
}

[data-theme="dark"] .activity-log-table tbody tr:nth-child(even) td {
    background-color: #2a2a2a;
}

[data-theme="dark"] .activity-log-table tbody tr:hover td {
    background-color: color-mix(in srgb, var(--brand-color) 7%, #0f0f0f);
}

/* Activity log modal: wide enough for table, scrollable body */
.activity-log-modal-content {
    max-width: 860px;
    width: 90vw;
}

.activity-log-modal-content .modal-body {
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-gutter: stable; /* reserve space for scrollbar so table width doesn't change when scrollbar appears */
}

/* ============================================
   Column Widths
   ============================================ */

.drag-col {
    width: 30px;
    text-align: center;
}

.line-col {
    width: 40px;
    min-width: 45px;
    text-align: center;
    font-weight: bold;
    color: var(--text-muted, #6c757d);
    white-space: nowrap;
}

.details-col {
    min-width: 300px;
}

.qty-col {
    width: 100px;
}

.price-col {
    width: 120px;
}

.total-col {
    width: 120px;
}

.date-col {
    width: 130px;
}

.actions-col {
    width: 100px;
}

/* Actions column - remove odd borders from base td rule; keep only structural grid borders */
.sales-items-table td.actions-col {
    border-left: 1px dotted var(--text-muted, #cccccc) !important;
    border-right: 1px solid var(--text-dark, #000000) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--text-dark, #000000) !important;
}

/* Row separators: top border comes from row above, so reset base dotted for actions cell */
.sales-items-table tbody tr:not(:first-child) td.actions-col {
    border-top: 1px solid var(--text-dark, #000000) !important;
}

/* Dark mode */
[data-theme="dark"] .sales-items-table td.actions-col {
    border-left-color: var(--text-muted, #b0b0b0) !important;
    border-right-color: var(--text-muted, #b0b0b0) !important;
    border-bottom-color: var(--text-muted, #b0b0b0) !important;
}

[data-theme="dark"] .sales-items-table tbody tr:not(:first-child) td.actions-col {
    border-top-color: var(--text-muted, #b0b0b0) !important;
}

/* ============================================
   Item Details Container
   ============================================ */

.item-details-container {
    position: relative;
}

.drawing-info,
.description-info,
.material-info,
.heat-treatment-info,
.surface-finishing-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.input-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #6c757d);
    margin-right: 8px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Input fields in table - fill entire cell using absolute positioning */
.sales-items-table input[type="text"],
.sales-items-table input[type="number"],
.sales-items-table input[type="date"] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid transparent; /* Border always present, transparent by default */
    background: transparent;
    margin: 0;
    padding: 4px 6px;
    font-size: 15px;
    outline: none;
    z-index: 10;
    font-family: inherit;
    transition: background 0.2s, border-color 0.2s;
}


.sales-items-table input[type="text"]:focus,
.sales-items-table input[type="number"]:focus,
.sales-items-table input[type="date"]:focus {
    background: var(--background-card, #ffffff);
    border-color: var(--brand-color, rgb(175, 100, 100)); /* Change border color on focus */
    outline: none;
}

/* Exclude details-col and drag-col from absolute positioning to prevent blocking clicks */
.sales-items-table td.details-col input[type="text"],
.sales-items-table td.details-col input[type="number"],
.sales-items-table td.details-col input[type="date"],
.sales-items-table td.drag-col input[type="text"],
.sales-items-table td.drag-col input[type="number"],
.sales-items-table td.drag-col input[type="date"] {
    position: relative !important;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    height: auto;
    z-index: auto;
}

.item-details-container input[type="text"] {
    flex: 1;
    min-width: 100px;
    padding: 4px 6px;
    margin: 0;
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--text-dark, #495057);
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
}

.item-details-container input[type="text"]:focus {
    background: var(--background-card, #ffffff);
    border: 1px solid var(--brand-color, rgb(175, 100, 100));
    outline: none;
}

/* Override indicators and revert buttons */
.input-with-revert {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 100px;
    position: relative;
}

.item-details-container input.has-override {
    background-color: rgba(255, 235, 59, 0.2); /* Light yellow background for overridden fields */
    border-left: 3px solid #ffc107; /* Yellow left border indicator */
}

.item-details-container input.has-override:focus {
    background-color: rgba(255, 235, 59, 0.3);
    border-left: 3px solid #ff9800; /* Darker yellow on focus */
}

.revert-to-master {
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 3px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 0;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
    line-height: 1;
}

.revert-to-master:hover {
    background: #5a6268;
}

.revert-to-master:active {
    background: #495057;
}

/* Coalesced line styles */
.item-details-coalesced {
    display: flex;
    align-items: center;
    width: 100%;
}

.coalesced-line-container {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    flex-wrap: wrap;
}

.coalesced-line {
    flex: 1;
    min-width: 200px;
    font-size: 14px;
    color: var(--text-dark, #495057);
    line-height: 1.5;
    padding: 4px 0;
    position: relative;
    z-index: 20;
    pointer-events: auto;
}

.coalesced-override {
    color: #ff9800; /* Orange color for overridden fields */
    font-weight: 500;
}

.coalesced-empty {
    color: var(--text-muted, #6c757d);
    font-style: italic;
}

.edit-item-details-btn {
    background: var(--brand-color, rgb(175, 100, 100));
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    z-index: 20;
    pointer-events: auto;
}

.edit-item-details-btn:hover {
    background: rgba(175, 100, 100, 0.9);
}

.edit-item-details-btn:active {
    background: rgba(175, 100, 100, 0.8);
}

/* Inline editing fields */
.inline-edit-fields {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}

/* Ensure inline-edit-fields don't block clicks when hidden */
.inline-edit-fields {
    pointer-events: auto;
}

.inline-edit-fields[style*="display: none"],
.inline-edit-fields[style*="display:none"] {
    pointer-events: none !important;
}

.inline-edit-fields input {
    position: relative;
    z-index: 15;
    pointer-events: auto;
    min-width: 200px;
    padding: 4px 0;
}

/* Static drawing/revision text in inline edit */
.inline-edit-drawing-revision {
    color: var(--text-dark, #495057);
    font-size: 14px;
    font-weight: 500;
    flex-shrink: 0;
    margin-right: 8px;
}

/* Labels for inline edit inputs */
.inline-edit-label {
    font-size: 13px;
    color: var(--text-muted, #6c757d);
    font-weight: 500;
    flex-shrink: 0;
    margin-right: 4px;
}

.inline-edit-fields input[type="text"] {
    padding: 4px 8px;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 3px;
    font-size: 13px;
    font-family: inherit;
    background: var(--background-card, #ffffff);
    color: var(--text-dark, #495057);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    min-width: 80px;
    flex: 1;
    max-width: 200px;
}

.inline-edit-fields input[type="text"]:focus {
    outline: none;
    border-color: var(--brand-color, rgb(175, 100, 100));
    box-shadow: 0 0 0 2px rgba(175, 100, 100, 0.1);
}

.inline-edit-fields input[type="text"].has-override {
    border-left: 3px solid #ff9800;
    background-color: rgba(255, 152, 0, 0.05);
}

.inline-edit-fields input[type="text"].has-override:focus {
    border-left: 3px solid #f57c00;
    background-color: rgba(255, 152, 0, 0.1);
}

.inline-separator {
    color: var(--text-muted, #6c757d);
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
    padding: 0 2px;
}

.coalesced-line {
    transition: opacity 0.2s ease;
}

.coalesced-line:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Modal form styles */
.input-with-revert-modal {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.master-value-hint {
    font-size: 11px;
    color: var(--text-muted, #6c757d);
    font-style: italic;
    margin-top: -2px;
}

.revert-to-master-modal {
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 11px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    align-self: flex-start;
    margin-top: 4px;
}

.revert-to-master-modal:hover {
    background: #5a6268;
}

.revert-to-master-modal:active {
    background: #495057;
}

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

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-dark, #495057);
}

.form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.form-control:focus {
    outline: none;
    border-color: var(--brand-color, rgb(175, 100, 100));
    box-shadow: 0 0 0 3px rgba(175, 100, 100, 0.1);
}

.form-control.has-override {
    border-left: 3px solid #ff9800;
    background-color: rgba(255, 152, 0, 0.05);
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, #dee2e6);
}

.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary {
    background: var(--brand-color, rgb(175, 100, 100));
    color: white;
}

.btn-primary:hover {
    background: rgba(175, 100, 100, 0.9);
}

.btn-secondary {
    background: var(--text-muted, #6c757d);
    color: white;
}

.btn-secondary:hover {
    background: rgba(108, 117, 125, 0.9);
}

.hover-trigger {
    position: static;
    width: 80px;
    height: 28px;
    cursor: pointer;
    background: var(--brand-color, rgb(175, 100, 100));
    border: none;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: var(--text-light, #ffffff);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    box-shadow: 0 1px 3px var(--shadow-color, rgba(0, 0, 0, 0.2));
    flex-shrink: 0;
    margin-left: auto;
    text-decoration: none;
    padding: 0;
}

.hover-trigger:hover {
    background: rgba(139, 38, 53, 1);
    box-shadow: 0 2px 6px var(--shadow-color, rgba(0, 0, 0, 0.3));
    text-decoration: none;
}

.hover-details {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color, #dee2e6);
}

.hover-details .input-label {
    display: block;
    margin-bottom: 4px;
}

.hover-details input[type="text"] {
    width: 100%;
    margin-bottom: 8px;
}

/* ============================================
   Input Styles
   ============================================ */

.item-input-quantity,
.item-input-due-date {
    /* Inherits absolute positioning from parent rule */
}

.item-input-quantity:focus,
.item-input-due-date:focus {
    /* Inherits focus styles from parent rule */
}

/* Price input with currency symbol - 2.3em left; 12px right so value has visible space */
.sales-items-table .item-input-price {
    /* Inherits absolute positioning from general rule (like quantity input) */
    padding: 2px 12px 2px 2.3em !important; /* !important overrides base .sales-items-table input padding: 4px 6px */
    text-align: right;
    border: 1px solid transparent; /* Border always present, transparent by default */
    background: transparent; /* Transparent by default, like v2_01 */
    box-sizing: border-box;
    transition: background 0.2s, border-color 0.2s;
}

/* General item-input-price rule for non-table contexts */
.item-input-price {
    padding: 2px 12px 2px 2.3em;
    text-align: right;
    border: 1px solid transparent; /* Border always present, transparent by default */
    background: transparent; /* Transparent by default, like v2_01 */
    box-sizing: border-box;
    transition: background 0.2s, border-color 0.2s;
}

.sales-items-table .item-input-price:focus {
    background: var(--background-card, #ffffff);
    border-color: var(--brand-color, rgb(175, 100, 100)); /* Change border color on focus */
    border-width: 1px; /* Keep same width as default */
    outline: none;
}

.item-input-price:focus {
    background: var(--background-card, #ffffff);
    border: 1.5px solid var(--brand-color, rgb(175, 100, 100));
    outline: none;
}

/* Dark theme for price input */
[data-theme="dark"] .sales-items-table .item-input-price {
    background: transparent; /* Transparent by default in dark theme too */
    color: #e0e0e0;
}

[data-theme="dark"] .sales-items-table .item-input-price:focus {
    background: #2a2a2a; /* Background only on focus */
    color: #e0e0e0;
}

[data-theme="dark"] .item-input-price {
    background: var(--background-white, #1a1a1a);
    color: #e0e0e0;
}

[data-theme="dark"] .item-input-price:focus {
    background: #2a2a2a;
    color: #e0e0e0;
}

/* Remove number input spinner for price input */
.item-input-price::-webkit-outer-spin-button,
.item-input-price::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.item-input-price[type=number] {
    -moz-appearance: textfield;
}

/* Hide number input arrows for lead time only */
input[name="leadtimeinweeks"]::-webkit-outer-spin-button,
input[name="leadtimeinweeks"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[name="leadtimeinweeks"][type=number] {
    -moz-appearance: textfield;
}

/* Dark theme: Style number input arrows if they're visible (for browsers that don't hide them) */
[data-theme="dark"] input[type="number"]::-webkit-inner-spin-button,
[data-theme="dark"] input[type="number"]::-webkit-outer-spin-button {
    filter: invert(1) brightness(0.8); /* Make arrows visible on dark background */
    opacity: 0.7;
}

[data-theme="dark"] input[type="number"]::-webkit-inner-spin-button:hover,
[data-theme="dark"] input[type="number"]::-webkit-outer-spin-button:hover {
    opacity: 1;
}

.price-flex {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* Delivery flex container (used in summary section, not table) */
.delivery-flex {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

/* Currency symbol for price input (absolute positioned relative to td) */
.sales-items-table td.price-col .currency-symbol {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    color: var(--text-dark, #495057);
    pointer-events: none;
    z-index: 20;
}

/* Currency symbol for total column (absolute positioned like price) */
.sales-items-table td.total-col .currency-symbol {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    color: #c00;
    z-index: 10;
}

/* Currency symbol for delivery (still uses flex layout in summary section) */
/* Delivery flex currency symbol - for table context (if used) */
.delivery-flex .currency-symbol {
    position: static; /* Not absolute - flows with flex layout */
    font-weight: normal; /* Match summary row styling */
    color: inherit; /* Match text color */
    flex-shrink: 0; /* Prevent shrinking */
}

/* Dark theme for currency symbols */
[data-theme="dark"] .sales-items-table td.price-col .currency-symbol {
    color: #e0e0e0;
}

[data-theme="dark"] .sales-items-table td.total-col .currency-symbol {
    color: #ff6b6b; /* Match total text color in dark mode */
}

[data-theme="dark"] .delivery-flex .currency-symbol {
    color: inherit; /* Match text color of other summary rows in dark mode */
}

/* Currency symbol after amount (e.g. EUR: 10 €) - sales edit page only */
#edit-page.currency-symbol-after .sales-items-table td.price-col .currency-symbol {
    left: auto;
    right: 12px;
    top: calc(50% + 1px); /* Nudge down so symbol aligns with input text (not cell center) */
}

#edit-page.currency-symbol-after .sales-items-table .item-input-price,
#edit-page.currency-symbol-after .item-input-price {
    padding: 2px 2.3em 2px 12px !important; /* Ensure gap between number and symbol (overrides base input padding) */
    text-align: left; /* Value left, symbol right */
}

#edit-page.currency-symbol-after .sales-items-table td.total-col .currency-symbol {
    left: auto;
    right: 12px;
}

#edit-page.currency-symbol-after .sales-items-table td.total-col .item-total {
    padding-left: 0;     /* Value 12px from left (cell padding only, like we did for right when symbol left) */
    padding-right: 2.3em;
    text-align: left;    /* Value left, symbol right (match price each) */
}

#edit-page.currency-symbol-after .summary-value {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 12px;   /* Match table value side */
    padding-right: 2.3em; /* Match table symbol side */
}
#edit-page.currency-symbol-after .summary-value #subtotal,
#edit-page.currency-symbol-after .summary-value #vat-amount,
#edit-page.currency-symbol-after .summary-value #total {
    text-align: left; /* Left-justify value when it is the left-hand element */
}
#edit-page.currency-symbol-after .summary-value .delivery-input {
    text-align: left; /* Match other summary values when symbol after */
}

#edit-page.currency-symbol-after .summary-value .currency-symbol {
    left: auto;
    right: 0;
}

[data-theme="dark"] #edit-page.currency-symbol-after .sales-items-table td.price-col .currency-symbol {
    color: #e0e0e0;
}

[data-theme="dark"] #edit-page.currency-symbol-after .sales-items-table td.total-col .currency-symbol,
[data-theme="dark"] #edit-page.currency-symbol-after .sales-items-table td.total-col .item-total {
    color: #ff6b6b;
}

/* ============================================
   Drag and Drop Styles
   ============================================ */

.drag-handle {
    cursor: move;
    color: var(--text-muted, #6c757d);
    font-size: 16px;
    user-select: none;
    position: relative;
    z-index: 20;
    pointer-events: auto;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    outline: none;
}

.drag-handle:hover {
    color: var(--brand-color, #007bff);
}

/* Dark theme for drag handle */
[data-theme="dark"] .drag-handle {
    color: var(--text-muted, #b0b0b0);
}

[data-theme="dark"] .drag-handle:hover {
    color: var(--brand-color, rgb(175, 100, 100));
}

/* Drag clone styling - ensure it never gets stuck */
[data-drag-clone="true"] {
    position: fixed !important;
    z-index: 2147483647 !important;
    pointer-events: none !important;
    isolation: isolate !important;
    will-change: transform !important;
    touch-action: none !important;
}

[data-drag-clone="true"] * {
    pointer-events: none !important;
    user-select: none !important;
}

/* Dragged row borders - move to table, remove all cell borders */
/* Override all existing border rules with !important */
table[data-drag-clone="true"].sales-items-table,
table[data-drag-clone="true"] {
    /* Remove all borders first */
    border: none !important;
    /* Add only top and bottom dashed borders */
    border-top: 2px dashed rgb(175, 100, 100) !important;
    border-bottom: 2px dashed rgb(175, 100, 100) !important;
    border-left: none !important;
    border-right: none !important;
}

/* Remove ALL borders from cells in dragged table */
table[data-drag-clone="true"].sales-items-table tbody tr td,
table[data-drag-clone="true"] tbody tr td,
table[data-drag-clone="true"].sales-items-table tbody tr,
table[data-drag-clone="true"] tbody tr {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}

.drag-placeholder {
    visibility: visible !important;
    background-color: rgba(175, 100, 100, 0.4) !important;
    border-top: 2px dashed rgb(175, 100, 100) !important;
    border-bottom: 2px dashed rgb(175, 100, 100) !important;
    border-left: none !important;
    border-right: none !important;
    opacity: 1 !important;
    display: table-row !important;
    position: relative !important;
    /* Height will be set inline by JavaScript */
}

/* Ensure placeholder is visible even if inside table - override all row styles */
.sales-items-table .drag-placeholder,
.sales-items-table tbody .drag-placeholder,
.sales-items-table tbody tr.drag-placeholder {
    background-color: rgba(175, 100, 100, 0.4) !important;
    border-top: 2px dashed rgb(175, 100, 100) !important;
    border-bottom: 2px dashed rgb(175, 100, 100) !important;
    border-left: none !important;
    border-right: none !important;
}

/* Override alternating row colors for placeholder */
.sales-items-table tbody tr.drag-placeholder:nth-child(even),
.sales-items-table tbody tr.drag-placeholder:nth-child(odd) {
    background-color: rgba(175, 100, 100, 0.4) !important;
}

/* Make placeholder cells visible - show the colored background */
/* Override alternating row cell backgrounds with higher specificity */
.drag-placeholder td,
.sales-items-table .drag-placeholder td,
.sales-items-table tbody tr.drag-placeholder td,
.sales-items-table tbody tr.drag-placeholder:nth-child(even) td,
.sales-items-table tbody tr.drag-placeholder:nth-child(odd) td,
.sales-items-table tbody tr.drag-placeholder:nth-child(even):not(.add-row) td,
.sales-items-table tbody tr.drag-placeholder:nth-child(odd):not(.add-row) td {
    pointer-events: none !important;
    visibility: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background-color: rgba(175, 100, 100, 0.4) !important; /* Override alternating row colors */
    min-height: 1px !important; /* Ensure cells have height */
    /* Height will be set inline by JavaScript */
}

/* ============================================
   Actions
   ============================================ */

.actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Actions div inside table cell - fill the cell (td stays normal table cell, no flex) */
.sales-items-table td.actions-col .actions {
    width: 100%;
    min-height: 100%;
}

/* Action buttons in sales table - no border, pointer cursor */
.sales-items-table .delete-item,
.sales-items-table #add-item-btn {
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

/* Delete button (trash icon) - match v2_01 styling */
.sales-items-table .delete-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 4px 8px;
}

.sales-items-table .delete-item .fa-trash {
    color: #c00;
    font-size: 1.1em;
}

.sales-items-table .delete-item:hover .fa-trash {
    color: #a00;
}

/* Add button - brand colors */
.sales-items-table #add-item-btn {
    background-color: var(--brand-color, rgb(175, 100, 100));
    color: #fff;
    padding: 6px 18px;
    border-radius: 3px;
    font-weight: bold;
    font-size: 15px;
}

.sales-items-table #add-item-btn:hover {
    background-color: #7e3333;
}

/* ============================================
   Save Indicators
   ============================================ */

.save-indicator {
    font-size: 12px;
    font-weight: 600;
    color: #28a745;
    margin-left: 8px;
}

.row-save-indicator {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #28a745;
}

#item-save-indicator {
    margin-bottom: 8px;
    color: var(--brand-color, #007bff);
    font-weight: bold;
}

/* Dark theme for save indicator */
[data-theme="dark"] #item-save-indicator {
    color: var(--brand-color, rgb(175, 100, 100));
}

/* ============================================
   Notes Section
   ============================================ */

.notes h3,
.summary h3 {
    margin-bottom: 6px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark, #495057);
}

.sales-notes-summary textarea {
    width: 100%;
    height: 80px;
    border: 1px solid var(--border-color, #ccc);
    padding: 8px;
    resize: vertical;
    font-size: 15px;
    font-family: inherit;
    background-color: var(--background-card, #ffffff);
    color: var(--text-dark, #333);
}

#notes {
    width: 100%;
    min-height: 80px;
    padding: 8px;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 4px;
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    background-color: var(--background-card, #ffffff);
    color: var(--text-dark, #333);
}

#notes:focus {
    outline: none;
    border-color: var(--brand-color, rgb(175, 100, 100));
    box-shadow: 0 0 0 2px var(--brand-color-light, rgba(175, 100, 100, 0.1));
}

#save-notes-btn {
    margin-top: 10px;
    background: var(--brand-color, #007bff);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 2px 4px var(--shadow-color, rgba(0, 0, 0, 0.1));
}

#save-notes-btn:hover {
    background: var(--brand-color-hover, rgba(0, 123, 255, 0.8));
    transform: translateY(-1px);
    box-shadow: 0 4px 6px var(--shadow-color, rgba(0, 0, 0, 0.15));
}

#save-notes-btn:active {
    transform: translateY(0);
}

/* ============================================
   Financial Summary
   ============================================ */

.summary-box {
    background: var(--background-light, #f8f9fa);
    padding: 15px;
    border-radius: 5px;
    width: 100%;
    text-align: right;
    border: 1px solid var(--border-color, #dee2e6);
    color: var(--text-dark, #333);
}

/* Dark theme for summary box */
[data-theme="dark"] .summary-box {
    background: var(--background-white, #1a1a1a);
    border-color: var(--border-color, #333333);
    color: var(--text-dark, #f5f5f5);
}

.sales-notes-summary .summary-box > div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    width: 100%;
}

/* Summary row styling for consistent alignment */
.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    width: 100%;
}

/* Summary value container for right-aligned currency and amounts */
.summary-value {
    position: relative;
    display: inline-block;
    text-align: right;
    width: 120px; /* Match table .total-col / .price-col so all rows align */
    min-width: 120px;
    box-sizing: border-box;
    padding-left: 2.3em; /* Match table symbol side */
    padding-right: 12px; /* Match table value side */
}

/* Symbol-left (e.g. USD): match table cell padding – 12px then symbol then value */
#edit-page:not(.currency-symbol-after) .summary-value {
    padding-left: calc(12px + 2.3em);
}
#edit-page:not(.currency-symbol-after) .summary-value .currency-symbol {
    left: 12px;
}

/* Currency symbol in summary - absolutely positioned for consistent alignment */
.summary-value .currency-symbol {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-weight: normal;
    color: inherit;
    font-size: 15px;
    width: 1.2em; /* Fixed width for consistent alignment */
    text-align: left; /* Left-justify symbol when it is the left-hand element */
}

/* Total row currency symbol should match the total line styling */
.total .summary-value .currency-symbol {
    font-weight: bold; /* Match the bold weight of the total line */
    font-size: inherit; /* Match the font size of the total line (1.15em) */
    color: inherit; /* Match the color of the total line */
}

/* Inline base-conversion overlay (replaces tooltip): show base amount on hover */
td.price-col,
td.total-col,
.summary-value:has(.base-hover-overlay) {
    position: relative;
}

.base-hover-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding: inherit;
    font: inherit;
    font-weight: inherit;
    color: inherit;
    background: inherit;
    pointer-events: none;
}

/* Table cells: overlay padding matches cell only (12px), no extra 4px like item-total value span */
td.total-col .base-hover-overlay {
    padding: 2px 12px 2px 12px;
}
/* Price cell: +1px right so overlay aligns with input (input has 1px border inside box, content sits 1px in) */
td.price-col .base-hover-overlay {
    padding: 2px 13px 2px 12px;
}

#edit-page.currency-symbol-after td.total-col .base-hover-overlay {
    padding: 2px 12px 2px 12px;
}
#edit-page.currency-symbol-after td.price-col .base-hover-overlay {
    padding: 2px 12px 2px 13px;
}

/* Overlay always shows base currency (e.g. GBP) so always symbol first; do not apply row-reverse */
td.price-col:hover .base-hover-overlay,
td.total-col:hover .base-hover-overlay,
.summary-value:hover .base-hover-overlay {
    display: flex;
}

/* Summary overlay: left padding to match unhovered state; value side 12px */
.summary-value .base-hover-overlay {
    padding: 2px 12px 2px 12px;
}
/* Overlay symbol: fixed-width slot at left, left-justified */
.summary-value .base-hover-overlay .base-overlay-symbol {
    width: 2.3em;
    min-width: 2.3em;
    text-align: left;
    flex-shrink: 0;
}
/* Summary overlay: right-hand element (value) right-justified */
.summary-value .base-hover-overlay .base-overlay-value {
    flex: 1;
    text-align: right;
    min-width: 0;
}

/* On hover, hide main content so only overlay shows. Only when overlay is visible (input not focused). */
td.price-col:hover:has(.base-hover-overlay):not(:has(.item-input-price:focus)) .currency-symbol {
    visibility: hidden;
}
td.price-col:hover:has(.base-hover-overlay):not(:has(.item-input-price:focus)) .item-input-price {
    opacity: 0;
}
td.total-col:hover:has(.base-hover-overlay) .currency-symbol,
td.total-col:hover:has(.base-hover-overlay) .item-total {
    visibility: hidden;
}

/* Financial summary: hide main content on hover; delivery input stays clickable via opacity */
.summary-value:hover:has(.base-hover-overlay) .currency-symbol,
.summary-value:hover:has(.base-hover-overlay) #subtotal,
.summary-value:hover:has(.base-hover-overlay) #vat-amount,
.summary-value:hover:has(.base-hover-overlay) #total {
    visibility: hidden;
}
.summary-value:hover:has(.base-hover-overlay):not(:has(#delivery_cost:focus)) #delivery_cost {
    opacity: 0;
}

td.price-col:has(.item-input-price:focus) .base-hover-overlay,
.summary-value:has(#delivery_cost:focus) .base-hover-overlay {
    display: none;
}

td.price-col:hover:has(.base-hover-overlay),
td.total-col:hover:has(.base-hover-overlay),
.summary-value:hover:has(.base-hover-overlay) {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] td.price-col:hover:has(.base-hover-overlay),
[data-theme="dark"] td.total-col:hover:has(.base-hover-overlay),
[data-theme="dark"] .summary-value:hover:has(.base-hover-overlay) {
    background: rgba(255, 255, 255, 0.06);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    align-items: center;
    width: 100%;
}

.vat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding-bottom: 0;
    border-bottom: none;
    width: 100%;
}

.vat-row label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vat-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--brand-color, rgb(175, 100, 100));
}

.vat-row select {
    min-width: 180px;
    padding: 4px 8px;
    font-size: 14px;
    border: 1px solid var(--border-color, #dee2e6);
    background: var(--background-card, #ffffff);
    color: var(--text-dark, #333);
    border-radius: 4px;
}

.vat-row select:focus {
    border-color: var(--brand-color, rgb(175, 100, 100));
    outline: none;
}

/* Dark theme for vat-row select */
[data-theme="dark"] .vat-row select {
    border-color: var(--text-muted, #b0b0b0);
    background: var(--background-white, #1a1a1a);
    color: var(--text-dark, #e0e0e0);
}

[data-theme="dark"] .vat-row select:focus {
    background: #2a2a2a;
    border-color: var(--brand-color, rgb(175, 100, 100));
}

.delivery-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    width: 100%;
}

.delivery-input-wrapper,
.delivery-flex {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

.delivery-input {
    width: 60px; /* Narrower width to fit inline with currency symbol */
    text-align: right;
    border: 1px solid transparent; /* Transparent border by default to match other inputs */
    background: transparent; /* Transparent background by default to match other summary rows */
    font-size: 15px;
    padding: 0; /* No padding to match inline text appearance */
    margin: 0; /* No margin - currency symbol is absolutely positioned */
    box-sizing: border-box;
    transition: background 0.2s, border-color 0.2s;
    color: inherit; /* Match text color of other summary rows */
    display: inline-block; /* Inline with currency symbol */
    vertical-align: baseline; /* Align with text */
    min-width: 50px; /* Minimum width for usability */
}

.delivery-input:focus {
    background: var(--background-card, #ffffff);
    border-color: var(--brand-color, rgb(175, 100, 100));
    outline: none;
}

/* Dark theme for delivery input */
[data-theme="dark"] .delivery-input {
    background: transparent;
    color: inherit;
}

[data-theme="dark"] .delivery-input:focus {
    background: #2a2a2a; /* Background only on focus in dark theme */
    border-color: var(--brand-color, rgb(175, 100, 100));
}

/* Hide number input arrows for delivery input */
input[type="number"].delivery-input::-webkit-outer-spin-button,
input[type="number"].delivery-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"].delivery-input[type=number] {
    -moz-appearance: textfield;
}

.delivery-flex .currency-symbol {
    position: static; /* Not absolute - flows with flex layout (matches total-flex) */
    color: inherit; /* Match text color of other summary rows */
    font-size: 15px;
    font-weight: normal; /* Match weight of other summary rows (not bold) */
    flex-shrink: 0; /* Prevent shrinking */
    font-family: inherit;
}

.sales-notes-summary .summary-box .total {
    font-weight: bold;
    font-size: 1.15em;
    border-top: 1px solid var(--border-color, #ccc);
    padding-top: 5px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
}

.total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 5px;
    border-top: 1px solid var(--border-color, #ccc);
    font-weight: bold;
    font-size: 1.15em;
    color: var(--text-dark, #333);
}

.total span:last-child,
.total .summary-value {
    font-weight: bold; /* Ensure all parts of total line are bold */
    color: var(--text-dark, #333);
}

/* ============================================
   Autocomplete Styles
   ============================================ */

.autocomplete-dropdown {
    position: fixed;
    background: var(--background-card, #ffffff);
    border: 1px solid var(--border-color, #ced4da);
    border-radius: 4px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 10000;
    box-shadow: 0 4px 6px var(--shadow-color, rgba(0, 0, 0, 0.1));
    color: var(--text-dark, #333333);
}

.autocomplete-option {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-dark, #333333);
    transition: background-color 0.15s ease;
}

.autocomplete-option:hover,
.autocomplete-option.highlighted {
    background-color: var(--brand-color-lighter, rgba(175, 100, 100, 0.08));
    color: var(--text-dark, #333333);
}

[data-theme="dark"] .autocomplete-option:hover,
[data-theme="dark"] .autocomplete-option.highlighted {
    background-color: var(--brand-color-light, rgba(175, 100, 100, 0.25));
}

.autocomplete-option:last-child {
    border-bottom: none;
}

/* ============================================
   Page Header
   ============================================ */

.page-header {
    margin-bottom: 20px;
}

.page-header h1 {
    font-size: 28px;
    color: var(--text-dark, #495057);
    margin: 0;
}

.content-section {
    background: var(--background-card, #ffffff);
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px var(--shadow-color, rgba(0, 0, 0, 0.1));
}

.content-section h2 {
    font-size: 20px;
    color: var(--text-dark, #495057);
    margin-bottom: 15px;
}

/* Dark mode adjustments for page elements */
[data-theme="dark"] .page-header h1 {
    color: var(--text-dark, #f5f5f5);
}

[data-theme="dark"] .content-section {
    background: var(--background-card, #1e1e1e);
}

[data-theme="dark"] .content-section h2 {
    color: var(--text-dark, #f5f5f5);
}

/* ============================================
   Update Button
   ============================================ */

button[type="submit"][form="edit-record"] {
    background-color: var(--brand-color, #007bff);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin-top: 12px;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 2px 4px var(--shadow-color, rgba(0, 0, 0, 0.1));
}

button[type="submit"][form="edit-record"]:hover {
    background-color: var(--brand-color-hover, rgba(0, 123, 255, 0.8));
    transform: translateY(-1px);
    box-shadow: 0 4px 6px var(--shadow-color, rgba(0, 0, 0, 0.15));
}

button[type="submit"][form="edit-record"]:active {
    transform: translateY(0);
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 768px) {
    .top-sections {
        flex-direction: column;
    }
    
    .sales-notes-summary {
        flex-direction: column;
    }
    
    .sales-items-table {
        font-size: 12px;
    }
    
    .sales-items-table th {
        padding: 10px 4px !important;
    }
    .sales-items-table td {
        padding: 6px 4px;
    }
    
    .details-col {
        min-width: 200px;
    }
}

/* ============================================
   Button Styles
   ============================================ */

.button-primary {
    background-color: var(--brand-color, #af6464);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease;
}

.button-primary:hover {
    background-color: rgba(175, 100, 100, 0.9);
}

.button-primary:active {
    background-color: rgba(175, 100, 100, 0.8);
}

.button-secondary {
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease;
}

.button-secondary:hover {
    background-color: #5a6268;
}

.button-danger {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.button-danger:hover {
    background-color: #c82333;
}

.button-danger-icon {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.2s ease;
}

.button-danger-icon:hover {
    background-color: #c82333;
}

/* ============================================
   Utility Classes
   ============================================ */

.hidden {
    display: none !important;
}

.mt-2 {
    margin-top: 8px;
}

.mt-4 {
    margin-top: 16px;
}

.text-muted {
    color: var(--text-muted, #6c757d);
}

/* Dark theme for text-muted */
[data-theme="dark"] .text-muted {
    color: var(--text-muted, #b0b0b0);
}

/* ============================================
   Autocomplete Section Styles
   ============================================ */

.autocomplete-section {
    border-bottom: 1px solid #e0e0e0;
}

.autocomplete-section:last-child {
    border-bottom: none;
}

.autocomplete-section-header {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #6c757d;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    letter-spacing: 0.5px;
}

.autocomplete-item-label {
    font-weight: 500;
}

.autocomplete-item-company {
    font-size: 11px;
    color: #6c757d;
    margin-top: 2px;
}

[data-theme="dark"] .autocomplete-section-header {
    background-color: #2d2d2d;
    color: #b0b0b0;
    border-bottom-color: #404040;
}

[data-theme="dark"] .autocomplete-section {
    border-bottom-color: #404040;
}

/* ============================================
   Items Filter Section
   ============================================ */

.items-filter-section {
    background: var(--background-light, #f8f9fa);
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color, #dee2e6);
}

.items-filter-form {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: 15px;
    align-items: end;
}

.filter-field {
    display: flex;
    flex-direction: column;
}

.filter-field-button {
    display: flex;
    align-items: flex-end;
}

.filter-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: var(--text-dark, #495057);
    font-size: 14px;
}

.filter-input,
.filter-select {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-color, #ced4da);
    border-radius: 4px;
    font-size: 14px;
    background: var(--background-card, #ffffff);
    color: var(--text-dark, #333333);
    font-family: inherit;
}

.filter-select-multiple {
    min-height: 38px;
}

.filter-input:focus,
.filter-select:focus {
    outline: none;
    border-color: var(--brand-color, #af6464);
    box-shadow: 0 0 0 2px rgba(175, 100, 100, 0.1);
}

/* Dark theme for filter section */
[data-theme="dark"] .items-filter-section {
    background: var(--background-card, #2d2d2d);
    border-color: var(--border-color, #404040);
}

[data-theme="dark"] .filter-label {
    color: var(--text-dark, #e0e0e0);
}

[data-theme="dark"] .filter-input,
[data-theme="dark"] .filter-select {
    background: var(--background-card, #1e1e1e);
    border-color: var(--border-color, #404040);
    color: var(--text-dark, #f5f5f5);
}

[data-theme="dark"] .filter-input::placeholder {
    color: var(--text-muted, #888);
}

[data-theme="dark"] .filter-input:focus,
[data-theme="dark"] .filter-select:focus {
    border-color: var(--brand-color, #af6464);
    box-shadow: 0 0 0 2px rgba(175, 100, 100, 0.2);
}

/* Multiple select styling for dark theme */
[data-theme="dark"] select[multiple],
[data-theme="dark"] .filter-select-multiple,
[data-theme="dark"] select.form-control[multiple] {
    background: var(--background-card, #1e1e1e) !important;
    border-color: var(--border-color, #404040) !important;
    color: var(--text-dark, #f5f5f5) !important;
}

[data-theme="dark"] select[multiple] option,
[data-theme="dark"] .filter-select-multiple option,
[data-theme="dark"] select.form-control[multiple] option {
    background: var(--background-card, #1e1e1e);
    color: var(--text-dark, #f5f5f5);
}

[data-theme="dark"] select[multiple] option:checked,
[data-theme="dark"] .filter-select-multiple option:checked,
[data-theme="dark"] select.form-control[multiple] option:checked {
    background: var(--brand-color, #af6464);
    color: #ffffff;
}

/* Scrollbar styling for multiple selects and autocomplete dropdown in dark theme */
[data-theme="dark"] select[multiple]::-webkit-scrollbar,
[data-theme="dark"] .filter-select-multiple::-webkit-scrollbar,
[data-theme="dark"] select.form-control[multiple]::-webkit-scrollbar,
[data-theme="dark"] .autocomplete-dropdown::-webkit-scrollbar {
    width: 12px;
    background: var(--background-card, #1e1e1e);
}

[data-theme="dark"] select[multiple]::-webkit-scrollbar-thumb,
[data-theme="dark"] .filter-select-multiple::-webkit-scrollbar-thumb,
[data-theme="dark"] select.form-control[multiple]::-webkit-scrollbar-thumb,
[data-theme="dark"] .autocomplete-dropdown::-webkit-scrollbar-thumb {
    background: var(--border-color, #404040);
    border-radius: 6px;
}

[data-theme="dark"] select[multiple]::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .filter-select-multiple::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] select.form-control[multiple]::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .autocomplete-dropdown::-webkit-scrollbar-thumb:hover {
    background: #505050;
}

/* Status badges */
.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}

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

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

[data-theme="dark"] .status-badge.status-active {
    background: #1e4d2e;
    color: #90ee90;
}

[data-theme="dark"] .status-badge.status-inactive {
    background: #4d1e1e;
    color: #ff6b6b;
}

/* Responsive filter form */
@media (max-width: 1200px) {
    .items-filter-form {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    
    .filter-field-button {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .items-filter-form {
        grid-template-columns: 1fr;
    }
}