.ewb-popup-body {
    font-family: system-ui, sans-serif;
    width: 600px;
    max-width: 600px;
    max-height: 300px;
    /* NIC can return a dozen error codes at once; without this the list is silently clipped by
       max-height and the user only sees the first line or two. */
    overflow-y: auto;
    padding: 4px 2px;
    /* 6px, not 20px: the shared .custom-modal-footer already contributes its own padding-top plus a
       border above the buttons, so a large margin here just doubles the divider's breathing room.
       Matches .gst-popup-body, which already used a tighter value. */
    margin-bottom: 6px;
}

.ewb-loading {
    text-align: center;
    padding: 24px 0;
    opacity: 0.7;
}

.ewb-saved-view {
    display: grid;
    grid-template-columns: 1fr 0.5fr;
    align-items: center;
    gap: 6px;
}


/* Force the first column to stack text vertically */
.ewb-saved-view-column:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Center the canvas inside the second column */
.ewb-saved-view-column {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Ensures full width utilization */
}

.ewb-qr-note {
    grid-column: span 2; /* Spans across both columns */
    font-size: 0.72rem;
    opacity: 0.6;
    text-align: center;
    margin: 8px 0 0;
}

.ewb-field {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    padding: 2px 0;
}

.ewb-field span {
    opacity: 0.65;
}

.ewb-qr-canvas {
    height: 100px;
    width: 100px;
    background: #fff;
}

.ewb-rule-note {
    font-size: .78rem;
    opacity: .7;
    margin: 0 0 10px;
}

.ewb-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #8883;
}

.ewb-summary span {
    display: block;
    font-size: .72rem;
    opacity: .6;
}

.ewb-summary strong {
    font-size: .88rem;
}

/* "Part-A only" toggle on the pre-generation form. */
.ewb-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #8883;
    font-size: .78rem;
    line-height: 1.35;
    cursor: pointer;
}

.ewb-checkbox input {
    flex: 0 0 auto;
    margin-top: 1px;
    cursor: pointer;
}

.ewb-checkbox span {
    opacity: .8;
}

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

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

/* Square icon button sized to match .btn-secondary's 30px height. Deliberately not a .btn — that
   would inherit .custom-modal-footer .btn's flex-basis: 300px and stretch across the footer. */
.ewb-icon-btn {
    flex: 0 0 auto;
    width: 50px;
    height: 30px;
    padding: 0;
    background: #6c757d;
    border: none;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.4);
    border-radius: 4px;
}

.ewb-icon-btn:hover {
    background: #5c636a;
}

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

.ewb-icon-btn svg {
    width: 30px;
    height: 30px;
}

/* Icon + label variant for the Summary/Detailed print buttons. Same reasoning as .ewb-icon-btn —
   not a .btn, so it keeps its natural width instead of inheriting flex-basis: 300px. */
.ewb-print-btn {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 12px 0 8px;
    gap: 4px;
    background: #0d6efd;
    border: none;
    color: #ffffff;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.4);
    border-radius: 4px;
}

.ewb-print-btn:hover {
    background: #0b5ed7;
}

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

.ewb-print-btn svg {
    width: 20px;
    height: 20px;
}

/* --- NIC operations on an existing bill -------------------------------------------------------
   Cancel, PART-B update, transporter reassignment and validity extension. One panel is shown at a
   time (see EwaybillDetailPopup's activeAction): each operation has its own fields and its own
   statutory rules, so showing several at once would imply they can be combined. */

/* Cancelled is a state of the bill, not an error, so it reads as a header band rather than as the
   red .ewb-error block — the number, dates and print buttons below it are all still valid. */
.ewb-cancelled-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
    border-left: 3px solid #dc3545;
    background: #fdf2f3;
    border-radius: 4px;
    font-size: 0.82rem;
    color: #58151c;
}

.ewb-cancelled-banner strong {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #dc3545;
}

/* The consequence, on its own line inside the same banner: whether this document number can carry
   another e-way bill. flex-basis: 100% rather than a separate block so it stays part of the
   cancellation statement it qualifies, and breaks under the reason rather than beside it. */
.ewb-cancelled-note {
    flex-basis: 100%;
    font-size: 0.76rem;
    line-height: 1.45;
    opacity: 0.85;
}

/* Shown above the generation form when it is standing in for a cancelled bill. Blue, not red:
   nothing has gone wrong here — the form is doing exactly what it does for a first generation, and
   colouring it as a warning would suggest otherwise. */
.ewb-regenerate-note {
    padding: 8px 12px;
    margin-bottom: 10px;
    border-left: 3px solid #0d6efd;
    background: #eef5ff;
    border-radius: 4px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #084298;
}

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

.ewb-action-header h4 {
    margin: 0 0 4px;
    font-size: 0.92rem;
}

/* The government rule that governs the open action, stated before the form is filled in rather than
   after NIC refuses it. Deliberately quiet — it is context, not a warning. */
.ewb-action-rule {
    display: block;
    margin-bottom: 10px;
    font-size: 0.76rem;
    line-height: 1.45;
    color: #6c757d;
}

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

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

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

.ewb-action-grid input:disabled {
    background: #e9ecef;
    color: #6c757d;
}

/* Remarks run the width of the panel: NIC allows 100 characters and a one-column box would hide most
   of what was typed. */
.ewb-action-wide {
    grid-column: 1 / -1;
}

.ewb-action-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* Same shape as .ewb-print-btn, in the neutral tone — these sit in the same footer row and should
   not compete with Generate for attention. */
.ewb-action-btn {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 12px;
    background: #6c757d;
    border: none;
    color: #ffffff;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.4);
    border-radius: 4px;
}

.ewb-action-btn:hover {
    background: #5c636a;
}

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

/* Cancellation is irreversible at NIC, so it is the one action coloured as such. */
.ewb-action-btn-danger {
    background: #dc3545;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
}

.ewb-action-btn-danger:hover {
    background: #bb2d3b;
}

/* Advisories — the value threshold, whose intra-state limit varies by state. Amber rather than red:
   these never block the button. */
.ewb-warning {
    margin-top: 10px;
    padding: 8px 12px;
    border-left: 3px solid #ffc107;
    background: #fff9e6;
    border-radius: 4px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #664d03;
}

.ewb-warning ul {
    margin: 0;
    padding-left: 18px;
}

/* --- Footer wrapping ---------------------------------------------------------------------------
   A generated bill puts Summary, Detailed, Update Vehicle, Change Transporter, Extend Validity,
   Cancel and Close into one row. The shared .custom-modal-footer is a non-wrapping flex row with a
   30px gap, and .custom-modal-footer .btn carries flex-basis: 300px — together that overflows and
   produces a horizontal scrollbar. Both are global and used by every modal, so the fix is scoped to
   this popup rather than applied to them. */
.ewb-footer {
    flex-wrap: wrap;
    /* 30px between seven controls is most of the overflow on its own. Row gap is kept larger so the
       two lines stay visually separate. */
    gap: 10px 12px;

    /* Matches .ewb-popup-body's width, and it is load-bearing rather than cosmetic.
       ModalSize.Automatic resolves to width: fit-content, which sizes to MAX-content — and
       max-content ignores wrapping, so it measures all seven buttons on one notional line (~820px).
       Without this cap the footer, not the body, becomes the widest child and stretches the whole
       dialog well past its 600px content, leaving a band of empty space down both sides. Capping it
       lets the body decide the width and the buttons wrap inside it. */
    max-width: 600px;
    box-sizing: border-box;
}

/* A zero-height full-width flex item: everything after it is pushed onto the next line. Used instead
   of relying on natural wrapping so the break lands in the same place regardless of how wide the
   button labels happen to render. */
.ewb-footer-break {
    flex-basis: 100%;
    height: 0;
    margin: 0;
    padding: 0;
}

/* Without this, Generate and Close inherit .custom-modal-footer .btn's flex-basis: 300px and each
   demands a third of the dialog, which is most of why the row overflowed in the first place.

   width: auto is the non-obvious half. .btn-primary and .btn-secondary are declared width: 100% in
   app.css, and the global flex-basis: 300px was the only thing holding that back — so relaxing the
   basis to auto without also releasing the width makes the basis resolve FROM that 100%, and Close
   then claims the whole line on its own. Both have to change together. */
.ewb-footer .btn {
    flex: 0 1 auto;
    width: auto;
    min-width: 110px;
}

/* The shared footer reserves 20px above the buttons on top of its own border. With the buttons now
   on two lines that reads as a gap rather than separation — 12px keeps the divider legible without
   stretching a short dialog. Scoped to .ewb-footer so other modals' footers are untouched. */
.ewb-footer.custom-modal-footer {
    padding-top: 12px;
}