/* HiTechCloud portal — billing pages. Uses the tokens and components of portal.css; page-specific rules only. */

/* Balance summary under the billing page head: two cells, not four. */
.cm-billing-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 24px; }
@media (min-width: 992px) { .cm-billing-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; } }
.cm-stat__value.is-warning { color: var(--warning); }

/* Sub-navigation of the billing area (clientarea/top_nav.tpl) sits right under the stats. */

/* Status tabs: main.js [data-sorter] toggles .active on the <li>. */
.cm-seg li { list-style: none; border-radius: 8px; }
.cm-seg li.active { background: var(--surface); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.06); }
.cm-seg li.active > a { color: var(--foreground) !important; }
html.darkmode .cm-seg li.active { background: var(--secondary-hover); }

/* Sortable header: label then a small arrow. .sort-icon stays a Material glyph because main.js writes
   the glyph name into it ("unfold_more" / "expand_less" / "expand_more"). */
.cm-sort .sort-icon { font-size: 14px !important; line-height: 1; color: var(--muted); }
.cm-th-num .cm-sort { flex-direction: row; }
.cm-app .table thead th .cm-sort { font-size: 12px; font-weight: 500; }

/* Checkbox column */
.cm-app .table .cm-td-check { width: 44px; padding-right: 0; }
.cm-app .table .cm-td-check input { width: 16px; height: 16px; vertical-align: middle; }

/* Overdue: due date and badge in red; the row itself stays neutral. */
.cm-overdue { color: var(--error-strong); font-weight: 500; }
.cm-app .table td .cm-row-actions { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }

/* Toolbar above billing tables */
.cm-billing-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.cm-billing-toolbar__end { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cm-billing-toolbar .payall-selected { display: none; }
@media (max-width: 575.98px) {
  .cm-billing-toolbar__end { margin-left: 0; width: 100%; }
  .cm-billing-toolbar__end .btn { flex: 1 1 auto; }
}

/* Filter box (toggled by #service-filters in top_nav) */
.cm-app .filters-box { margin: 0 0 12px !important; padding: 16px 20px !important; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.cm-filters-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 16px; align-items: end; }
@media (min-width: 768px) { .cm-filters-grid { grid-template-columns: 1fr 2fr 1fr auto; } }
.cm-filters-grid .form-group { margin: 0; }

/* Pagination: ‹ 1 2 3 ›. main.js inserts li.page-li between the two arrow items. */
.cm-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.cm-pager .pagination { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cm-pager .page-item-left .page-link, .cm-pager .page-item-right .page-link { width: 32px; padding: 0; color: var(--muted); }
.cm-pager .page-item-left .page-link:hover, .cm-pager .page-item-right .page-link:hover { color: var(--foreground); }

/* Add funds */
.cm-funds { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
@media (min-width: 1200px) { .cm-funds { grid-template-columns: minmax(0, 1fr) 22rem; } }
.cm-funds-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 768px) { .cm-funds-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cm-funds-form .form-group { margin: 0; }
.cm-funds-form .cm-funds-form__full { grid-column: 1 / -1; }
.cm-amount { position: relative; }
.cm-amount .form-control { padding-right: 56px; font-variant-numeric: tabular-nums; }
.cm-amount__unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--muted); pointer-events: none; }
.cm-funds-note { display: flex; gap: 12px; padding: 16px 20px; }
.cm-funds-note + .cm-funds-note { border-top: 1px solid var(--border); }
.cm-funds-note .cm-i { margin-top: 2px; color: var(--muted); }
.cm-funds-note strong { display: block; font-size: 14px; font-weight: 500; }
.cm-funds-note span { font-size: 13px; color: var(--muted); }
.cm-card__foot--actions { justify-content: flex-start; color: var(--foreground); }

/* Result pages (thank you / payment failed) */
.cm-result { max-width: 560px; margin: 24px auto; text-align: center; }
.cm-result .cm-card__body { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 24px; }
.cm-result__icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); margin-bottom: 8px; }
.cm-result__icon.is-success { background: var(--success-bg); color: var(--success); }
.cm-result__icon.is-danger { background: var(--error-bg); color: var(--error-strong); }
.cm-result h1 { margin: 0; font-size: 20px; }
.cm-result p { margin: 0; max-width: 46ch; color: var(--muted); }
.cm-result__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }

/* Card on file */
.cm-cc { display: flex; align-items: center; gap: 16px; }
.cm-cc__brand { width: 48px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--item-hover); color: var(--muted); }
.cm-cc__num { font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* Estimate badges (legacy class names) */
.cm-app .badge-estimate-Draft, .cm-app .badge-estimate-Sent { background: var(--warning-bg); color: var(--warning); }
.cm-app .badge-estimate-Accepted, .cm-app .badge-estimate-Invoiced { background: var(--success-bg); color: var(--success); }
.cm-app .badge-estimate-Dead, .cm-app .badge-estimate-Rejected { background: var(--error-bg); color: var(--error-strong); }
.cm-app .badge-Receiptunpaid { background: var(--warning-bg); color: var(--warning); }
.cm-app .badge-Receiptpaid { background: var(--success-bg); color: var(--success); }

/* Invoice rows under sm: two-line row — "#id [status] … amount" / "Hạn dd/mm/yyyy … [Thanh toán]". */
@media (max-width: 575.98px) {
  .cm-app table.invoices-table.cm-stack-sm tr { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; }
  .cm-app table.invoices-table.cm-stack-sm td { width: auto; padding: 0; }
  .cm-app table.invoices-table.cm-stack-sm td[data-label]::before { display: none; }
  .cm-app table.invoices-table td.cm-inv-main { grid-column: 1; grid-row: 1; }
  .cm-app table.invoices-table td.cm-inv-status { grid-column: 2; grid-row: 1; min-width: 0; }
  .cm-app table.invoices-table td.cm-inv-amount { grid-column: 3; grid-row: 1; text-align: right !important; font-weight: 500; }
  .cm-app table.invoices-table td.cm-inv-due { grid-column: 1 / 3; grid-row: 2; font-size: 13px; color: var(--muted); white-space: nowrap; }
  .cm-app table.invoices-table.cm-stack-sm td.cm-inv-due::before { display: inline; content: attr(data-short) " "; color: var(--muted); font-size: 13px; }
  .cm-app table.invoices-table td.cm-inv-due.cm-overdue { color: var(--error-strong); }
  .cm-app table.invoices-table td.cm-inv-actions { grid-column: 3; grid-row: 2; justify-self: end; }
  .cm-app table.invoices-table td.cm-inv-actions .cm-dl-unpaid { display: none; }
  .cm-app table.invoices-table td[colspan] { grid-column: 1 / -1; }
}

/* Payment method as selectable cards (radio, same name as the old <select>). */
.cm-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.cm-choice { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; font-weight: 400 !important; }
.cm-choice:hover { background: var(--surface-hover); }
.cm-choice input { position: absolute; opacity: 0; pointer-events: none; }
.cm-choice__dot { width: 16px; height: 16px; flex-shrink: 0; border-radius: 9999px; border: 1px solid var(--border-strong); background: var(--surface); }
.cm-choice__label { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.cm-choice:has(input:checked) { border-color: var(--border-focus); box-shadow: 0 0 0 2px var(--ring-focus); }
.cm-choice input:checked + .cm-choice__dot { border: 5px solid var(--primary); }
@media (max-width: 575.98px) {
  .cm-billing-stats .cm-stat__icon, .cm-billing-stats .cm-stat__sub { display: none; }
  .cm-billing-stats { grid-template-columns: minmax(0, 1fr); }
  .cm-billing-stats .cm-stat__value { font-size: 18px; }
}
.cm-cc__brand img { height: 22px !important; width: auto; max-width: 40px; }
.cm-cc .cm-row__main { min-width: 0; }
@media (max-width: 575.98px) { .cm-cc { gap: 12px; } }
.checkout table td { padding: 6px 8px 6px 0; vertical-align: middle; font-size: 14px; }

/* Invoice view: payment card + document. Payment first on narrow screens, right column from 1200px. */
.cm-invoice-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
@media (min-width: 1200px) {
  .cm-invoice-layout { grid-template-columns: minmax(0, 1fr) 22rem; }
  .cm-invoice-layout .cm-invoice-pay { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--topbar-h) + 24px); }
  .cm-invoice-layout .cm-invoice-doc { grid-column: 1; grid-row: 1; }
}
.cm-app .cm-invoice-doc.info-box, .cm-app .cm-invoice-pay.info-box { padding: 0 !important; margin: 0; }
.cm-invoice-doc .invoice-iframe { padding: 0 !important; border: 0 !important; background: transparent !important; }
.cm-invoice-doc iframe { display: block; min-height: 480px; border-radius: var(--radius); }
.cm-invoice-pay__total { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.cm-invoice-pay__amount { font-size: 24px; font-weight: 600; line-height: 1.3; }
.cm-invoice-pay label { display: block; margin-bottom: 6px; }
.cm-invoice-gateway { margin-top: 12px; }
.cm-invoice-gateway:empty { display: none; }
.cm-invoice-gateway img { max-width: 100%; height: auto; }
.cm-invoice-gateway .btn, .cm-invoice-gateway input[type=submit], .cm-invoice-gateway button { width: 100%; }
.cm-invoice-pay__extra { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }