/* ============================================================
   CASCADE-TRADER CABINET (Pages/CascadeTrader) on the style C kit.
   Only what the kit (ui.css) does not cover. Tokens only.
   ============================================================ */

/* Two sections side by side (dashboard charts, overview settings), split by a line;
   one column at 1100px and below. Rows and sections around them get the same line
   and air as consecutive .ui-section blocks. */
.cas-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.cas-row > .ui-section + .ui-section {
    padding-top: 0; border-top: 0;
    padding-left: var(--space-6); border-left: 1px solid var(--color-border-strong);
}
.cas-row + .cas-row, .cas-row + .ui-section, .ui-section + .cas-row {
    padding-top: var(--space-6); border-top: 1px solid var(--color-border-strong);
}
@media (max-width: 1100px) {
    .cas-row { grid-template-columns: minmax(0, 1fr); }
    .cas-row > .ui-section + .ui-section {
        padding-left: 0; border-left: 0;
        padding-top: var(--space-6); border-top: 1px solid var(--color-border-strong);
    }
}

/* Read-only settings and the 2FA form keep a readable width. */
.cas-form { max-width: 760px; }
.cas-form .form-group { margin-bottom: 0; }
.cas-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cas-field .form-input { flex: 1 1 240px; min-width: 0; height: 32px; }

/* Overview: the integration state under the header. */
.cas-state { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.cas-state__name { color: var(--color-text-muted); font-size: var(--font-sm); }

/* Balances, Operations tab: the source switch and the filter row on one line. */
.cas-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); position: relative; z-index: 5; }
.cas-bar > .mini-seg { flex-wrap: wrap; max-width: 100%; } /* on a phone the switch wraps instead of widening the page */

/* Balances, By geo tab: the geo cell (flag + name). */
.cas-geo { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.cas-geo > img { width: 20px; height: 15px; object-fit: cover; border-radius: var(--radius-chip); border: 1px solid var(--color-border); }

/* Operation list: a long description wraps instead of widening the table. */
.ui-table td.cas-desc { min-width: 200px; max-width: 320px; white-space: normal; color: var(--color-text-muted); }