/* Quotation Generator Frontend Styles */

.qg-container {
    max-width: 900px;
    margin: 20px auto;
    background: white;
    padding: 40px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    border-radius: 6px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Header Section */
.qg-header {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 2px solid #000;
    padding-bottom: 20px;
}

.qg-logo {
    width: 120px;
    height: 120px;
    margin: 0 auto 15px;
    background: #f5f5f5;
    border: 2px solid #ddd;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    font-size: 11px;
    color: #999;
}

.qg-logo:hover {
    background: #eee;
}

.qg-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.qg-brand {
    font-size: 13px;
    color: #ff9800;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.qg-title {
    font-size: 32px;
    font-weight: bold;
    color: #000;
    margin: 0;
}

/* Customer Info Grid */
.qg-customer-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 4px;
}

.qg-info-group {
    display: flex;
    flex-direction: column;
}

.qg-info-label {
    font-size: 11px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.qg-info-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qg-input {
    flex: 1;
    padding: 9px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
    font-family: inherit;
    background: white;
}

.qg-input:focus {
    outline: none;
    border-color: #ff9800;
    box-shadow: 0 0 4px rgba(255, 152, 0, 0.3);
}

.qg-date-input {
    flex: 1;
    padding: 9px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
    font-family: inherit;
    background: white;
}

.qg-calendar-btn {
    padding: 9px 12px;
    background: #ff9800;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s;
    min-width: 40px;
}

.qg-calendar-btn:hover {
    background: #e68900;
}

/* Table Styles */
.qg-table-wrapper {
    margin-bottom: 20px;
    overflow-x: auto;
}

.qg-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
    background: white;
}

.qg-table thead {
    background: #333;
    color: white;
}

.qg-table th {
    padding: 11px 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid #333;
    vertical-align: middle;
}

.qg-table td {
    padding: 10px 8px;
    border: 1px solid #ddd;
    text-align: center;
    font-size: 12px;
    vertical-align: middle;
    background: white;
}

.qg-table tbody tr:nth-child(even) td {
    background: #f9f9f9;
}

/* Image Cell */
.qg-image-cell {
    width: 100px;
    min-width: 100px;
}

.qg-image-placeholder {
    width: 85px;
    height: 85px;
    margin: 0 auto;
    border: 2px dashed #ddd;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #fafafa;
    transition: all 0.3s;
    overflow: hidden;
    position: relative;
}

.qg-image-placeholder:hover {
    border-color: #ff9800;
    background: #fff3e0;
}

.qg-image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qg-image-text {
    font-size: 10px;
    color: #bbb;
    text-align: center;
    pointer-events: none;
}

/* Input Fields in Table */
.qg-description-input,
.qg-quantity-input,
.qg-finish-input,
.qg-price-input {
    width: 100%;
    padding: 7px 6px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 12px;
    font-family: inherit;
    background: white;
    text-align: center;
}

.qg-description-input {
    text-align: left;
    min-width: 150px;
}

.qg-quantity-input {
    max-width: 60px;
    margin: 0 auto;
}

.qg-finish-input {
    max-width: 100px;
    margin: 0 auto;
}

.qg-price-input {
    max-width: 80px;
    margin: 0 auto;
}

.qg-description-input:focus,
.qg-quantity-input:focus,
.qg-finish-input:focus,
.qg-price-input:focus {
    outline: none;
    border-color: #ff9800;
    box-shadow: 0 0 4px rgba(255, 152, 0, 0.3);
}

/* Row Actions */
.qg-row-actions {
    display: flex;
    gap: 3px;
    justify-content: center;
    white-space: nowrap;
}

.qg-row-action-btn {
    padding: 5px 8px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 2px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s;
    min-width: 28px;
}

.qg-row-action-btn:hover {
    background: #ff9800;
    color: white;
    border-color: #ff9800;
}

/* Table Action Buttons */
.qg-table-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.qg-btn {
    padding: 10px 16px;
    background: #ff9800;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s;
}

.qg-btn:hover {
    background: #e68900;
}

.qg-btn.secondary {
    background: #666;
}

.qg-btn.secondary:hover {
    background: #555;
}

.qg-btn.danger {
    background: #dc3545;
}

.qg-btn.danger:hover {
    background: #c82333;
}

/* Totals Section */
.qg-totals {
    margin-bottom: 25px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
}

.qg-totals-row {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 15px;
    padding: 12px 15px;
    border-bottom: 1px solid #ddd;
    align-items: center;
    background: #f9f9f9;
}

.qg-totals-row:last-child {
    border-bottom: none;
}

.qg-totals-label {
    text-align: right;
    font-weight: 600;
    color: #333;
    font-size: 13px;
}

.qg-totals-value {
    text-align: center;
    font-weight: 600;
    color: #333;
    font-size: 13px;
    padding: 8px 10px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.qg-totals-row.grand-total {
    background: #333;
    border-bottom: 1px solid #333 !important;
}

.qg-totals-row.grand-total .qg-totals-label,
.qg-totals-row.grand-total .qg-totals-value {
    color: white;
}

.qg-totals-row.grand-total .qg-totals-value {
    background: #222;
    border-color: #333;
}

/* Payments Section */
.qg-payments-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #000;
}

.qg-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.qg-payments-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
}

.qg-payments-table thead {
    background: #e0e0e0;
}

.qg-payments-table th {
    padding: 10px 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid #ddd;
    color: #333;
    background: #e0e0e0;
}

.qg-payments-table td {
    padding: 10px 8px;
    border: 1px solid #ddd;
    text-align: center;
    font-size: 12px;
    background: white;
}

.qg-payments-table tbody tr:nth-child(even) td {
    background: #f9f9f9;
}

.qg-payments-table input {
    width: 100%;
    padding: 7px 6px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
    font-family: inherit;
    background: white;
}

.qg-payments-table input:focus {
    outline: none;
    border-color: #ff9800;
    box-shadow: 0 0 4px rgba(255, 152, 0, 0.3);
}

.qg-payment-date-input {
    text-align: center;
}

/* Payment Summary */
.qg-payment-summary {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 15px;
    margin-bottom: 15px;
    padding: 12px 15px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    align-items: center;
}

.qg-payment-label {
    text-align: right;
    font-weight: 600;
    color: #333;
    font-size: 13px;
}

.qg-payment-value {
    text-align: center;
    font-weight: 600;
    color: #333;
    font-size: 13px;
    padding: 8px 10px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 3px;
}

/* Payment Actions */
.qg-payment-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

/* Export Actions */
.qg-export-actions {
    display: flex;
    gap: 10px;
    margin-top: 25px;
    flex-wrap: wrap;
    border-top: 2px solid #000;
    padding-top: 20px;
}

/* Print Styles */
@media print {
    /* Without this, padding gets added ON TOP of width (e.g. a container
       set to width:100% + padding:10mm becomes wider than the page and
       gets cut off on the right). border-box keeps padding INSIDE the
       given width so nothing overflows the page on any screen/printer. */
    * {
        box-sizing: border-box;
    }

    /* Hide everything on the page (theme header, footer, sidebar, menus, etc.)
       and show only the quotation app. This stops the site's own header/footer
       from being printed along with the quotation. */
    body * {
        visibility: hidden;
    }

    #qg-app,
    #qg-app * {
        visibility: visible;
    }

    #qg-app {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    html, body {
        background: white;
        padding: 0;
        margin: 0;
        height: auto;
    }

    .qg-container {
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        box-shadow: none;
        /* Do NOT avoid breaking this element: it holds the entire quotation,
           so forcing it to stay in one piece is what was pushing the logo,
           name, and table onto separate pages. Let it flow naturally and
           only protect the smaller pieces inside it (below) from splitting. */
    }

    .qg-header {
        page-break-inside: avoid;
        margin-bottom: 15px;
        border-bottom: 1px solid #000;
        padding-bottom: 15px;
    }

    .qg-logo {
        width: 100px;
        height: 100px;
    }

    .qg-title {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .qg-customer-info {
        page-break-inside: avoid;
        margin-bottom: 15px;
        gap: 10px;
        padding: 10px;
        background: white;
    }

    .qg-info-label {
        font-size: 10px;
        margin-bottom: 4px;
    }

    .qg-input,
    .qg-date-input {
        font-size: 12px;
        padding: 6px 8px;
    }

    /* Actions column (row buttons, ❌ remove icons) is only useful on-screen.
       Hide the whole column - header and cells - in print so it doesn't
       take up width or show leftover icons like the ❌ remove button. */
    .qg-table th:last-child,
    .qg-table td:last-child,
    .qg-payments-table th:last-child,
    .qg-payments-table td:last-child {
        display: none;
    }

    .qg-remove-payment,
    .qg-remove-row,
    .qg-row-action-btn {
        display: none !important;
    }

    .qg-table-wrapper {
        margin-bottom: 10px;
        /* Let the table itself break across pages if it's long, instead of
           forcing the whole wrapper onto a fresh page. */
    }

    .qg-table {
        margin-bottom: 10px;
        width: 100%;
        table-layout: fixed;
    }

    .qg-table td,
    .qg-table th {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Repeat the table header on every printed page when the item table
       is long enough to span multiple pages. */
    .qg-table thead {
        display: table-header-group;
    }

    .qg-table th {
        padding: 8px 6px;
        font-size: 11px;
    }

    .qg-table td {
        padding: 8px 6px;
        font-size: 11px;
    }

    .qg-image-placeholder {
        width: 70px;
        height: 70px;
    }

    .qg-description-input,
    .qg-quantity-input,
    .qg-finish-input,
    .qg-price-input {
        font-size: 11px;
        padding: 5px 4px;
        border: none;
        background: transparent;
    }

    .qg-row-actions {
        display: none;
    }

    .qg-table-actions {
        display: none;
    }

    .qg-totals {
        page-break-inside: avoid;
        margin-bottom: 15px;
        border: 1px solid #000;
    }

    .qg-totals-row {
        padding: 10px 12px;
        gap: 10px;
        background: white;
        border-bottom: 1px solid #000;
    }

    .qg-totals-row:last-child {
        border-bottom: 1px solid #000;
    }

    .qg-totals-label {
        font-size: 12px;
    }

    .qg-totals-value {
        font-size: 12px;
        padding: 6px 8px;
        border: 1px solid #000;
    }

    .qg-totals-row.grand-total {
        background: #333;
        border-bottom: 1px solid #333 !important;
    }

    .qg-totals-row.grand-total .qg-totals-value {
        background: #222;
        border-color: #333;
    }

    .qg-payments-section {
        margin-top: 15px;
        border-top: 1px solid #000;
        padding-top: 15px;
        /* No page-break-inside: avoid here - this section can be sizeable
           (title + table + 2 summary rows), and forcing it to stay whole
           was pushing it onto a fresh page even when most of it would
           have fit on the current page. Its smaller pieces below
           (payment-summary, table rows) still protect themselves. */
    }

    .qg-payments-table tr {
        page-break-inside: avoid;
    }

    .qg-section-title {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .qg-payments-table {
        margin-bottom: 10px;
    }

    .qg-payments-table th {
        padding: 8px 6px;
        font-size: 11px;
        background: #ddd;
    }

    .qg-payments-table td {
        padding: 8px 6px;
        font-size: 11px;
    }

    .qg-payments-table input {
        border: none;
        background: transparent;
        font-size: 11px;
        padding: 5px 4px;
    }

    .qg-payment-summary {
        page-break-inside: avoid;
        padding: 10px 12px;
        gap: 10px;
        background: white;
        border: 1px solid #000;
    }

    .qg-payment-actions {
        display: none;
    }

    .qg-export-actions {
        display: none;
    }

    .qg-btn,
    .qg-calendar-btn {
        display: none;
    }

    .qg-input,
    .qg-date-input {
        border: none;
        background: transparent;
        padding: 4px 0;
    }

    /* Setting the page margin to 0 removes the space Chrome/Edge reserve for
       their own default header/footer (date, page title, URL, page number),
       so that text no longer prints. We add the same spacing back with
       padding on the container below so the content isn't touching the
       paper edge. NOTE: some browsers still print their header/footer
       regardless of this - if it still appears, open the Print dialog,
       click "More settings" and turn off "Headers and footers" there. */
    @page {
        size: A4 portrait;
        margin: 0;
    }

    .qg-container {
        padding: 10mm !important;
    }

    .qg-table tbody tr {
        page-break-inside: avoid;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .qg-container {
        padding: 20px;
    }

    .qg-customer-info {
        grid-template-columns: 1fr;
    }

    .qg-totals {
        margin-bottom: 15px;
    }

    .qg-totals-row {
        grid-template-columns: 1fr 150px;
        gap: 10px;
        padding: 10px;
    }

    .qg-image-placeholder {
        width: 70px;
        height: 70px;
    }

    .qg-description-input {
        min-width: 120px;
    }

    .qg-table th,
    .qg-table td {
        padding: 8px 5px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .qg-container {
        padding: 15px;
    }

    .qg-title {
        font-size: 24px;
    }

    .qg-table-actions {
        flex-direction: column;
    }

    .qg-btn {
        width: 100%;
    }

    .qg-image-cell {
        width: 80px;
        min-width: 80px;
    }

    .qg-image-placeholder {
        width: 70px;
        height: 70px;
    }

    .qg-table th,
    .qg-table td {
        padding: 6px 4px;
        font-size: 10px;
    }

    .qg-row-action-btn {
        padding: 4px 6px;
        font-size: 10px;
        min-width: 26px;
    }
}