/* =========================================================
   WONDER APP — VENDOR QUOTES
   File: vendor_app/assets/css/quotes.css

   Covers:
   - quotes/index.html
   - quotes/create.html
   - quotes/edit.html
   - quotes/detail.html
   - quotes/sent.html
   - quotes/pending.html
   - quotes/accepted.html
   - quotes/rejected.html
   - quotes/expired.html
   - quotes/history.html

   Design goals:
   - Production ready
   - Responsive
   - Accessible
   - Scoped selectors
   - Compatible with global component CSS
   - Supports quote lifecycle
   ========================================================= */


/* =========================================================
   1. LOCAL VARIABLES / FALLBACKS
   ========================================================= */

.quotes-page {
    --quotes-primary: var(--primary-color, var(--primary, #2563eb));
    --quotes-primary-dark: var(--primary-dark, #1d4ed8);
    --quotes-primary-light: var(--primary-light, #eff6ff);

    --quotes-success: var(--success-color, var(--success, #16a34a));
    --quotes-success-light: var(--success-light, #f0fdf4);

    --quotes-warning: var(--warning-color, var(--warning, #d97706));
    --quotes-warning-light: var(--warning-light, #fffbeb);

    --quotes-danger: var(--danger-color, var(--danger, #dc2626));
    --quotes-danger-light: var(--danger-light, #fef2f2);

    --quotes-info: var(--info-color, var(--info, #0284c7));
    --quotes-info-light: var(--info-light, #f0f9ff);

    --quotes-text: var(--text-primary, #111827);
    --quotes-text-secondary: var(--text-secondary, #4b5563);
    --quotes-text-muted: var(--text-muted, #6b7280);

    --quotes-bg: var(--background-color, var(--bg-color, #f8fafc));
    --quotes-surface: var(--surface-color, var(--card-bg, #ffffff));

    --quotes-border: var(--border-color, #e5e7eb);
    --quotes-border-light: var(--border-light, #eef2f7);

    --quotes-radius-sm: var(--radius-sm, 6px);
    --quotes-radius-md: var(--radius-md, 10px);
    --quotes-radius-lg: var(--radius-lg, 14px);
    --quotes-radius-xl: var(--radius-xl, 18px);

    --quotes-shadow-sm: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.05));
    --quotes-shadow-md: var(--shadow-md, 0 4px 14px rgba(15, 23, 42, 0.08));
    --quotes-shadow-lg: var(--shadow-lg, 0 12px 32px rgba(15, 23, 42, 0.12));

    --quotes-transition: var(
        --transition-normal,
        180ms ease
    );
}


/* =========================================================
   2. MAIN PAGE
   ========================================================= */

.quotes-page {
    width: 100%;
    min-width: 0;
    color: var(--quotes-text);
}

.quotes-container {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding: 24px;
}

.quotes-content {
    width: 100%;
}


/* =========================================================
   3. PAGE HEADER
   ========================================================= */

.quotes-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.quotes-header-content {
    min-width: 0;
}

.quotes-title {
    margin: 0;
    color: var(--quotes-text);
    font-size: 28px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.quotes-subtitle {
    margin: 7px 0 0;
    color: var(--quotes-text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.quotes-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    flex-shrink: 0;
}


/* =========================================================
   4. QUICK STATS
   ========================================================= */

.quotes-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.quotes-stat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    background: var(--quotes-surface);
    border: 1px solid var(--quotes-border);
    border-radius: var(--quotes-radius-lg);
    box-shadow: var(--quotes-shadow-sm);
    transition:
        transform var(--quotes-transition),
        box-shadow var(--quotes-transition),
        border-color var(--quotes-transition);
}

.quotes-stat-card:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.22);
    box-shadow: var(--quotes-shadow-md);
}

.quotes-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 12px;
    background: var(--quotes-primary-light);
    color: var(--quotes-primary);
}

.quotes-stat-icon svg,
.quotes-stat-icon i {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.quotes-stat-content {
    min-width: 0;
}

.quotes-stat-label {
    display: block;
    margin-bottom: 3px;
    color: var(--quotes-text-muted);
    font-size: 12px;
    font-weight: 600;
}

.quotes-stat-value {
    display: block;
    color: var(--quotes-text);
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
}

.quotes-stat-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    color: var(--quotes-text-muted);
    font-size: 11px;
    font-weight: 500;
}

.quotes-stat-change.is-positive {
    color: var(--quotes-success);
}

.quotes-stat-change.is-negative {
    color: var(--quotes-danger);
}


/* =========================================================
   5. STATUS STAT COLORS
   ========================================================= */

.quotes-stat-card.is-pending .quotes-stat-icon {
    background: var(--quotes-warning-light);
    color: var(--quotes-warning);
}

.quotes-stat-card.is-accepted .quotes-stat-icon {
    background: var(--quotes-success-light);
    color: var(--quotes-success);
}

.quotes-stat-card.is-rejected .quotes-stat-icon {
    background: var(--quotes-danger-light);
    color: var(--quotes-danger);
}

.quotes-stat-card.is-expired .quotes-stat-icon {
    background: #f3f4f6;
    color: #6b7280;
}


/* =========================================================
   6. QUOTE TOOLBAR
   ========================================================= */

.quotes-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    padding: 14px;
    background: var(--quotes-surface);
    border: 1px solid var(--quotes-border);
    border-radius: var(--quotes-radius-lg);
}

.quotes-toolbar-left,
.quotes-toolbar-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.quotes-toolbar-left {
    flex: 1 1 auto;
    min-width: 0;
}

.quotes-toolbar-right {
    flex: 0 0 auto;
}


/* =========================================================
   7. SEARCH
   ========================================================= */

.quotes-search {
    position: relative;
    width: min(360px, 100%);
}

.quotes-search-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 1;
    width: 17px;
    height: 17px;
    color: var(--quotes-text-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.quotes-search-input {
    width: 100%;
    min-height: 40px;
    padding: 9px 12px 9px 38px;
    color: var(--quotes-text);
    background: var(--quotes-surface);
    border: 1px solid var(--quotes-border);
    border-radius: var(--quotes-radius-md);
    outline: none;
    transition:
        border-color var(--quotes-transition),
        box-shadow var(--quotes-transition);
}

.quotes-search-input::placeholder {
    color: var(--quotes-text-muted);
}

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


/* =========================================================
   8. FILTERS
   ========================================================= */

.quotes-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.quotes-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.quotes-filter-label {
    color: var(--quotes-text-secondary);
    font-size: 12px;
    font-weight: 600;
}

.quotes-filter-select {
    min-height: 40px;
    min-width: 140px;
    padding: 8px 34px 8px 11px;
    color: var(--quotes-text);
    background-color: var(--quotes-surface);
    border: 1px solid var(--quotes-border);
    border-radius: var(--quotes-radius-md);
    outline: none;
    cursor: pointer;
}

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


/* =========================================================
   9. TABS
   ========================================================= */

.quotes-tabs-wrapper {
    margin-bottom: 18px;
    border-bottom: 1px solid var(--quotes-border);
}

.quotes-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.quotes-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 15px;
    color: var(--quotes-text-secondary);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color var(--quotes-transition),
        border-color var(--quotes-transition);
}

.quotes-tab:hover {
    color: var(--quotes-primary);
}

.quotes-tab.is-active {
    color: var(--quotes-primary);
    border-bottom-color: var(--quotes-primary);
}

.quotes-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding-inline: 6px;
    border-radius: 999px;
    background: #f3f4f6;
    color: var(--quotes-text-muted);
    font-size: 10px;
    font-weight: 700;
}

.quotes-tab.is-active .quotes-tab-count {
    background: var(--quotes-primary-light);
    color: var(--quotes-primary);
}


/* =========================================================
   10. QUOTE LIST
   ========================================================= */

.quotes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quotes-list-card {
    overflow: hidden;
    background: var(--quotes-surface);
    border: 1px solid var(--quotes-border);
    border-radius: var(--quotes-radius-lg);
    box-shadow: var(--quotes-shadow-sm);
}


/* =========================================================
   11. QUOTE TABLE
   ========================================================= */

.quotes-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--quotes-border);
    border-radius: var(--quotes-radius-lg);
    background: var(--quotes-surface);
    box-shadow: var(--quotes-shadow-sm);
}

.quotes-table {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
}

.quotes-table thead th {
    padding: 13px 15px;
    color: var(--quotes-text-muted);
    background: #f8fafc;
    border-bottom: 1px solid var(--quotes-border);
    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.quotes-table tbody td {
    padding: 15px;
    color: var(--quotes-text-secondary);
    background: var(--quotes-surface);
    border-bottom: 1px solid var(--quotes-border-light);
    font-size: 13px;
    vertical-align: middle;
}

.quotes-table tbody tr:last-child td {
    border-bottom: 0;
}

.quotes-table tbody tr {
    transition: background var(--quotes-transition);
}

.quotes-table tbody tr:hover td {
    background: #fafcff;
}

.quotes-table tbody tr.is-selected td {
    background: var(--quotes-primary-light);
}


/* =========================================================
   12. TABLE CHECKBOX
   ========================================================= */

.quotes-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.quotes-checkbox input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--quotes-primary);
    cursor: pointer;
}


/* =========================================================
   13. QUOTE ID
   ========================================================= */

.quotes-id {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--quotes-primary);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.quotes-id:hover {
    text-decoration: underline;
}

.quotes-id-code {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
}


/* =========================================================
   14. QUOTE SUBJECT
   ========================================================= */

.quotes-subject {
    max-width: 320px;
    color: var(--quotes-text);
    font-weight: 650;
}

.quotes-subject a {
    color: inherit;
    text-decoration: none;
}

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

.quotes-subject-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quotes-subject-preview {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--quotes-text-muted);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   15. CUSTOMER
   ========================================================= */

.quotes-customer {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

.quotes-customer-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--quotes-primary-light);
    color: var(--quotes-primary);
    font-size: 12px;
    font-weight: 700;
}

.quotes-customer-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quotes-customer-info {
    min-width: 0;
}

.quotes-customer-name {
    display: block;
    overflow: hidden;
    color: var(--quotes-text);
    font-size: 13px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quotes-customer-meta {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: var(--quotes-text-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   16. QUOTE AMOUNT
   ========================================================= */

.quotes-amount {
    color: var(--quotes-text);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.quotes-amount-label {
    display: block;
    margin-bottom: 2px;
    color: var(--quotes-text-muted);
    font-size: 10px;
    font-weight: 500;
}

.quotes-amount.is-success {
    color: var(--quotes-success);
}

.quotes-amount.is-warning {
    color: var(--quotes-warning);
}


/* =========================================================
   17. QUOTE DATE / VALIDITY
   ========================================================= */

.quotes-date {
    color: var(--quotes-text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

.quotes-date-label {
    display: block;
    margin-bottom: 3px;
    color: var(--quotes-text-muted);
    font-size: 10px;
}

.quotes-validity {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}

.quotes-validity.is-expiring {
    color: var(--quotes-warning);
}

.quotes-validity.is-expired {
    color: var(--quotes-danger);
}


/* =========================================================
   18. STATUS BADGES
   ========================================================= */

.quotes-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #f3f4f6;
    color: var(--quotes-text-secondary);
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
}

.quotes-status::before {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.quotes-status.is-draft {
    background: #f3f4f6;
    color: #6b7280;
}

.quotes-status.is-sent {
    background: var(--quotes-info-light);
    color: var(--quotes-info);
}

.quotes-status.is-pending {
    background: var(--quotes-warning-light);
    color: var(--quotes-warning);
}

.quotes-status.is-accepted {
    background: var(--quotes-success-light);
    color: var(--quotes-success);
}

.quotes-status.is-rejected {
    background: var(--quotes-danger-light);
    color: var(--quotes-danger);
}

.quotes-status.is-expired {
    background: #f3f4f6;
    color: #6b7280;
}

.quotes-status.is-cancelled {
    background: #fef2f2;
    color: #b91c1c;
}


/* =========================================================
   19. ACTIONS
   ========================================================= */

.quotes-actions-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.quotes-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--quotes-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--quotes-radius-sm);
    cursor: pointer;
    transition:
        color var(--quotes-transition),
        background var(--quotes-transition),
        border-color var(--quotes-transition);
}

.quotes-action-btn:hover {
    color: var(--quotes-primary);
    background: var(--quotes-primary-light);
    border-color: rgba(37, 99, 235, 0.1);
}

.quotes-action-btn.is-danger:hover {
    color: var(--quotes-danger);
    background: var(--quotes-danger-light);
}

.quotes-action-btn svg,
.quotes-action-btn i {
    width: 16px;
    height: 16px;
    font-size: 16px;
}


/* =========================================================
   20. DROPDOWN ACTION MENU
   ========================================================= */

.quotes-action-menu {
    position: relative;
}

.quotes-action-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    width: 190px;
    padding: 6px;
    background: var(--quotes-surface);
    border: 1px solid var(--quotes-border);
    border-radius: var(--quotes-radius-md);
    box-shadow: var(--quotes-shadow-lg);
}

.quotes-action-dropdown[hidden] {
    display: none;
}

.quotes-action-menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    color: var(--quotes-text-secondary);
    background: transparent;
    border: 0;
    border-radius: var(--quotes-radius-sm);
    font-size: 12px;
    font-weight: 550;
    text-align: left;
    cursor: pointer;
}

.quotes-action-menu-item:hover {
    background: #f8fafc;
    color: var(--quotes-text);
}

.quotes-action-menu-item.is-danger {
    color: var(--quotes-danger);
}

.quotes-action-menu-item.is-danger:hover {
    background: var(--quotes-danger-light);
}


/* =========================================================
   21. BULK ACTION BAR
   ========================================================= */

.quotes-bulkbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--quotes-primary-light);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: var(--quotes-radius-md);
}

.quotes-bulkbar-info {
    color: var(--quotes-primary);
    font-size: 12px;
    font-weight: 650;
}

.quotes-bulkbar-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}


/* =========================================================
   22. QUOTE CARD VIEW
   ========================================================= */

.quotes-card {
    display: flex;
    flex-direction: column;
    background: var(--quotes-surface);
    border: 1px solid var(--quotes-border);
    border-radius: var(--quotes-radius-lg);
    box-shadow: var(--quotes-shadow-sm);
    overflow: hidden;
    transition:
        transform var(--quotes-transition),
        box-shadow var(--quotes-transition),
        border-color var(--quotes-transition);
}

.quotes-card:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.18);
    box-shadow: var(--quotes-shadow-md);
}

.quotes-card.is-selected {
    border-color: var(--quotes-primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
}

.quotes-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    border-bottom: 1px solid var(--quotes-border-light);
}

.quotes-card-body {
    padding: 16px;
}

.quotes-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #fafbfc;
    border-top: 1px solid var(--quotes-border-light);
}

.quotes-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 20px;
}


/* =========================================================
   23. QUOTE META
   ========================================================= */

.quotes-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.quotes-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--quotes-text-secondary);
    font-size: 11px;
}

.quotes-meta-item svg,
.quotes-meta-item i {
    color: var(--quotes-text-muted);
    font-size: 13px;
}


/* =========================================================
   24. CREATE / EDIT QUOTE
   ========================================================= */

.quotes-form {
    width: 100%;
}

.quotes-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: start;
    gap: 20px;
}

.quotes-form-main,
.quotes-form-sidebar {
    min-width: 0;
}

.quotes-form-section {
    margin-bottom: 18px;
    padding: 20px;
    background: var(--quotes-surface);
    border: 1px solid var(--quotes-border);
    border-radius: var(--quotes-radius-lg);
    box-shadow: var(--quotes-shadow-sm);
}

.quotes-form-section:last-child {
    margin-bottom: 0;
}

.quotes-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 17px;
}

.quotes-section-title {
    margin: 0;
    color: var(--quotes-text);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
}

.quotes-section-description {
    margin: 4px 0 0;
    color: var(--quotes-text-muted);
    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   25. CUSTOMER SELECTOR
   ========================================================= */

.quotes-customer-selector {
    position: relative;
}

.quotes-customer-select-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 8px 12px;
    background: var(--quotes-surface);
    border: 1px solid var(--quotes-border);
    border-radius: var(--quotes-radius-md);
}

.quotes-selected-customer {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.quotes-selected-customer-info {
    min-width: 0;
}

.quotes-selected-customer-name {
    display: block;
    color: var(--quotes-text);
    font-size: 13px;
    font-weight: 650;
}

.quotes-selected-customer-meta {
    display: block;
    margin-top: 2px;
    color: var(--quotes-text-muted);
    font-size: 11px;
}


/* =========================================================
   26. QUOTE ITEMS
   ========================================================= */

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

.quotes-item {
    display: grid;
    grid-template-columns:
        minmax(190px, 2fr)
        minmax(90px, 0.7fr)
        minmax(100px, 0.8fr)
        minmax(110px, 0.9fr)
        38px;
    align-items: end;
    gap: 10px;
    padding: 13px;
    background: #fafbfc;
    border: 1px solid var(--quotes-border-light);
    border-radius: var(--quotes-radius-md);
}

.quotes-item-header {
    display: grid;
    grid-template-columns:
        minmax(190px, 2fr)
        minmax(90px, 0.7fr)
        minmax(100px, 0.8fr)
        minmax(110px, 0.9fr)
        38px;
    gap: 10px;
    padding: 0 13px 6px;
}

.quotes-item-header span {
    color: var(--quotes-text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.quotes-item-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 38px;
    color: var(--quotes-danger);
    background: var(--quotes-danger-light);
    border: 1px solid rgba(220, 38, 38, 0.08);
    border-radius: var(--quotes-radius-sm);
    cursor: pointer;
}

.quotes-item-remove:hover {
    background: #fee2e2;
}


/* =========================================================
   27. QUOTE TOTALS
   ========================================================= */

.quotes-totals {
    margin-top: 16px;
    margin-left: auto;
    width: min(390px, 100%);
}

.quotes-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 7px 0;
    color: var(--quotes-text-secondary);
    font-size: 13px;
}

.quotes-total-row + .quotes-total-row {
    border-top: 1px dashed var(--quotes-border-light);
}

.quotes-total-label {
    color: var(--quotes-text-secondary);
}

.quotes-total-value {
    color: var(--quotes-text);
    font-weight: 600;
}

.quotes-total-row.is-grand-total {
    margin-top: 6px;
    padding-top: 13px;
    color: var(--quotes-text);
    border-top: 1px solid var(--quotes-border);
    font-size: 15px;
    font-weight: 700;
}

.quotes-total-row.is-grand-total .quotes-total-value {
    color: var(--quotes-primary);
    font-size: 18px;
}


/* =========================================================
   28. NOTES / TERMS
   ========================================================= */

.quotes-notes-box {
    min-height: 100px;
}

.quotes-terms-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.quotes-term-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--quotes-text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

.quotes-term-item::before {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--quotes-primary);
    content: "";
}


/* =========================================================
   29. QUOTE SIDEBAR
   ========================================================= */

.quotes-sidebar-card {
    margin-bottom: 16px;
    padding: 17px;
    background: var(--quotes-surface);
    border: 1px solid var(--quotes-border);
    border-radius: var(--quotes-radius-lg);
    box-shadow: var(--quotes-shadow-sm);
}

.quotes-sidebar-card:last-child {
    margin-bottom: 0;
}

.quotes-sidebar-title {
    margin: 0 0 13px;
    color: var(--quotes-text);
    font-size: 13px;
    font-weight: 700;
}

.quotes-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.quotes-sidebar-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.quotes-sidebar-label {
    color: var(--quotes-text-muted);
    font-size: 11px;
}

.quotes-sidebar-value {
    color: var(--quotes-text);
    font-size: 12px;
    font-weight: 600;
    text-align: right;
}


/* =========================================================
   30. FORM FOOTER
   ========================================================= */

.quotes-form-footer {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 16px;
    margin-top: 18px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--quotes-border);
    border-radius: var(--quotes-radius-lg);
    box-shadow: var(--quotes-shadow-lg);
    backdrop-filter: blur(10px);
}

.quotes-form-footer-left,
.quotes-form-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* =========================================================
   31. DETAIL PAGE
   ========================================================= */

.quotes-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: start;
    gap: 20px;
}

.quotes-detail-main,
.quotes-detail-sidebar {
    min-width: 0;
}

.quotes-detail-card {
    margin-bottom: 18px;
    background: var(--quotes-surface);
    border: 1px solid var(--quotes-border);
    border-radius: var(--quotes-radius-lg);
    box-shadow: var(--quotes-shadow-sm);
    overflow: hidden;
}

.quotes-detail-card:last-child {
    margin-bottom: 0;
}

.quotes-detail-header {
    padding: 20px;
    border-bottom: 1px solid var(--quotes-border-light);
}

.quotes-detail-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.quotes-detail-title {
    margin: 0;
    color: var(--quotes-text);
    font-size: 22px;
    line-height: 1.35;
    font-weight: 700;
}

.quotes-detail-number {
    display: block;
    margin-bottom: 5px;
    color: var(--quotes-primary);
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size: 11px;
    font-weight: 700;
}

.quotes-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 17px;
    margin-top: 10px;
}


/* =========================================================
   32. DETAIL SECTIONS
   ========================================================= */

.quotes-detail-section {
    padding: 20px;
    border-bottom: 1px solid var(--quotes-border-light);
}

.quotes-detail-section:last-child {
    border-bottom: 0;
}

.quotes-detail-section-title {
    margin: 0 0 13px;
    color: var(--quotes-text);
    font-size: 14px;
    font-weight: 700;
}

.quotes-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 22px;
}

.quotes-detail-field {
    min-width: 0;
}

.quotes-detail-field-label {
    display: block;
    margin-bottom: 4px;
    color: var(--quotes-text-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.quotes-detail-field-value {
    color: var(--quotes-text);
    font-size: 13px;
    line-height: 1.5;
}


/* =========================================================
   33. QUOTE SUMMARY
   ========================================================= */

.quotes-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.quotes-summary-item {
    padding: 13px;
    background: #fafbfc;
    border: 1px solid var(--quotes-border-light);
    border-radius: var(--quotes-radius-md);
}

.quotes-summary-label {
    display: block;
    margin-bottom: 4px;
    color: var(--quotes-text-muted);
    font-size: 10px;
    font-weight: 600;
}

.quotes-summary-value {
    display: block;
    color: var(--quotes-text);
    font-size: 15px;
    font-weight: 700;
}


/* =========================================================
   34. CUSTOMER DETAIL CARD
   ========================================================= */

.quotes-contact-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.quotes-contact-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--quotes-primary-light);
    color: var(--quotes-primary);
    font-size: 14px;
    font-weight: 700;
}

.quotes-contact-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quotes-contact-info {
    min-width: 0;
}

.quotes-contact-name {
    color: var(--quotes-text);
    font-size: 14px;
    font-weight: 700;
}

.quotes-contact-line {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
    color: var(--quotes-text-secondary);
    font-size: 12px;
}

.quotes-contact-line a {
    color: inherit;
    text-decoration: none;
}

.quotes-contact-line a:hover {
    color: var(--quotes-primary);
}


/* =========================================================
   35. QUOTE ITEMS DETAIL TABLE
   ========================================================= */

.quotes-items-table-wrapper {
    overflow-x: auto;
}

.quotes-items-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
}

.quotes-items-table th {
    padding: 10px 12px;
    color: var(--quotes-text-muted);
    background: #f8fafc;
    border-bottom: 1px solid var(--quotes-border);
    font-size: 10px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
}

.quotes-items-table td {
    padding: 12px;
    color: var(--quotes-text-secondary);
    border-bottom: 1px solid var(--quotes-border-light);
    font-size: 12px;
}

.quotes-items-table tr:last-child td {
    border-bottom: 0;
}

.quotes-item-name {
    color: var(--quotes-text);
    font-weight: 650;
}

.quotes-item-description {
    display: block;
    margin-top: 3px;
    color: var(--quotes-text-muted);
    font-size: 10px;
}


/* =========================================================
   36. QUOTE TIMELINE
   ========================================================= */

.quotes-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 2px 0;
}

.quotes-timeline::before {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 8px;
    width: 1px;
    background: var(--quotes-border);
    content: "";
}

.quotes-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr);
    gap: 11px;
    padding-bottom: 18px;
}

.quotes-timeline-item:last-child {
    padding-bottom: 0;
}

.quotes-timeline-marker {
    position: relative;
    z-index: 1;
    width: 17px;
    height: 17px;
    border: 3px solid var(--quotes-surface);
    border-radius: 50%;
    background: var(--quotes-primary);
    box-shadow: 0 0 0 1px var(--quotes-border);
}

.quotes-timeline-marker.is-success {
    background: var(--quotes-success);
}

.quotes-timeline-marker.is-warning {
    background: var(--quotes-warning);
}

.quotes-timeline-marker.is-danger {
    background: var(--quotes-danger);
}

.quotes-timeline-content {
    min-width: 0;
}

.quotes-timeline-title {
    color: var(--quotes-text);
    font-size: 12px;
    font-weight: 650;
}

.quotes-timeline-description {
    margin-top: 3px;
    color: var(--quotes-text-secondary);
    font-size: 11px;
    line-height: 1.5;
}

.quotes-timeline-time {
    margin-top: 4px;
    color: var(--quotes-text-muted);
    font-size: 10px;
}


/* =========================================================
   37. QUOTE RESPONSE / SEND
   ========================================================= */

.quotes-response-card {
    padding: 18px;
    background: var(--quotes-primary-light);
    border: 1px solid rgba(37, 99, 235, 0.13);
    border-radius: var(--quotes-radius-lg);
}

.quotes-response-title {
    margin: 0 0 5px;
    color: var(--quotes-text);
    font-size: 14px;
    font-weight: 700;
}

.quotes-response-description {
    margin: 0 0 13px;
    color: var(--quotes-text-secondary);
    font-size: 11px;
    line-height: 1.5;
}

.quotes-response-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}


/* =========================================================
   38. EXPIRY WARNING
   ========================================================= */

.quotes-expiry-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: var(--quotes-warning-light);
    border: 1px solid rgba(217, 119, 6, 0.16);
    border-radius: var(--quotes-radius-md);
    color: #92400e;
}

.quotes-expiry-alert-icon {
    flex: 0 0 auto;
    margin-top: 1px;
}

.quotes-expiry-alert-content {
    min-width: 0;
}

.quotes-expiry-alert-title {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
}

.quotes-expiry-alert-text {
    margin: 3px 0 0;
    font-size: 11px;
    line-height: 1.5;
}


/* =========================================================
   39. ACCEPT / REJECT ACTION AREA
   ========================================================= */

.quotes-decision {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.quotes-decision-card {
    padding: 15px;
    border: 1px solid var(--quotes-border);
    border-radius: var(--quotes-radius-md);
}

.quotes-decision-card.is-accepted {
    background: var(--quotes-success-light);
    border-color: rgba(22, 163, 74, 0.18);
}

.quotes-decision-card.is-rejected {
    background: var(--quotes-danger-light);
    border-color: rgba(220, 38, 38, 0.16);
}

.quotes-decision-title {
    margin: 0 0 5px;
    color: var(--quotes-text);
    font-size: 13px;
    font-weight: 700;
}

.quotes-decision-description {
    margin: 0;
    color: var(--quotes-text-secondary);
    font-size: 11px;
    line-height: 1.5;
}


/* =========================================================
   40. PAGINATION
   ========================================================= */

.quotes-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 16px;
    padding: 12px 0;
}

.quotes-pagination-info {
    color: var(--quotes-text-muted);
    font-size: 11px;
}

.quotes-pagination-controls {
    display: flex;
    align-items: center;
    gap: 5px;
}

.quotes-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    color: var(--quotes-text-secondary);
    background: var(--quotes-surface);
    border: 1px solid var(--quotes-border);
    border-radius: var(--quotes-radius-sm);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition:
        color var(--quotes-transition),
        background var(--quotes-transition),
        border-color var(--quotes-transition);
}

.quotes-pagination-btn:hover:not(:disabled) {
    color: var(--quotes-primary);
    border-color: var(--quotes-primary);
    background: var(--quotes-primary-light);
}

.quotes-pagination-btn.is-active {
    color: #fff;
    background: var(--quotes-primary);
    border-color: var(--quotes-primary);
}

.quotes-pagination-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


/* =========================================================
   41. EMPTY STATE
   ========================================================= */

.quotes-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: 35px 20px;
    text-align: center;
}

.quotes-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: #f3f4f6;
    color: var(--quotes-text-muted);
}

.quotes-empty-title {
    margin: 0;
    color: var(--quotes-text);
    font-size: 16px;
    font-weight: 700;
}

.quotes-empty-description {
    max-width: 430px;
    margin: 6px auto 16px;
    color: var(--quotes-text-muted);
    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   42. ERROR STATE
   ========================================================= */

.quotes-error {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--quotes-danger-light);
    border: 1px solid rgba(220, 38, 38, 0.14);
    border-radius: var(--quotes-radius-lg);
}

.quotes-error-icon {
    color: var(--quotes-danger);
    flex: 0 0 auto;
}

.quotes-error-content {
    min-width: 0;
}

.quotes-error-title {
    margin: 0;
    color: #991b1b;
    font-size: 13px;
    font-weight: 700;
}

.quotes-error-message {
    margin: 4px 0 0;
    color: #7f1d1d;
    font-size: 11px;
    line-height: 1.5;
}


/* =========================================================
   43. LOADING / SKELETON
   ========================================================= */

.quotes-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

.quotes-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid var(--quotes-border);
    border-top-color: var(--quotes-primary);
    border-radius: 50%;
    animation: quotes-spin 0.8s linear infinite;
}

@keyframes quotes-spin {
    to {
        transform: rotate(360deg);
    }
}

.quotes-skeleton {
    overflow: hidden;
    background: linear-gradient(
        90deg,
        #f1f5f9 25%,
        #e8edf3 37%,
        #f1f5f9 63%
    );
    background-size: 400% 100%;
    animation: quotes-skeleton 1.4s ease infinite;
}

.quotes-skeleton-line {
    height: 12px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.quotes-skeleton-line.is-short {
    width: 35%;
}

.quotes-skeleton-line.is-medium {
    width: 60%;
}

.quotes-skeleton-line.is-long {
    width: 90%;
}

@keyframes quotes-skeleton {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0 0;
    }
}


/* =========================================================
   44. ATTACHMENTS
   ========================================================= */

.quotes-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.quotes-attachment {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 180px;
    max-width: 280px;
    padding: 9px 11px;
    background: #fafbfc;
    border: 1px solid var(--quotes-border-light);
    border-radius: var(--quotes-radius-md);
}

.quotes-attachment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 7px;
    background: var(--quotes-primary-light);
    color: var(--quotes-primary);
}

.quotes-attachment-info {
    min-width: 0;
    flex: 1;
}

.quotes-attachment-name {
    display: block;
    overflow: hidden;
    color: var(--quotes-text);
    font-size: 11px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quotes-attachment-size {
    display: block;
    margin-top: 2px;
    color: var(--quotes-text-muted);
    font-size: 9px;
}

.quotes-attachment-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--quotes-text-muted);
    background: transparent;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}

.quotes-attachment-remove:hover {
    color: var(--quotes-danger);
    background: var(--quotes-danger-light);
}


/* =========================================================
   45. UPLOAD AREA
   ========================================================= */

.quotes-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 20px;
    background: #fafbfc;
    border: 1px dashed var(--quotes-border);
    border-radius: var(--quotes-radius-md);
    text-align: center;
    cursor: pointer;
    transition:
        border-color var(--quotes-transition),
        background var(--quotes-transition);
}

.quotes-upload:hover,
.quotes-upload.is-dragover {
    background: var(--quotes-primary-light);
    border-color: var(--quotes-primary);
}

.quotes-upload-icon {
    margin-bottom: 7px;
    color: var(--quotes-primary);
}

.quotes-upload-title {
    color: var(--quotes-text);
    font-size: 12px;
    font-weight: 650;
}

.quotes-upload-description {
    margin-top: 3px;
    color: var(--quotes-text-muted);
    font-size: 10px;
}


/* =========================================================
   46. CONVERSION CTA
   ========================================================= */

.quotes-convert {
    padding: 17px;
    background: linear-gradient(
        135deg,
        var(--quotes-primary-light),
        #ffffff
    );
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: var(--quotes-radius-lg);
}

.quotes-convert-title {
    margin: 0;
    color: var(--quotes-text);
    font-size: 14px;
    font-weight: 700;
}

.quotes-convert-description {
    margin: 5px 0 13px;
    color: var(--quotes-text-secondary);
    font-size: 11px;
    line-height: 1.5;
}

.quotes-convert-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}


/* =========================================================
   47. PRINT
   ========================================================= */

.quotes-print-only {
    display: none;
}


/* =========================================================
   48. ACCESSIBILITY
   ========================================================= */

.quotes-page button:focus-visible,
.quotes-page a:focus-visible,
.quotes-page input:focus-visible,
.quotes-page select:focus-visible,
.quotes-page textarea:focus-visible {
    outline: 2px solid var(--quotes-primary);
    outline-offset: 2px;
}

.quotes-page [aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.55;
}


/* =========================================================
   49. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .quotes-page *,
    .quotes-page *::before,
    .quotes-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* =========================================================
   50. LARGE TABLET
   ========================================================= */

@media (max-width: 1200px) {

    .quotes-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .quotes-form-layout,
    .quotes-detail {
        grid-template-columns: minmax(0, 1fr) 290px;
    }

    .quotes-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   51. TABLET
   ========================================================= */

@media (max-width: 992px) {

    .quotes-container {
        padding: 20px;
    }

    .quotes-header {
        flex-direction: column;
        align-items: stretch;
    }

    .quotes-actions {
        justify-content: flex-start;
    }

    .quotes-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .quotes-toolbar-left,
    .quotes-toolbar-right {
        width: 100%;
    }

    .quotes-search {
        width: 100%;
        max-width: none;
    }

    .quotes-form-layout,
    .quotes-detail {
        grid-template-columns: 1fr;
    }

    .quotes-form-sidebar,
    .quotes-detail-sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .quotes-sidebar-card {
        margin-bottom: 0;
    }
}


/* =========================================================
   52. MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .quotes-container {
        padding: 15px;
    }

    .quotes-title {
        font-size: 23px;
    }

    .quotes-subtitle {
        font-size: 12px;
    }

    .quotes-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .quotes-stat-card {
        padding: 14px;
    }

    .quotes-stat-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .quotes-stat-value {
        font-size: 18px;
    }

    .quotes-tabs {
        margin-inline: -15px;
        padding-inline: 15px;
    }

    .quotes-tab {
        padding-inline: 11px;
    }

    .quotes-filters {
        width: 100%;
    }

    .quotes-filter {
        flex: 1 1 140px;
    }

    .quotes-filter-select {
        width: 100%;
    }

    .quotes-card-grid,
    .quotes-detail-grid,
    .quotes-decision {
        grid-template-columns: 1fr;
    }

    .quotes-form-section,
    .quotes-detail-header,
    .quotes-detail-section {
        padding: 16px;
    }

    .quotes-detail-header-top {
        flex-direction: column;
    }

    .quotes-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quotes-form-sidebar,
    .quotes-detail-sidebar {
        display: flex;
        flex-direction: column;
    }

    .quotes-sidebar-card {
        margin-bottom: 12px;
    }

    .quotes-form-footer {
        position: static;
        flex-direction: column;
        align-items: stretch;
    }

    .quotes-form-footer-left,
    .quotes-form-footer-right {
        width: 100%;
    }

    .quotes-form-footer-right {
        justify-content: flex-end;
    }

    .quotes-pagination {
        flex-direction: column;
        align-items: stretch;
    }

    .quotes-pagination-controls {
        justify-content: center;
    }

    .quotes-bulkbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .quotes-item-header {
        display: none;
    }

    .quotes-item {
        grid-template-columns: 1fr 1fr;
    }

    .quotes-item > :first-child {
        grid-column: 1 / -1;
    }

    .quotes-item-remove {
        width: 100%;
    }

    .quotes-totals {
        width: 100%;
    }
}


/* =========================================================
   53. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .quotes-container {
        padding: 12px;
    }

    .quotes-header {
        margin-bottom: 18px;
    }

    .quotes-title {
        font-size: 21px;
    }

    .quotes-actions {
        width: 100%;
    }

    .quotes-actions > * {
        flex: 1 1 auto;
    }

    .quotes-stats {
        grid-template-columns: 1fr;
    }

    .quotes-toolbar {
        padding: 10px;
    }

    .quotes-summary {
        grid-template-columns: 1fr;
    }

    .quotes-card-header,
    .quotes-card-body,
    .quotes-card-footer {
        padding: 13px;
    }

    .quotes-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .quotes-response-actions,
    .quotes-convert-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .quotes-response-actions > *,
    .quotes-convert-actions > * {
        width: 100%;
    }

    .quotes-attachment {
        width: 100%;
        max-width: none;
    }

    .quotes-customer {
        min-width: 0;
    }

    .quotes-detail-title {
        font-size: 19px;
    }

    .quotes-detail-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .quotes-item {
        grid-template-columns: 1fr;
    }

    .quotes-item > * {
        grid-column: 1 / -1;
    }

    .quotes-actions-cell {
        justify-content: flex-start;
    }
}


/* =========================================================
   54. DARK MODE
   Supports projects using either:
   - .dark
   - [data-theme="dark"]
   ========================================================= */

.dark .quotes-page,
[data-theme="dark"] .quotes-page {

    --quotes-text: var(--text-primary, #f8fafc);
    --quotes-text-secondary: var(--text-secondary, #cbd5e1);
    --quotes-text-muted: var(--text-muted, #94a3b8);

    --quotes-bg: var(--background-color, #0f172a);
    --quotes-surface: var(--card-bg, #111827);

    --quotes-border: #263244;
    --quotes-border-light: #1e293b;

    --quotes-primary-light: rgba(37, 99, 235, 0.14);

    --quotes-success-light: rgba(22, 163, 74, 0.13);
    --quotes-warning-light: rgba(217, 119, 6, 0.13);
    --quotes-danger-light: rgba(220, 38, 38, 0.13);
    --quotes-info-light: rgba(2, 132, 199, 0.13);
}

.dark .quotes-page .quotes-table thead th,
[data-theme="dark"] .quotes-page .quotes-table thead th {
    background: #0f172a;
}

.dark .quotes-page .quotes-table tbody tr:hover td,
[data-theme="dark"] .quotes-page .quotes-table tbody tr:hover td {
    background: #172033;
}

.dark .quotes-page .quotes-card-footer,
[data-theme="dark"] .quotes-page .quotes-card-footer {
    background: #0f172a;
}

.dark .quotes-page .quotes-item,
.dark .quotes-page .quotes-summary-item,
.dark .quotes-page .quotes-attachment,
.dark .quotes-page .quotes-upload,
[data-theme="dark"] .quotes-page .quotes-item,
[data-theme="dark"] .quotes-page .quotes-summary-item,
[data-theme="dark"] .quotes-page .quotes-attachment,
[data-theme="dark"] .quotes-page .quotes-upload {
    background: #0f172a;
}

.dark .quotes-page .quotes-form-footer,
[data-theme="dark"] .quotes-page .quotes-form-footer {
    background: rgba(17, 24, 39, 0.96);
}

.dark .quotes-page .quotes-action-dropdown,
[data-theme="dark"] .quotes-page .quotes-action-dropdown {
    background: #111827;
}

.dark .quotes-page .quotes-action-menu-item:hover,
[data-theme="dark"] .quotes-page .quotes-action-menu-item:hover {
    background: #1e293b;
}


/* =========================================================
   55. PRINT STYLES
   ========================================================= */

@media print {

    .quotes-page {
        background: #fff !important;
        color: #000 !important;
    }

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

    .quotes-header,
    .quotes-toolbar,
    .quotes-tabs-wrapper,
    .quotes-actions,
    .quotes-form-footer,
    .quotes-response-card,
    .quotes-convert,
    .quotes-pagination,
    .quotes-sidebar-card {
        display: none !important;
    }

    .quotes-detail {
        display: block;
    }

    .quotes-detail-card,
    .quotes-form-section {
        border: 0;
        box-shadow: none;
        page-break-inside: avoid;
    }

    .quotes-print-only {
        display: block;
    }

    .quotes-table-wrapper,
    .quotes-detail-card {
        border: 1px solid #ddd;
    }
}


/* =========================================================
   END OF QUOTES.CSS
   ========================================================= */