/* ============================================================
   QuarkCode Quote Manager – My Quotes & Quote Detail CSS
   ============================================================ */

/* Container */
.qqm-my-quotes-container,
.qqm-quote-detail-container {
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 40px;
}

/* Header */
.qqm-my-quotes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.qqm-my-quotes-header h2 { margin: 0; font-size: 22px; }

/* Filter tabs */
.qqm-filter-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 0;
}
.qqm-tab {
    padding: 8px 16px;
    border-radius: 5px 5px 0 0;
    color: #555;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
    border-bottom: none;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    gap: 4px;
}
.qqm-tab:hover       { background: #f0f4f8; color: #0073aa; }
.qqm-tab--active     { background: #fff; border-color: #e0e0e0; color: #0073aa; font-weight: 700; margin-bottom: -2px; }
.qqm-tab-count {
    background: #e0e0e0;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
}

/* Quote cards */
.qqm-quotes-list        { display: flex; flex-direction: column; gap: 14px; }
.qqm-quote-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.qqm-quote-card:hover   { box-shadow: 0 3px 10px rgba(0,0,0,0.09); }
.qqm-quote-card-header  {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}
.qqm-quote-card-number  { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.qqm-quote-card-number a { font-weight: 700; color: #0073aa; text-decoration: none; }
.qqm-quote-card-date    { font-size: 13px; color: #888; }
.qqm-quote-card-body    { padding: 14px 18px; }
.qqm-quote-project      { margin: 0 0 8px; font-size: 14px; }
.qqm-quote-meta-row     { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: #555; }
.qqm-quote-card-actions {
    padding: 12px 18px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Status badges */
.qqm-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.status-draft         { background: #e9ecef; color: #495057; }
.status-pending       { background: #fff3cd; color: #856404; }
.status-review        { background: #cce5ff; color: #004085; }
.status-approved      { background: #d4edda; color: #155724; }
.status-rejected      { background: #f8d7da; color: #721c24; }
.status-expired       { background: #e2e3e5; color: #383d41; }
.status-accepted      { background: #c3e6cb; color: #155724; }
.status-cancelled     { background: #f5c6cb; color: #491217; }
.status-converted     { background: #bee5eb; color: #0c5460; }
.status-modification  { background: #ffeeba; color: #7a5c00; }
.qqm-badge-lg         { font-size: 14px; padding: 5px 14px; }

/* Back link */
.qqm-back-bar   { margin-bottom: 14px; }
.qqm-back-link  { color: #0073aa; text-decoration: none; font-size: 14px; font-weight: 500; }
.qqm-back-link:hover { text-decoration: underline; }

/* Detail header */
.qqm-detail-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.qqm-detail-header h2 { margin: 0; font-size: 22px; }

/* Actions bar */
.qqm-actions-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 14px 18px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 7px;
}

/* Detail grid */
.qqm-detail-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.qqm-info-row   { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
.qqm-info-row:last-child { border-bottom: none; }
.qqm-info-row span { color: #666; }
.qqm-info-row strong { color: #333; }

/* Card */
.qqm-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
}
.qqm-card h3 {
    margin: 0;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 700;
    border-bottom: 1px solid #e0e0e0;
    background: #f8f9fa;
}
.qqm-card > p,
.qqm-card > table,
.qqm-card > .qqm-comms-list,
.qqm-card > textarea,
.qqm-card > div {
    padding: 14px 18px;
    margin: 0;
}

/* Items table */
.qqm-items-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.qqm-items-table th { background: #f8f9fa; padding: 10px 14px; text-align: left; font-weight: 600; border-bottom: 2px solid #e0e0e0; }
.qqm-items-table td { padding: 10px 14px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
.qqm-items-table tfoot td { font-weight: 600; border-top: 2px solid #e0e0e0; }
.qqm-total-row td { background: #f0faf0; font-size: 15px; }

/* Communication items */
.qqm-comms-list     { display: flex; flex-direction: column; gap: 12px; }
.qqm-comm-item      { border-radius: 6px; padding: 12px 14px; font-size: 14px; }
.qqm-comm-inbound   { background: #f0f4f8; border-left: 3px solid #0073aa; }
.qqm-comm-outbound  { background: #f0fff4; border-left: 3px solid #2e7d32; }
.qqm-comm-meta      { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 12px; }
.qqm-comm-body      { color: #333; line-height: 1.5; }

/* Pagination */
.qqm-pagination { display: flex; gap: 6px; margin-top: 20px; }
.qqm-page-btn {
    padding: 6px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    color: #555;
    text-decoration: none;
    font-size: 13px;
}
.qqm-page-btn--active { background: #0073aa; color: #fff; border-color: #0073aa; }

/* Empty state */
.qqm-empty-state {
    text-align: center;
    padding: 48px 20px;
    color: #888;
}
.qqm-empty-icon { font-size: 48px; display: block; margin-bottom: 12px; }
.qqm-empty-state h3 { color: #555; margin-bottom: 8px; }