/*
 * ContaBase Premium Fintech — foundation
 *
 * Scoped by [data-ui="premium"]. Legacy pages are not affected.
 * Colors alias the authenticated shell tokens; this layer adds the approved
 * Dashboard composition vocabulary (surfaces, spacing, radii, shadows,
 * headers, pills, fields, financial rows and states).
 */

[data-ui="premium"] {
    color-scheme: light;

    /* Canonical tokens (colors, typography, geometry and states) live in
       ui-tokens.css and are inherited here. The legacy --cb-* bridge is also
       defined globally inside the authenticated shell. */

    font-family: var(--ui-font-family);
    color: var(--ui-text);
}

html[data-theme="dark"] [data-ui="premium"],
html.dark [data-ui="premium"] {
    color-scheme: dark;
}

[data-ui="premium"] *,
[data-ui="premium"] *::before,
[data-ui="premium"] *::after { box-sizing: border-box; }

[data-ui="premium"] :focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
}

/* --- Page header ---------------------------------------------------------- */

.ui-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.ui-eyebrow {
    margin: 0 0 5px;
    color: var(--ui-text-muted);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ui-page-title {
    margin: 0;
    color: var(--ui-text);
    font-size: var(--ui-fs-title);
    font-weight: var(--ui-fw-title);
    letter-spacing: -.035em;
    line-height: 1.08;
    text-wrap: balance;
}

.ui-page-description {
    max-width: 60ch;
    margin: 7px 0 0;
    color: var(--ui-text-muted);
    font-size: var(--ui-fs-md);
    line-height: 1.5;
}

/* --- Panels and section headings ----------------------------------------- */

.ui-panel {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-panel);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-panel);
}

.ui-panel--flush { padding: 0; }
.ui-panel__body { padding: var(--ui-panel-pad); }

.ui-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.ui-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ui-section-icon {
    display: grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 11px;
    background: color-mix(in srgb, var(--ui-accent) 14%, transparent);
    color: var(--ui-accent-strong);
}

.ui-section-icon svg { width: 16px; height: 16px; }

.ui-section-title h2 {
    margin: 0;
    color: var(--ui-text);
    font-size: var(--ui-fs-lg);
    font-weight: 630;
    letter-spacing: -.015em;
}

.ui-section-title p {
    margin: 3px 0 0;
    color: var(--ui-text-subtle);
    font-size: 12.5px;
}

/* --- KPI / summary -------------------------------------------------------- */

.ui-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.ui-kpi {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-card);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-panel);
}

.ui-kpi__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ui-kpi__label {
    color: var(--ui-text-muted);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    letter-spacing: .015em;
}

.ui-kpi__icon {
    display: grid;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    background: var(--ui-surface-raised);
    color: var(--ui-text-muted);
}

.ui-kpi__icon svg { width: 15px; height: 15px; }

.ui-kpi__value {
    overflow: hidden;
    color: var(--ui-text);
    font-size: clamp(18px, 2.3vw, 23px);
    font-weight: 680;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-kpi__meta {
    color: var(--ui-text-subtle);
    font-size: var(--ui-fs-sm);
}

.ui-kpi--danger .ui-kpi__icon { background: color-mix(in srgb, var(--ui-danger) 13%, transparent); color: var(--ui-danger); }
.ui-kpi--danger .ui-kpi__value { color: var(--ui-danger); }
.ui-kpi--success .ui-kpi__icon { background: color-mix(in srgb, var(--ui-success) 13%, transparent); color: var(--ui-success); }
.ui-kpi--success .ui-kpi__value { color: var(--ui-success); }
.ui-kpi--warning .ui-kpi__icon { background: color-mix(in srgb, var(--ui-warning) 14%, transparent); color: var(--ui-warning); }
.ui-kpi--warning .ui-kpi__value { color: var(--ui-warning); }

/* --- Buttons, pills and badges ------------------------------------------- */

.ui-btn {
    display: inline-flex;
    min-height: var(--ui-control-height);
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border: var(--ui-border-width) solid transparent;
    border-radius: var(--ui-radius-button);
    background: transparent;
    color: var(--ui-text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 620;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--ui-transition), border-color var(--ui-transition), color var(--ui-transition), transform 120ms ease;
}

.ui-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.ui-btn:active { transform: scale(.98); }
.ui-btn:disabled,
.ui-btn[aria-disabled="true"] { opacity: var(--ui-disabled-opacity); cursor: not-allowed; transform: none; }
.ui-btn:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }

.ui-btn--primary {
    background: var(--ui-action-bg);
    color: var(--ui-action-fg);
    box-shadow: inset 0 1px 0 #ffffff24;
}
.ui-btn--primary:hover { background: var(--ui-action-bg-hover); }

.ui-btn--secondary {
    border-color: var(--ui-border);
    background: var(--ui-surface-raised);
    color: var(--ui-text);
}
.ui-btn--secondary:hover { border-color: var(--ui-border-strong); background: var(--ui-surface-hover); }

.ui-btn--ghost { color: var(--ui-text-muted); }
.ui-btn--ghost:hover { background: var(--ui-surface-hover); color: var(--ui-text); }

.ui-btn--sm { min-height: 34px; padding-inline: 11px; font-size: 11.5px; }

.ui-pill {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 6px;
    padding: 0 11px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface-raised);
    color: var(--ui-text-muted);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: 650;
    line-height: 1.5;
    white-space: nowrap;
}

.ui-badge--neutral { background: var(--ui-surface-raised); color: var(--ui-text-muted); }
.ui-badge--accent { background: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-surface)); color: var(--ui-accent-strong); }
.ui-badge--success { background: color-mix(in srgb, var(--ui-success) 8%, var(--ui-surface)); color: var(--ui-success); }
.ui-badge--warning { background: color-mix(in srgb, var(--ui-warning) 8%, var(--ui-surface)); color: var(--ui-warning); }
.ui-badge--danger { background: color-mix(in srgb, var(--ui-danger) 8%, var(--ui-surface)); color: var(--ui-danger); }
.ui-badge--info { background: color-mix(in srgb, var(--ui-info) 8%, var(--ui-surface)); color: var(--ui-info); }

/* --- Fields --------------------------------------------------------------- */

.ui-label {
    display: block;
    margin-bottom: 6px;
    color: var(--ui-text-muted);
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ui-input,
.ui-select,
.ui-textarea {
    width: 100%;
    min-height: var(--ui-control-height);
    padding: 0 13px;
    border: var(--ui-border-width) solid var(--ui-field-border);
    border-radius: var(--ui-radius-control);
    background: var(--ui-field-bg);
    color: var(--ui-text);
    font: inherit;
    font-size: var(--ui-fs-md);
    transition: border-color var(--ui-transition), background-color var(--ui-transition), box-shadow var(--ui-transition);
}

.ui-textarea { min-height: 96px; padding-block: 10px; resize: vertical; }

.ui-input::placeholder,
.ui-textarea::placeholder { color: var(--ui-text-subtle); }

.ui-input:hover,
.ui-select:hover,
.ui-textarea:hover { border-color: color-mix(in srgb, var(--ui-border-strong) 70%, var(--ui-text-subtle)); }

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
    outline: none;
    border-color: var(--ui-field-focus-border);
    box-shadow: none;
}

html[data-input-modality="keyboard"] .ui-input:focus,
html[data-input-modality="keyboard"] .ui-select:focus,
html[data-input-modality="keyboard"] .ui-textarea:focus {
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
}

.ui-input:disabled,
.ui-select:disabled,
.ui-textarea:disabled {
    opacity: var(--ui-disabled-opacity);
    cursor: not-allowed;
}

.ui-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ui-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.ui-search__icon {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 15px;
    height: 15px;
    color: var(--ui-text-subtle);
    pointer-events: none;
    transform: translateY(-50%);
}

.ui-input--search { padding-left: 40px; }

/* --- Tabs ----------------------------------------------------------------- */

.ui-tabs {
    display: flex;
    width: 100%;
    gap: 4px;
    margin-bottom: 14px;
    padding: 4px;
    border: var(--ui-border-width) solid var(--ui-border);
    border-radius: var(--ui-radius-tab);
    background: var(--ui-tab-bg);
}

.ui-tab {
    display: inline-flex;
    flex: 1 1 0;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: var(--ui-border-width) solid transparent;
    border-radius: var(--ui-radius-tab-item);
    background: transparent;
    color: var(--ui-text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 620;
    cursor: pointer;
    transition: background-color var(--ui-transition), border-color var(--ui-transition), color var(--ui-transition);
}

.ui-tab svg { width: 14px; height: 14px; }
.ui-tab:hover { background: var(--ui-surface-hover); color: var(--ui-text); }
.ui-tab:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-tab.is-active {
    border-color: var(--ui-tab-active-border);
    background: var(--ui-tab-active-bg);
    color: var(--ui-tab-active-fg);
    box-shadow: inset 0 1px 0 #ffffff14;
}

.ui-tab__count {
    min-width: 18px;
    padding: 1px 5px;
    border-radius: var(--ui-radius-badge);
    background: var(--ui-surface);
    color: var(--ui-text-subtle);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.ui-tab.is-active .ui-tab__count {
    background: color-mix(in srgb, var(--ui-accent) 14%, var(--ui-surface));
    color: var(--ui-tab-active-fg);
}

/* --- Financial list ------------------------------------------------------- */

.ui-list-panel { overflow: hidden; }

.ui-list-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-text-muted);
    font-size: 11.5px;
}

.ui-list-panel__head strong { color: var(--ui-text); font-weight: 620; }

.ui-list { display: flex; flex-direction: column; }

.ui-row {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text);
    text-decoration: none;
    transition: background-color var(--ui-transition), border-color var(--ui-transition);
}

.ui-list > :last-child .ui-row { border-bottom: 0; }

.ui-row:hover { background: var(--ui-surface-raised); }
.ui-row--link:focus-visible { position: relative; z-index: 1; outline-offset: -2px; }

.ui-row.is-overdue { background: color-mix(in srgb, var(--ui-danger) 4%, var(--ui-surface)); }
.ui-row.is-overdue:hover { background: color-mix(in srgb, var(--ui-danger) 7%, var(--ui-surface)); }

.ui-row__status {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 0;
    border-radius: var(--ui-radius-tile);
    background: var(--ui-surface-raised);
    color: var(--ui-text-muted);
    cursor: pointer;
    transition: background-color var(--ui-transition), color var(--ui-transition), transform 120ms ease;
}

.ui-row__status svg { width: 15px; height: 15px; }
.ui-row__status:hover { filter: brightness(1.08); }
.ui-row__status:active { transform: scale(.95); }

.ui-row__main { display: grid; gap: 3px; min-width: 0; }
.ui-row__main--button { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ui-row__main--button:hover .ui-row__title { color: var(--ui-accent-strong); }
.ui-row__main--button:focus-visible { border-radius: 6px; }
.ui-row__title { overflow: hidden; color: var(--ui-text); font-size: 13.5px; font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.ui-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; min-width: 0; color: var(--ui-text-subtle); font-size: var(--ui-fs-sm); line-height: 1.35; }
.ui-row__account { display: inline-flex; min-width: 0; align-items: center; gap: 5px; }
.ui-row__account-logo { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 5px; object-fit: contain; }
.ui-row__account-mark { display: inline-grid; width: 16px; height: 16px; flex: 0 0 auto; place-items: center; border-radius: 5px; background: var(--ic, var(--ui-accent)); color: #fff; font-size: 6px; font-weight: 760; line-height: 1; overflow: hidden; }
.ui-row__account-mark.hidden { display: none; }
.ui-row__note { font-size: var(--ui-fs-sm); font-weight: 550; }
.ui-row__note.is-scheduled { color: var(--ui-accent-strong); }

.ui-row__amount {
    color: var(--ui-text);
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -.012em;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.ui-row__amount.is-expense { color: var(--ui-danger); }
.ui-row__amount.is-income { color: var(--ui-success); }

.ui-row__actions { display: flex; align-items: center; gap: 4px; }

.ui-row__action {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 0;
    border-radius: var(--ui-radius-tile);
    background: transparent;
    color: var(--ui-text-subtle);
    cursor: pointer;
    transition: background-color var(--ui-transition), color var(--ui-transition);
}

.ui-row__action:hover { background: var(--ui-surface-hover); color: var(--ui-text); }
.ui-row__action svg { width: 14px; height: 14px; }
.ui-row__action--desktop { display: none; }
.ui-row__chevron { display: grid; width: 26px; height: 26px; place-items: center; color: var(--ui-text-subtle); }
.ui-row__chevron svg { width: 14px; height: 14px; }



.ui-avatar {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    overflow: hidden;
    border-radius: var(--ui-radius-tile);
    background: var(--ic, var(--ui-accent));
    color: #fff;
    font-size: 8px;
    font-weight: 760;
    line-height: 1;
    letter-spacing: -.02em;
}

.ui-avatar img { width: 100%; height: 100%; object-fit: contain; }
.ui-avatar svg { width: 16px; height: 16px; }
.ui-avatar .hidden { display: none; }
.ui-avatar--warning { background: color-mix(in srgb, var(--ui-warning) 16%, var(--ui-surface-raised)); color: var(--ui-warning); }
.ui-avatar--accent { background: color-mix(in srgb, var(--ui-accent) 16%, var(--ui-surface-raised)); color: var(--ui-accent-strong); }

/* --- Empty and loading ---------------------------------------------------- */

.ui-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 42px 22px;
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-panel);
    background: color-mix(in srgb, var(--ui-surface) 70%, transparent);
    text-align: center;
}

.ui-empty__icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 14px;
    background: var(--ui-surface-raised);
    color: var(--ui-text-subtle);
}

.ui-empty__icon svg { width: 20px; height: 20px; }
.ui-empty__title { margin: 0; color: var(--ui-text); font-size: 14px; font-weight: 620; }
.ui-empty__text { max-width: 44ch; margin: 0; color: var(--ui-text-muted); font-size: 12.5px; line-height: 1.5; }

.ui-skeleton {
    border-radius: var(--ui-radius-tile);
    background: linear-gradient(90deg, var(--ui-surface-raised) 25%, var(--ui-surface-hover) 37%, var(--ui-surface-raised) 63%);
    background-size: 400% 100%;
    animation: ui-shimmer 1.4s ease infinite;
}

@keyframes ui-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

.ui-divider { height: 1px; border: 0; background: var(--ui-border); }

/* --- Swipe surfaces ------------------------------------------------------- */

.ui-swipe { position: relative; overflow: hidden; }
.ui-swipe__bg { position: absolute; inset-block: 0; display: flex; width: 112px; align-items: center; padding-inline: 22px; opacity: 0; pointer-events: none; }
.ui-swipe__bg--left { left: 0; justify-content: flex-start; background: var(--ui-danger); }
.ui-swipe__bg--right { right: 0; justify-content: flex-end; background: var(--ui-success); }
.ui-swipe__bg svg { width: 18px; height: 18px; color: #fff; }

/* --- Shared month selector inside Premium pages --------------------------- */

/* The competence rail (month buttons, arrows and selected state) is defined
   once in design-system.css and consumes the canonical ui tokens. Premium
   pages do not keep a second visual version of it. */

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 767px) {
    .ui-page-header { margin-bottom: 18px; }
    .ui-page-description { font-size: 12px; }
    .ui-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ui-kpi { padding: 13px; }
    .ui-kpi:last-child { grid-column: 1 / -1; }
    .ui-kpi__value { font-size: 18px; }
    .ui-section-title h2 { font-size: 16px; }
    .ui-input, .ui-select, .ui-textarea { font-size: 16px; }
    .ui-toolbar { gap: 8px; }
    .ui-tabs { margin-bottom: 12px; }
    .ui-tab { min-height: 44px; font-size: 12px; }
    .ui-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; padding: 13px 14px; }
    .ui-row__status { width: 44px; height: 44px; }
    .ui-row__status svg { width: 17px; height: 17px; }
    .ui-row__title { font-size: 13px; }
    .ui-row__amount { font-size: 13px; }
    .ui-row__action--desktop { display: none; }
    .ui-row__meta { font-size: 11px; }
    .ui-list-panel__head { padding: 12px 14px; }
}

@media (min-width: 768px) {
    .ui-row__action--desktop { display: grid; }
}

/* Telas de toque em tablet mantêm o alvo de 44px; a densidade desktop
   permanece a partir de 1024px. */
@media (min-width: 768px) and (max-width: 1023px) {
    .ui-tab { min-height: 44px; }
    .ui-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
    .ui-row__status { width: 44px; height: 44px; }
    .ui-row__status svg { width: 17px; height: 17px; }
    .ui-row__action { width: 44px; height: 44px; }
    .ui-row__action svg { width: 16px; height: 16px; }
}

@media (max-width: 389px) {
    .ui-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
    .ui-row__account-logo, .ui-row__account-mark { width: 14px; height: 14px; }
}

@media (max-width: 359px) {
    .ui-kpi-grid { grid-template-columns: 1fr; }
    .ui-kpi:last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    [data-ui="premium"] *,
    [data-ui="premium"] *::before,
    [data-ui="premium"] *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Invoice transaction variant: the amount column also hosts row actions and a
   secondary line (time / net amount) without turning the row into a card.
   Only consumers that opt in with .ui-row--invoice are affected. */
.ui-row--invoice { padding: 12px 18px; }
.ui-row--invoice .ui-row__status { cursor: default; }
.ui-row--invoice .ui-row__main { align-content: center; }
.ui-row--invoice .ui-row__end { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.ui-row--invoice .ui-row__end-stack { display: grid; justify-items: end; gap: 2px; min-width: 0; }
.ui-row--invoice .ui-row__note { color: var(--ui-text-subtle); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-row--invoice .ui-row__note.is-success { color: var(--ui-success); font-weight: 600; }

@media (max-width: 767px) {
    .ui-row--invoice { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
    .ui-row--invoice .ui-row__status { width: 32px; height: 32px; }
    .ui-row--invoice .ui-row__status svg { width: 15px; height: 15px; }
    .ui-row--invoice .ui-row__end { flex-direction: row; align-items: center; gap: 6px; }
    .ui-row--invoice .ui-row__actions { gap: 2px; }
    .ui-row--invoice .ui-row__note { font-size: 10.5px; }
}