.client-shell { background: #f2f3f5; }
.client-sidebar { background: radial-gradient(circle at 10% 3%, rgba(255,0,0,.2), transparent 25%), linear-gradient(160deg, #25262a, #111216 62%); }
.client-sidebar .logout-form > span { min-width: 0; }
.client-sidebar .logout-form strong, .client-sidebar .logout-form small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-sidebar .logout-form small { max-width: 150px; margin-top: 2px; font-size: 10px; }
.client-content { width: 100%; max-width: none; }
.client-page-header { margin-bottom: 25px; }
.period-filter { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 9px; }
.period-filter label { min-width: 140px; }
.period-filter label:first-of-type { min-width: 180px; }
.period-filter select { background: #fff; }
.client-metrics article { min-height: 150px; }
.badge-danger { background: #fff0f0; color: #b52222; }
.machine-health-panel { min-width: 0; }
.client-machine-list { display: grid; }
.client-machine-list a { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 22px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.client-machine-list a:last-child { border-bottom: 0; }
.client-machine-list a:hover { background: #fafafa; }
.client-machine-list strong, .client-machine-list small { display: block; }
.client-machine-list small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.client-machine-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.machine-client-card { padding: 23px; }
.machine-client-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.machine-client-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--brand-black); color: #fff; font-size: 20px; }
.machine-client-card h2 { margin-bottom: 5px; }
.machine-client-card > p { min-height: 38px; color: var(--muted); }
.machine-client-card dl { display: grid; gap: 10px; margin: 20px 0; }
.machine-client-card dl div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.machine-client-card dt { color: var(--muted); font-size: 12px; }
.machine-client-card dd { margin: 0; font-size: 13px; font-weight: 800; text-align: right; }
.machine-client-card dd small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.machine-client-card .button { width: 100%; }
.client-machine-overview .machine-avatar { font-size: 24px; }
.machine-freshness dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; padding: 22px; }
.machine-freshness dl div { padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: #fafafa; }
.machine-freshness dt, .machine-freshness dd { display: block; }
.machine-freshness dt { margin-bottom: 7px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.machine-freshness dd { margin: 0; font-weight: 800; }
.machine-freshness dl small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.canister-help { margin: 0; padding: 15px 21px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff9e9; color: #67562c; font-size: 12px; line-height: 1.55; }
.canister-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; padding: 21px; }
.canister-grid article { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: #fafafa; }
.canister-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.canister-head > span:first-child { min-width: 0; }
.canister-head strong { overflow-wrap: anywhere; }
.canister-head .badge { flex: 0 0 auto; max-width: 48%; text-align: center; }
.canister-grid strong, .canister-grid small { display: block; }
.canister-grid small { margin-top: 4px; color: var(--muted); }
.canister-grid meter { display: block; width: 100%; height: 8px; margin: 17px 0 9px; }
.canister-scale-note { min-height: 34px; margin: 17px 0 9px; padding: 8px 10px; border-radius: 8px; background: #f0f1f3; color: var(--muted); font-size: 11px; line-height: 1.4; }
.canister-grid dl { display: grid; gap: 8px; margin: 15px 0 0; }
.canister-grid dl div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.canister-grid dt { color: var(--muted); }
.canister-grid dd { margin: 0; font-weight: 800; text-align: right; }
.client-pagination { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.client-pagination > span { color: var(--muted); font-size: 12px; font-weight: 800; }
.report-header-card { overflow: hidden; }
.report-header-card .panel-heading { align-items: flex-start; }
.report-description { max-width: 720px; margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.report-export-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.button-excel { border-color: #176b43; background: #176b43; color: #fff; }
.button-excel:hover { border-color: #105536; background: #105536; color: #fff; }
.report-filters { display: grid; grid-template-columns: 1.25fr 1.15fr repeat(3, minmax(145px, 1fr)) auto; align-items: end; gap: 12px; padding: 20px 24px 24px; border-top: 1px solid var(--line); background: #fafafb; }
.report-filters label { min-width: 0; }
.report-filters .button { min-height: 45px; white-space: nowrap; }
.report-table-card { overflow: hidden; }
.password-card { width: min(500px, 100%); }
.payment-machine-selector { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; padding: 22px; }
.payment-machine-selector > div { max-width: 660px; }
.payment-machine-selector h2 { margin: 3px 0 7px; }
.payment-machine-selector p:last-child { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.payment-machine-selector form { display: flex; align-items: flex-end; gap: 10px; min-width: min(520px, 100%); }
.payment-machine-selector form label { flex: 1; min-width: 240px; }
.payment-settings-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 22px; align-items: start; }
.payment-config-card, .release-code-card { overflow: hidden; }
.payment-help { margin: 0; padding: 16px 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fafafa; color: var(--muted); font-size: 12px; line-height: 1.55; }
.payment-config-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; padding: 22px; }
.payment-config-form label, .release-code-form label { min-width: 0; }
.payment-config-form label > small, .release-code-form label > small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.payment-config-form .wide { grid-column: 1 / -1; }
.payment-secret-field { min-width: 0; }
.payment-secret-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.payment-secret-controls input { flex: 1 1 180px; min-width: 0; }
.payment-secret-controls .button { flex: 0 0 auto; }
.payment-secret-controls .button:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.payment-secret-field > small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.payment-method-checks { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; margin: 0; border: 1px solid var(--line); border-radius: 13px; padding: 14px 16px; }
.payment-method-checks legend { padding: 0 6px; color: var(--muted); font-size: 11px; font-weight: 800; }
.payment-method-checks label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; }
.payment-method-checks input { width: 18px; height: 18px; accent-color: var(--brand-red); }
.payment-code-global { flex-basis: 100%; color: var(--muted); font-size: 11px; line-height: 1.45; }
.payment-form-actions { display: flex; justify-content: flex-end; }
.payment-provider-fields { min-width: 0; border: 1px solid var(--line); border-radius: 12px; }
.payment-provider-fields > summary { padding: 15px 16px; cursor: pointer; font-size: 13px; font-weight: 800; }
.payment-provider-fields > summary:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.payment-provider-fields > .payment-config-form { padding: 0 16px 18px; }
.sumup-pairing-form { border-top: 1px solid var(--line); }
.sumup-pairing-form .payment-help { padding: 0; border: 0; background: transparent; }
.sumup-pairing-form .payment-form-actions { align-items: flex-end; }
.release-code-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 20px 22px; }
.release-code-form .wide { grid-column: 1 / -1; }
.release-code-shortcut { display: flex; justify-content: flex-end; padding: 22px; }
.release-code-shortcut .button { width: 100%; }
.release-code-editor-card { overflow: hidden; }
.release-code-generator { display: flex; align-items: stretch; gap: 9px; margin-top: 7px; }
.release-code-generator input { flex: 1; min-width: 0; }
.release-code-generator .button { flex: 0 0 auto; white-space: nowrap; }
.release-code-editor-actions, .release-code-row-actions { display: flex; align-items: center; gap: 9px; }
.release-code-row-actions form { margin: 0; }
.release-code-table-card, .release-code-history-card { overflow: hidden; margin-top: 22px; }
.release-code-table-card td form { margin: 0; }
.release-code-history-card td code { display: inline-block; padding: 5px 8px; border-radius: 7px; background: #f0f1f3; color: var(--ink); font-size: 11px; white-space: nowrap; }
.release-code-list { display: grid; }
.release-code-list > div:not(.empty) { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 22px; border-top: 1px solid var(--line); }
.release-code-list > div:first-child { border-top: 0; }
.release-code-list strong, .release-code-list small { display: block; }
.release-code-list small { margin-top: 4px; color: var(--muted); font-size: 10px; }

@media (max-width: 1120px) {
    .client-machine-grid, .canister-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .payment-settings-grid { grid-template-columns: 1fr; }
    .report-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .report-filters .button { width: 100%; }
}
@media (max-width: 820px) {
    .client-sidebar nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .payment-machine-selector { align-items: stretch; flex-direction: column; }
    .payment-machine-selector form { min-width: 0; }
}
@media (max-width: 620px) {
    .report-header-card .panel-heading { align-items: stretch; flex-direction: column; }
    .report-export-actions, .report-export-actions .button { width: 100%; }
    .report-filters { grid-template-columns: 1fr; padding: 17px; }
    .client-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .client-machine-grid, .canister-grid, .machine-freshness dl { grid-template-columns: 1fr; }
    .canister-grid { padding: 16px; }
    .client-pagination { align-items: stretch; flex-direction: column; padding: 17px; }
    .client-pagination .button { width: 100%; }
    .period-filter, .period-filter label, .period-filter .button { width: 100%; }
    .payment-machine-selector form { align-items: stretch; flex-direction: column; }
    .payment-machine-selector form label, .payment-machine-selector form .button { width: 100%; min-width: 0; }
    .payment-config-form { grid-template-columns: 1fr; padding: 18px; }
    .payment-config-form .wide { grid-column: auto; }
    .release-code-form { grid-template-columns: 1fr; padding: 18px; }
    .release-code-form .wide { grid-column: auto; }
    .release-code-editor-actions { align-items: stretch; flex-direction: column; }
    .release-code-editor-actions .button { width: 100%; }
    .release-code-generator { flex-direction: column; }
    .release-code-generator .button { width: 100%; }
    .payment-form-actions .button { width: 100%; }
    .release-code-list > div:not(.empty) { align-items: stretch; flex-direction: column; }
    .release-code-list form, .release-code-list .button { width: 100%; }
}