/* Invoice viewer and payment deadlines share the graphite/mint interface. */
.q-dialog .q-dialog__inner > .cashout-invoice {
    width: 640px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px);
    padding: 26px !important; gap: 18px; overflow-y: auto;
    background: #19251e !important; border: 1px solid #3c5142; border-radius: 20px !important;
}
.cashout-invoice .invoice-heading { gap: 14px; flex-wrap: nowrap; }
.cashout-invoice .invoice-heading-icon { font-size: 28px; color: #c5ebd2; padding: 12px; border-radius: 14px; background: #304b38; }
.cashout-invoice .invoice-title { font-size: 25px; font-weight: 600; letter-spacing: -.03em; }
.cashout-invoice .invoice-subtitle { font-size: 12px; color: #acbfb0; overflow-wrap: anywhere; }
.cashout-invoice .invoice-caption { font-size: 12px; color: #acbfb0; line-height: 1.6; }
.cashout-invoice .invoice-notice { padding: 12px; background: #413623; color: #f4d491; border-radius: 10px; }
.cashout-invoice .invoice-field { padding: 12px 16px; border: 1px solid #344a3b; background: #202e25; border-radius: 11px; flex-wrap: nowrap; }
.cashout-invoice .invoice-field-label { font-size: 11px; color: #acbfb0; }
.cashout-invoice .invoice-field-value { font-size: 16px; color: #f0f5ef; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cashout-invoice .invoice-field-missing { font-size: 14px; color: #e8c683; }
.cashout-invoice .invoice-field .flex-1, .cashout-invoice .invoice-heading .flex-1 { min-width: 0; }
.cashout-invoice .q-btn { min-height: 42px; border-radius: 9px; color: #c5ebd2 !important; }
.cashout-invoice .invoice-tools { gap: 8px; align-items: center; }
.cashout-invoice .invoice-tools a { padding: 11px 13px; font-size: 13px; text-decoration: none; border: 1px solid #425b49; border-radius: 9px; }
.cashout-invoice .invoice-tools .invoice-primary-link,
.cashout-invoice .invoice-pay.q-btn, .cashout-invoice .invoice-send.q-btn {
    background: #c5ebd2 !important; color: #14281c !important; font-weight: 600;
}
.cashout-invoice .invoice-pay .q-btn__content, .cashout-invoice .invoice-send .q-btn__content { color: #14281c !important; }
.cashout-invoice .invoice-mail { border-top: 1px solid #3b5042; padding-top: 8px; }
.cashout-invoice .invoice-mail .q-expansion-item__content .nicegui-column { gap: 14px; padding: 12px 0 0; }
.cashout-invoice .invoice-mail .q-field { min-width: 0; }
.cashout-invoice .invoice-mail .q-item { padding: 8px 0; }
.cashout-due { width: 100%; min-width: 0; }
.cashout-due .due-heading { margin-bottom: 10px; flex-wrap: wrap; }
.cashout-due .due-heading h1 { font-size: 38px; font-weight: 600; letter-spacing: -.04em; }
.cashout-due .due-subtitle { color: #a9bcaf; font-size: 14px; margin-bottom: 28px; }
.cashout-due .due-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cashout-due .due-kpis > * { width: 100% !important; min-width: 0 !important; border-radius: 16px !important; }
.cashout-due .due-toolbar { padding: 12px; width: 100%; background: #1c2b22; border: 1px solid #344a3b; border-radius: 12px; }
.cashout-due .due-toolbar .q-btn { min-height: 40px; padding: 8px 16px; border-radius: 8px; text-transform: none; }
.cashout-due .due-list { min-width: 0; container-type: inline-size; }
.cashout-due .dt-group { margin: 26px 0 14px; }
.cashout-due .g-label { font-size: 17px; font-weight: 600; }
.cashout-due .due-today { color: #eec681; }
.cashout-due .due-table-head, .cashout-due .due-record {
    display: grid !important; grid-template-columns: 90px minmax(180px, 1fr) 130px 64px 140px 150px 65px 115px 150px 100px;
    gap: 16px !important; width: 100%; height: auto !important; min-height: 80px;
    padding: 16px !important; border: 1px solid #34493b !important; border-radius: 12px; margin-bottom: 8px;
    background: #1a281f !important; align-items: center;
}
.cashout-due .due-record:hover { background: #24372b !important; }
.cashout-due .due-table-head { min-height: 40px; background: transparent !important; border-color: transparent !important; font-size: 14px; color: #a9bcaf; }
.cashout-due .due-table-head > :is(:nth-child(4), :nth-child(5), :nth-child(9)) { text-align: right; }
.cashout-due .due-table-head > :nth-child(7) { text-align: center; }
.cashout-due .due-record > *, .cashout-due .due-table-head > * { width: auto !important; min-width: 0 !important; max-width: none !important; }
.cashout-due .due-record > div > span { white-space: nowrap !important; overflow-wrap: normal; }
.cashout-due .due-record > :nth-child(2) { font-size: 17px; font-weight: 500; overflow-wrap: anywhere; }
.cashout-due .due-record > :nth-child(3) > span { white-space: normal !important; overflow-wrap: anywhere; }
.cashout-due .due-record > :nth-child(9) > span { white-space: normal !important; overflow-wrap: normal; }
.cashout-due .due-record .status-pill { display: inline-flex !important; align-items: center; width: max-content; max-width: 100%; padding: 8px 12px; border-radius: 8px; line-height: 1.2; white-space: nowrap !important; font-size: 15px !important; }
.cashout-due .due-record > :nth-child(5) { color: #c5ebd2; }
.cashout-due .due-record > :nth-child(7) { text-align: center; }
.cashout-due .due-record .q-btn { min-height: 38px; border-radius: 8px; }
.cashout-due .due-record > :last-child { display: flex !important; flex-wrap: wrap; gap: 10px !important; }
.cashout-due .due-record > :last-child a { min-height: 38px; align-items: center; padding: 6px; }
.cashout-due .dt-footer { padding: 20px; margin-top: 22px; border: 1px solid #34493b; border-radius: 12px; background: #203025; flex-wrap: wrap; gap: 20px; }
@container (max-width: 1460px) {
    .cashout-due .due-table-head { display: none !important; }
    .cashout-due .due-record { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cashout-due .due-record > :nth-child(1) { grid-column: 4; grid-row: 1; }
    .cashout-due .due-record > :nth-child(2) { grid-column: 1 / 4; grid-row: 1; }
    .cashout-due .due-record > :nth-child(3) { grid-column: 1; grid-row: 2; }
    .cashout-due .due-record > :nth-child(4) { grid-column: 1; grid-row: 3; }
    .cashout-due .due-record > :nth-child(5) { grid-column: 2; grid-row: 3; }
    .cashout-due .due-record > :nth-child(6) { grid-column: 2; grid-row: 2; }
    .cashout-due .due-record > :nth-child(7) { grid-column: 3; grid-row: 3; }
    .cashout-due .due-record > :nth-child(8) { grid-column: 3; grid-row: 2; }
    .cashout-due .due-record > :nth-child(9) { grid-column: 4; grid-row: 2; }
    .cashout-due .due-record > :nth-child(4)::before { content: 'Menge'; }
    .cashout-due .due-record > :nth-child(5)::before { content: 'Auszahlung'; }
    .cashout-due .due-record > :nth-child(7)::before { content: 'Rechnung'; }
    .cashout-due .due-record > :nth-child(8)::before { content: 'Fällig am'; }
    .cashout-due .due-record > :nth-child(9)::before { content: 'Frist'; }
    .cashout-due .due-record > :nth-child(10) { grid-column: 4; grid-row: 3; justify-content: flex-start; }
    .cashout-due .due-record > div { display: block !important; }
    .cashout-due .due-record > :nth-child(7) { text-align: left; }
    .cashout-due .due-record > div > span { text-align: left !important; }
    .cashout-due .due-record > div::before { display: block; margin-bottom: 6px; font: 11px Inter, sans-serif; color: #a9bcaf; }
}
@media (max-width: 850px) {
    .cashout-due .due-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cashout-due .due-record { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px !important; }
    .cashout-due .due-record > * { grid-column: auto !important; grid-row: auto !important; }
    .cashout-due .due-record > :nth-child(2) { grid-column: 1 / -1 !important; grid-row: 1 !important; font-size: 16px; }
    .cashout-due .due-record > :nth-child(10) { grid-column: 1 / -1 !important; }
    .cashout-due .due-record .q-btn { min-height: 44px; }
    .cashout-due .due-record > div > span { text-align: left !important; }
}
@media (max-width: 480px) {
    .q-dialog .q-dialog__inner > .cashout-invoice { padding: 18px !important; }
    .cashout-invoice .invoice-field { padding: 12px; }
    .cashout-invoice .invoice-field-value { font-size: 14px; }
    .cashout-due .due-kpis { grid-template-columns: minmax(0, 1fr); }
    .cashout-due .due-heading h1 { font-size: 30px; }
}
@media (max-width: 360px) {
    .cashout-due .due-record { grid-template-columns: minmax(0, 1fr); }
}
