/* Uses the platform's fonts, buttons and colour tokens. */
.invoice-ux{display:grid;gap:1.25rem;min-width:0}
.invoice-ux-heading,.invoice-ux-section-head,.invoice-ux-result-head,.account-ux-overview{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.invoice-ux-heading h1,.invoice-ux-section h2{margin:0}
.invoice-ux-heading p{margin:.35rem 0 0;color:var(--sh-color-muted,#61656a)}
.invoice-ux-section{background:var(--sh-color-surface,#fff);border:1px solid var(--sh-color-border,#dedede);border-radius:16px;padding:1.25rem;min-width:0}
.invoice-ux-section>h2,.invoice-ux-section-head{margin-bottom:1rem}
.invoice-ux-section summary,.invoice-ux-help summary{cursor:pointer;font-weight:700;min-height:44px;display:list-item;align-content:center}
.invoice-ux-filters{display:grid;grid-template-columns:minmax(12rem,2fr) repeat(4,minmax(8rem,1fr)) auto;gap:.75rem;align-items:end}
.invoice-ux-filters label{display:grid;gap:.3rem;min-width:0;margin:0}
.invoice-ux-filters input,.invoice-ux-filters select{min-width:0;width:100%;min-height:44px;margin:0}
.invoice-ux-filters button{min-height:44px;white-space:nowrap}
.invoice-ux-main-filters{grid-template-columns:minmax(12rem,2fr) minmax(0,5fr)}
.invoice-ux-filter-fields{display:grid;grid-template-columns:repeat(4,minmax(7rem,1fr)) auto;gap:.75rem;align-items:end;min-width:0}
.invoice-ux-filter-toggle{display:none}
@media(min-width:768px){.invoice-ux-filter-fields[hidden]{display:grid!important}}
.invoice-ux-help{margin:.5rem 0}
.invoice-ux-help p{margin:0 0 .75rem}
.invoice-ux-result-head{padding:.7rem 0;color:var(--sh-color-muted,#61656a)}
.invoice-ux-table-wrap{overflow-x:auto;max-width:100%;border:1px solid var(--sh-color-border,#dedede);border-radius:12px}
.invoice-ux-table{border-collapse:collapse;width:100%;min-width:760px;text-align:start;font-variant-numeric:tabular-nums}
.invoice-ux-table.invoice-ux-simple-table{min-width:420px}
.invoice-ux-simple-table td:first-child{overflow-wrap:anywhere}
.invoice-ux-table th,.invoice-ux-table td{text-align:start;padding:.8rem .75rem;border-bottom:1px solid var(--sh-color-border,#dedede);vertical-align:middle}
.invoice-ux-table th{background:var(--sh-color-surface-muted,#f6f6f6);white-space:nowrap}
.invoice-ux-table tbody tr:last-child td{border-bottom:0}
.invoice-ux-table td small,.invoice-ux-card small,.invoice-ux-accounts small{display:block;color:var(--sh-color-muted,#61656a);margin-top:.25rem}
.invoice-ux-table bdi,.invoice-ux-card bdi,.account-ux bdi{unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.invoice-ux-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.invoice-ux-actions .btn,.invoice-ux-pages .btn,.invoice-ux-accounts .btn{min-height:44px}
.invoice-ux-profit{margin-top:.5rem;font-size:.9em}
.invoice-ux-profit summary{min-height:auto;display:list-item;cursor:pointer}
.invoice-ux-cards,.account-ux-cards{display:none}
.invoice-ux-pages{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;margin-top:1rem}
.invoice-ux-accounts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:.75rem}
.invoice-ux-accounts article{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem;border:1px solid var(--sh-color-border,#dedede);border-radius:12px}
.account-ux-overview{padding:1rem;border:1px solid var(--sh-color-border,#dedede);border-radius:12px}
.account-ux-overview span,.account-ux-overview strong{display:block}
.account-ux-overview strong{font-size:1.35rem}
.account-statement-actions,.account-statement-actions #account-statement-controls{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.account-statement-actions .hint{flex-basis:100%;margin:.25rem 0}
#account-statement-print{display:none}
@media print{
 body.account-statement-printing>*:not(#account-statement-print){display:none!important}
 body.account-statement-printing #account-statement-print{display:block!important}
 #account-statement-print .statement-sheet{width:auto!important;min-height:0!important;padding:0!important}
 #account-statement-print thead{display:table-header-group}
}
.account-ux-filters{grid-template-columns:minmax(12rem,2fr) repeat(2,minmax(8rem,1fr)) auto;margin-bottom:1rem}
.invoice-ux-text-button{border:0;background:transparent;text-decoration:underline;cursor:pointer;font:inherit;color:inherit;padding:.4rem}
.invoice-ux-error{color:var(--sh-color-danger,#9c2525)}
dialog.account-ux-dialog{width:min(96vw,1180px);max-width:1180px;max-height:92dvh}
.invoice-ux :focus-visible,.account-ux :focus-visible{outline:3px solid var(--sh-color-focus,#545a60);outline-offset:3px}
@media(min-width:768px) and (max-width:1100px){.invoice-ux-main-filters{grid-template-columns:1fr}.invoice-ux-filter-fields{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){
 .invoice-ux-section{padding:1rem}
 .invoice-ux-filters,.account-ux-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
 .invoice-ux-filters label:first-child{grid-column:1/-1}
 .invoice-ux-main-filters{grid-template-columns:minmax(0,1fr) auto;align-items:end}
 .invoice-ux-main-filters>label:first-child{grid-column:auto}
 .invoice-ux-filter-toggle{display:block}
 .invoice-ux-filter-fields{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}
 .invoice-ux-filter-fields[hidden]{display:none}
 .invoice-ux-filter-fields label:first-child{grid-column:auto}
 .invoice-ux .invoice-ux-table-wrap,.account-ux-table-wrap{display:block;max-width:100%;overflow-x:auto}
 .invoice-ux-cards,.account-ux-cards{display:none}
 .invoice-ux-card{padding:1rem;border:1px solid var(--sh-color-border,#dedede);border-radius:12px}
 .invoice-ux-card-head{display:flex;justify-content:space-between;align-items:start;gap:.75rem}
 .invoice-ux-card-head>div{min-width:0;overflow-wrap:anywhere}
 .invoice-ux-card dl{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.9rem 0}
 .invoice-ux-card dt{color:var(--sh-color-muted,#61656a)}
 .invoice-ux-card dd{margin:0;font-weight:700}
 .invoice-ux-actions .btn{flex:1}
 .invoice-ux-pages{justify-content:center}
 dialog.account-ux-dialog{width:calc(100vw - 24px);max-height:90dvh}
}

/* Reflow each invoice row on small screens while keeping its values and actions together. */
@media(max-width:600px){
 #invoice-ux-results>.invoice-ux-table-wrap{overflow:visible;border:0;border-radius:0}
 #invoice-ux-results .invoice-ux-table{display:block;min-width:0}
 #invoice-ux-results .invoice-ux-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
 #invoice-ux-results .invoice-ux-table tbody{display:block}
 #invoice-ux-results .invoice-ux-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'customer reference' 'total date' 'paid balance' 'actions actions';gap:.55rem .75rem;padding:1rem 0;border-bottom:1px solid var(--sh-color-border,#dedede)}
 #invoice-ux-results .invoice-ux-table td{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:0;border:0;white-space:normal;overflow-wrap:anywhere}
 #invoice-ux-results .invoice-ux-table td:nth-child(1){grid-area:reference}
 #invoice-ux-results .invoice-ux-table td:nth-child(2){grid-area:customer;font-weight:700}
 #invoice-ux-results .invoice-ux-table td:nth-child(3){grid-area:date}
 #invoice-ux-results .invoice-ux-table td:nth-child(4){grid-area:total;font-weight:700}
 #invoice-ux-results .invoice-ux-table td:nth-child(5){grid-area:paid}
 #invoice-ux-results .invoice-ux-table td:nth-child(6){grid-area:balance}
 #invoice-ux-results .invoice-ux-table td:nth-child(7){grid-area:actions}
 #invoice-ux-results .invoice-ux-table td:nth-child(3)::before{content:'التاريخ'}
 #invoice-ux-results .invoice-ux-table td:nth-child(4)::before{content:'قيمة الفاتورة'}
 #invoice-ux-results .invoice-ux-table td:nth-child(5)::before{content:'المدفوع'}
 #invoice-ux-results .invoice-ux-table td:nth-child(6):has(>bdi)::before{content:'متبقي قبل التسويات'}
 #invoice-ux-results .invoice-ux-table td::before{color:var(--sh-color-muted,#61656a);font-size:.9em;font-weight:400}
 #invoice-ux-results .invoice-ux-actions{width:100%}
}