/* Combined E-Way Bill + E-Invoice popup (Pages/EwaybillEinvoicePopup.razor).
   The two child popups keep their own body styling (EwaybillDetailPopup.css / EinvoiceDetailPopup.css);
   everything here is only the stacking, the section headings, and the per-section action row that
   replaces each child's modal footer when it is embedded. */

.gst-popup-body {
    font-family: system-ui, sans-serif;
    /* Narrower than either child's own 600px: this panel carries no wide content of its own, and two
       stacked sections already make it the tallest of the three popups — width it needs to earn. */
    width: 500px;
    max-width: 100%;
    /* Both sections together are taller than one popup's worth — scroll rather than clip, the same
       reasoning as .ewb-popup-body's own max-height. */
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px 2px;
    margin-bottom: 8px;
}

/* ---- "Generate Both" — the primary action of this popup ----
   Deliberately the heaviest element on the panel: it sits above both sections, carries the only
   filled accent colour, and the per-section Generate buttons read as the fallback beneath it. */
.gst-combined {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #007bff0d;
    border: 1px solid #007bff33;
}

.gst-combined-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gst-combined-text strong {
    font-size: 0.92rem;
}

.gst-combined-text span {
    font-size: 0.72rem;
    opacity: 0.7;
}

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

/* Colour, hover and the ambient shine all come from app.css's .btn-primary, which this is applied
   alongside. Only the sizing is overridden — .btn-primary is width:100%/height:30px for a modal
   footer, and this button is a centred call to action. */
.gst-combined-btn {
    flex: 0 0 auto;
    width: auto;
    height: 32px;
    padding: 0 18px;
    font-size: 0.8rem;
    border-radius: 4px;
}

.gst-combined-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

/* Square companion for the JSON download, matching .ewb-icon-btn / .einv-icon-btn. */
.gst-icon-btn {
    flex: 0 0 auto;
    width: 40px;
    height: 32px;
    padding: 0;
    background: #6c757d;
    border: none;
    border-radius: 4px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.4);
}

.gst-icon-btn:hover:not(:disabled) {
    background: #5c636a;
}

.gst-icon-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.gst-icon-btn svg {
    width: 20px;
    height: 20px;
}

/* ---- Collapsible "Invoice details" ---- */
.gst-details {
    margin-top: 8px;
}

.gst-details > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.75;
    padding: 4px 0;
    user-select: none;
}

.gst-details > summary::-webkit-details-marker {
    display: none;
}

/* Own disclosure triangle, so it sits before the label at a size that matches the text. */
.gst-details > summary::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .15s ease;
}

.gst-details[open] > summary::before {
    transform: rotate(90deg);
}

.gst-combined-error {
    margin-top: 10px;
    padding: 8px 10px;
    background: #c6282814;
    border-left: 3px solid #c62828;
    border-radius: 4px;
    font-size: .82rem;
}

.gst-combined-error ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

/* Separator that frames the two sections below as the secondary path. */
.gst-or {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 2px;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .5;
}

.gst-or::before,
.gst-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #8884;
}

/* With the combined action present, a section's own Generate is the alternative, not the headline. */
.gst-combined ~ .gst-section .gst-section-actions .btn-primary {
    background: transparent;
    border: 1px solid #0d6efd;
    color: #0d6efd;
    box-shadow: none;
}

.gst-combined ~ .gst-section .gst-section-actions .btn-primary:hover:not(:disabled) {
    background: #0d6efd14;
}

.gst-section + .gst-section {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #8883;
}

.gst-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gst-section-header h3 {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 600;
}

.gst-status {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

.gst-status.is-done {
    background: #1b5e2014;
    color: #1b5e20;
}

.gst-status.is-pending {
    background: #e6510014;
    color: #e65100;
}

/* Each child's actions when embedded. Deliberately not .custom-modal-footer: that stretches its
   .btn children to flex-basis 300px, which is right for a modal footer and wrong for a row sitting
   inside the body. */
.gst-section-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.gst-section-actions .btn {
    /* app.css gives .btn-primary width:100%, which is right for a modal footer and wrong here: it
       fills the row and shoves the icon button past the panel edge, producing a horizontal scrollbar. */
    width: auto;
    flex: 0 0 auto;
    height: 28px;
    padding: 0 14px;
    font-size: 0.78rem;
}

/* The children size their own square buttons to match a 30px .btn footer row; keep them square
   against the 28px buttons above instead. */
/* The NIC action buttons join the same 28px row as the print and icon buttons. Without this they stay
   at their standalone 30px and, with align-items: center, sit a pixel off the ones beside them. */
.gst-section-actions .ewb-icon-btn,
.gst-section-actions .einv-icon-btn,
.gst-section-actions .ewb-print-btn,
.gst-section-actions .ewb-action-btn,
.gst-section-actions .einv-action-btn {
    height: 28px;
}

.gst-section-actions .ewb-icon-btn,
.gst-section-actions .einv-icon-btn {
    width: 40px;
}

.gst-section-actions .ewb-icon-btn svg,
.gst-section-actions .einv-icon-btn svg {
    width: 20px;
    height: 20px;
}

/* The children's own popup bodies are sized for standalone use: fixed width, and a max-height that
   scrolls internally. Inside this host they should fill the section and let .gst-popup-body do the
   single scroll — a scroll area nested in a scroll area is awkward to use and hides content. */
.gst-section .ewb-popup-body,
.gst-section .einv-popup-body {
    /* auto, not 100%: these carry horizontal padding, and 100% + padding overflows the host by a
       couple of pixels — enough for a horizontal scrollbar to appear across the whole panel. */
    width: auto;
    max-width: none;
    max-height: none;
    overflow-y: visible;
    margin-bottom: 0;
}

/* Each child's own type and spacing are set for a popup where it is the only content. Two of them
   stacked here, so both are stepped down a notch — the panel is a summary of what is outstanding,
   and the standalone popups still show the full-size versions. */
.gst-section .ewb-summary,
.gst-section .einv-summary {
    gap: 4px 12px;
    margin-top: 6px;
    padding-top: 6px;
}

.gst-section .ewb-summary strong,
.gst-section .einv-summary strong {
    font-size: 0.8rem;
}

.gst-section .ewb-checkbox {
    margin-top: 8px;
    padding-top: 8px;
    font-size: 0.76rem;
}

.gst-section .ewb-field,
.gst-section .einv-field {
    font-size: 0.82rem;
}

/* 64 characters at .9rem wraps to three lines in a 500px panel. */
.gst-section .einv-irn {
    font-size: 0.74rem;
}

.gst-section .ewb-qr-canvas,
.gst-section .einv-qr-canvas {
    height: 84px;
    width: 84px;
}

.gst-section .einv-rule-note,
.gst-section .ewb-rule-note {
    font-size: 0.74rem;
    margin-top: 8px;
}

.gst-section .ewb-error,
.gst-section .einv-error {
    margin-top: 8px;
    font-size: 0.76rem;
}

/* --- Cancelling both --------------------------------------------------------------------------
   Shares .gst-combined's layout with the generate-both block above it, in the neutral/danger tone
   rather than the primary one. See EwaybillEinvoicePopup.CancelBoth for why the order is fixed. */
.gst-combined-danger {
    border-left: 3px solid #dc3545;
}

.gst-cancel-panel {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #f8f9fa;
}

.gst-cancel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.gst-cancel-grid label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.78rem;
    color: #495057;
}

.gst-cancel-grid input,
.gst-cancel-grid select {
    height: 30px;
    padding: 0 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.82rem;
    background: #ffffff;
}

/* One remark covers both calls — the user is describing a single decision. */
.gst-cancel-wide {
    grid-column: 1 / -1;
}

.gst-cancel-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}