/* CBF Portal — design system (dual theme, product register) Tokens: OKLCH · strategy Restrained · anchors Linear + Stripe Dashboard */ /* ─── Light (default tokens; data-theme applied on ) ─── */ :root, [data-theme="light"] { color-scheme: light; --cbf-bg: oklch(0.985 0.006 255); --cbf-bg-elevated: oklch(1 0 0); --cbf-surface: oklch(1 0 0); --cbf-surface-2: oklch(0.97 0.008 255); --cbf-surface-hover: oklch(0.955 0.01 255); --cbf-ink: oklch(0.22 0.02 265); --cbf-ink-secondary: oklch(0.42 0.02 265); --cbf-ink-tertiary: oklch(0.55 0.018 265); --cbf-ink-inverse: oklch(0.99 0.005 255); --cbf-border: oklch(0.9 0.012 255); --cbf-border-strong: oklch(0.82 0.016 255); --cbf-accent: oklch(0.48 0.14 265); --cbf-accent-hover: oklch(0.42 0.15 265); --cbf-accent-soft: oklch(0.94 0.03 265); --cbf-accent-fg: oklch(0.99 0.005 265); --cbf-focus-ring: oklch(0.55 0.14 265 / 0.35); --cbf-receita: oklch(0.48 0.12 155); --cbf-receita-soft: oklch(0.94 0.04 155); --cbf-receita-fg: oklch(0.32 0.08 155); --cbf-despesa: oklch(0.62 0.14 55); --cbf-despesa-soft: oklch(0.95 0.04 70); --cbf-despesa-fg: oklch(0.4 0.1 50); --cbf-success: oklch(0.5 0.12 155); --cbf-success-soft: oklch(0.94 0.04 155); --cbf-warning: oklch(0.65 0.14 70); --cbf-warning-soft: oklch(0.95 0.045 80); --cbf-danger: oklch(0.52 0.18 25); --cbf-danger-soft: oklch(0.95 0.03 25); --cbf-info: oklch(0.52 0.1 240); --cbf-info-soft: oklch(0.94 0.03 240); --cbf-nav-bg: oklch(1 0 0 / 0.86); --cbf-shadow-sm: 0 1px 2px oklch(0.3 0.02 265 / 0.05); --cbf-shadow-md: 0 4px 16px oklch(0.3 0.02 265 / 0.08); --cbf-overlay: oklch(0.2 0.02 265 / 0.4); /* legacy aliases used by existing page CSS */ --primary: var(--cbf-accent); --primary-dark: var(--cbf-accent-hover); --accent: var(--cbf-accent); --accent-light: oklch(0.62 0.12 265); --success: var(--cbf-success); --warning: var(--cbf-despesa); --danger: var(--cbf-danger); --info: var(--cbf-info); --dark-surface: var(--cbf-bg); --dark-card: var(--cbf-surface); --dark-secondary: var(--cbf-surface-2); --dark-tertiary: var(--cbf-surface-hover); --text-primary: var(--cbf-ink); --text-secondary: var(--cbf-ink-secondary); --text-tertiary: var(--cbf-ink-tertiary); --border-color: var(--cbf-border); --border-light: var(--cbf-border-strong); } /* ─── Dark ─── */ [data-theme="dark"] { color-scheme: dark; --cbf-bg: oklch(0.17 0.018 265); --cbf-bg-elevated: oklch(0.2 0.02 265); --cbf-surface: oklch(0.22 0.022 265); --cbf-surface-2: oklch(0.25 0.024 265); --cbf-surface-hover: oklch(0.28 0.026 265); --cbf-ink: oklch(0.94 0.012 265); --cbf-ink-secondary: oklch(0.78 0.02 265); --cbf-ink-tertiary: oklch(0.64 0.02 265); --cbf-ink-inverse: oklch(0.18 0.02 265); --cbf-border: oklch(0.32 0.03 265); --cbf-border-strong: oklch(0.4 0.035 265); --cbf-accent: oklch(0.72 0.12 275); --cbf-accent-hover: oklch(0.78 0.11 275); --cbf-accent-soft: oklch(0.3 0.06 275); --cbf-accent-fg: oklch(0.18 0.03 275); --cbf-focus-ring: oklch(0.72 0.12 275 / 0.4); --cbf-receita: oklch(0.78 0.12 155); --cbf-receita-soft: oklch(0.3 0.05 155); --cbf-receita-fg: oklch(0.88 0.08 155); --cbf-despesa: oklch(0.8 0.12 70); --cbf-despesa-soft: oklch(0.32 0.05 60); --cbf-despesa-fg: oklch(0.9 0.08 75); --cbf-success: oklch(0.78 0.12 155); --cbf-success-soft: oklch(0.3 0.05 155); --cbf-warning: oklch(0.8 0.12 80); --cbf-warning-soft: oklch(0.32 0.05 70); --cbf-danger: oklch(0.72 0.14 25); --cbf-danger-soft: oklch(0.3 0.06 25); --cbf-info: oklch(0.75 0.08 240); --cbf-info-soft: oklch(0.3 0.04 240); --cbf-nav-bg: oklch(0.17 0.018 265 / 0.88); --cbf-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.25); --cbf-shadow-md: 0 8px 24px oklch(0 0 0 / 0.35); --cbf-overlay: oklch(0 0 0 / 0.55); } /* ─── Shared scale ─── */ :root { --cbf-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --cbf-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --font-family: var(--cbf-font); --font-mono: var(--cbf-font-mono); --cbf-radius-sm: 6px; --cbf-radius: 10px; --cbf-radius-lg: 14px; --cbf-space-1: 0.25rem; --cbf-space-2: 0.5rem; --cbf-space-3: 0.75rem; --cbf-space-4: 1rem; --cbf-space-5: 1.25rem; --cbf-space-6: 1.5rem; --cbf-space-8: 2rem; --cbf-space-10: 2.5rem; --cbf-space-12: 3rem; --cbf-content: 70rem; /* ~1120px */ --cbf-content-form: 44rem; /* ~704px */ --cbf-nav-h: 3.5rem; --cbf-z-sticky: 100; --cbf-z-dropdown: 200; --cbf-z-modal-backdrop: 300; --cbf-z-modal: 400; --cbf-z-toast: 500; --cbf-z-tooltip: 600; --cbf-ease: cubic-bezier(0.16, 1, 0.3, 1); --cbf-duration: 180ms; } /* ─── Base ─── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body.cbf-body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--cbf-bg); color: var(--cbf-ink); font-family: var(--cbf-font); font-size: 0.9375rem; line-height: 1.5; font-weight: 400; -webkit-font-smoothing: antialiased; } .cbf-main { flex: 1 0 auto; width: 100%; } h1, h2, h3 { text-wrap: balance; letter-spacing: -0.02em; color: var(--cbf-ink); } a { color: var(--cbf-accent); text-decoration: none; transition: color var(--cbf-duration) var(--cbf-ease); } a:hover { color: var(--cbf-accent-hover); } :focus-visible { outline: 2px solid var(--cbf-accent); outline-offset: 2px; } /* ─── Layout shells ─── */ .cbf-container { width: 100%; max-width: var(--cbf-content); margin-inline: auto; padding-inline: var(--cbf-space-4); } .cbf-container--form { max-width: var(--cbf-content-form); } .cbf-page { padding-block: var(--cbf-space-8) var(--cbf-space-12); } .cbf-page-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--cbf-space-4); margin-bottom: var(--cbf-space-6); } .cbf-page-header h1, .cbf-page-title { margin: 0; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; } .cbf-page-sub { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--cbf-ink-secondary); } /* ─── Navbar ─── */ .cbf-navbar { position: sticky; top: 0; z-index: var(--cbf-z-sticky); height: var(--cbf-nav-h); display: flex; align-items: center; background: var(--cbf-nav-bg); border-bottom: 1px solid var(--cbf-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .cbf-navbar .cbf-container { display: flex; align-items: center; gap: var(--cbf-space-4); width: 100%; } .cbf-brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--cbf-ink) !important; font-weight: 700; font-size: 0.95rem; letter-spacing: -0.02em; text-decoration: none !important; flex-shrink: 0; } .cbf-brand:hover { color: var(--cbf-ink) !important; opacity: 0.88; } .cbf-brand__mark { display: inline-flex; width: 1.75rem; height: 1.75rem; border-radius: 7px; background: var(--cbf-accent); color: var(--cbf-accent-fg); align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 800; letter-spacing: -0.03em; } .cbf-nav { display: flex; align-items: center; gap: 0.15rem; list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; } .cbf-nav a { display: inline-flex; align-items: center; padding: 0.4rem 0.7rem; border-radius: var(--cbf-radius-sm); color: var(--cbf-ink-secondary); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: color var(--cbf-duration) var(--cbf-ease), background var(--cbf-duration) var(--cbf-ease); } .cbf-nav a:hover { color: var(--cbf-ink); background: var(--cbf-surface-hover); } .cbf-nav a.is-active { color: var(--cbf-ink); background: var(--cbf-accent-soft); font-weight: 600; } .cbf-nav-actions { display: flex; align-items: center; gap: var(--cbf-space-2); margin-left: auto; flex-shrink: 0; } .cbf-user-chip { font-size: 0.8rem; color: var(--cbf-ink-tertiary); max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Theme toggle */ .cbf-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--cbf-border); border-radius: var(--cbf-radius-sm); background: var(--cbf-surface); color: var(--cbf-ink-secondary); cursor: pointer; transition: color var(--cbf-duration) var(--cbf-ease), background var(--cbf-duration) var(--cbf-ease), border-color var(--cbf-duration) var(--cbf-ease); } .cbf-theme-toggle:hover { color: var(--cbf-ink); border-color: var(--cbf-border-strong); background: var(--cbf-surface-hover); } .cbf-theme-toggle:focus-visible { outline: 2px solid var(--cbf-accent); outline-offset: 2px; } .cbf-theme-toggle svg { width: 1.05rem; height: 1.05rem; } [data-theme="light"] .cbf-theme-toggle .icon-sun { display: none; } [data-theme="dark"] .cbf-theme-toggle .icon-moon { display: none; } /* Mobile nav toggle */ .cbf-nav-toggle { display: none; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--cbf-border); border-radius: var(--cbf-radius-sm); background: var(--cbf-surface); color: var(--cbf-ink); cursor: pointer; } .cbf-nav-toggle svg { width: 1.15rem; height: 1.15rem; } /* ─── Footer ─── */ .cbf-footer { flex-shrink: 0; border-top: 1px solid var(--cbf-border); padding: var(--cbf-space-5) 0; margin-top: auto; background: var(--cbf-bg); } .cbf-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cbf-space-3); font-size: 0.8rem; color: var(--cbf-ink-tertiary); } .cbf-footer a { color: var(--cbf-ink-secondary); } .cbf-footer a:hover { color: var(--cbf-ink); } /* ─── Buttons ─── */ .btn-cbf, .cbf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.55rem 1.1rem; font-family: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1.25; border-radius: var(--cbf-radius-sm); border: 1px solid transparent; background: var(--cbf-accent); color: var(--cbf-accent-fg); cursor: pointer; text-decoration: none; transition: background var(--cbf-duration) var(--cbf-ease), border-color var(--cbf-duration) var(--cbf-ease), color var(--cbf-duration) var(--cbf-ease), opacity var(--cbf-duration) var(--cbf-ease); } .btn-cbf:hover, .cbf-btn:hover { background: var(--cbf-accent-hover); color: var(--cbf-accent-fg); text-decoration: none; } .btn-cbf:disabled, .cbf-btn:disabled { opacity: 0.55; cursor: not-allowed; } .btn-cbf:focus-visible, .cbf-btn:focus-visible { outline: 2px solid var(--cbf-accent); outline-offset: 2px; } .btn-cbf-lg, .cbf-btn--lg { padding: 0.7rem 1.35rem; font-size: 0.95rem; } .btn-cbf-sm, .cbf-btn--sm { padding: 0.4rem 0.85rem; font-size: 0.8125rem; } .cbf-btn--ghost, .btn-outline-cbf, .btn-outline-secondary { background: transparent; border-color: var(--cbf-border-strong); color: var(--cbf-ink-secondary); } .cbf-btn--ghost:hover, .btn-outline-cbf:hover, .btn-outline-secondary:hover { background: var(--cbf-surface-hover); border-color: var(--cbf-border-strong); color: var(--cbf-ink); } /* ─── Cards / surfaces ─── */ .cbf-card, .form-card { background: var(--cbf-surface); border: 1px solid var(--cbf-border); border-radius: var(--cbf-radius); padding: var(--cbf-space-6); box-shadow: var(--cbf-shadow-sm); } .cbf-card--flush { padding: 0; overflow: hidden; } .cbf-card h5, .cbf-card__title { margin: 0 0 var(--cbf-space-3); font-size: 0.95rem; font-weight: 650; letter-spacing: -0.015em; } /* ─── Forms ─── */ .cbf-label, .form-card label, .form-label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--cbf-ink-secondary); margin-bottom: 0.35rem; letter-spacing: 0; text-transform: none; } .form-control, .form-select, .cbf-input { display: block; width: 100%; padding: 0.55rem 0.75rem; font-size: 0.9rem; font-family: inherit; line-height: 1.4; color: var(--cbf-ink); background: var(--cbf-bg); border: 1px solid var(--cbf-border); border-radius: var(--cbf-radius-sm); transition: border-color var(--cbf-duration) var(--cbf-ease), box-shadow var(--cbf-duration) var(--cbf-ease); } .form-control:focus, .form-select:focus, .cbf-input:focus { border-color: var(--cbf-accent); box-shadow: 0 0 0 3px var(--cbf-focus-ring); outline: none; background: var(--cbf-bg); color: var(--cbf-ink); } .form-control::placeholder { color: var(--cbf-ink-tertiary); opacity: 1; } .form-select option { background: var(--cbf-surface); color: var(--cbf-ink); } .form-text { color: var(--cbf-ink-tertiary); font-size: 0.8rem; margin-top: 0.3rem; } /* Segmented Receita / Despesa */ .direcao-toggle { display: flex; gap: 0.6rem; margin-bottom: var(--cbf-space-5); } .direcao-btn { flex: 1; padding: 0.85rem 1rem; border-radius: var(--cbf-radius); border: 1px solid var(--cbf-border); background: var(--cbf-bg); color: var(--cbf-ink-secondary); font-weight: 650; font-size: 0.95rem; font-family: inherit; cursor: pointer; transition: border-color var(--cbf-duration) var(--cbf-ease), background var(--cbf-duration) var(--cbf-ease), color var(--cbf-duration) var(--cbf-ease); } .direcao-btn:hover { border-color: var(--cbf-border-strong); color: var(--cbf-ink); } .direcao-btn.active-receita { border-color: var(--cbf-receita); background: var(--cbf-receita-soft); color: var(--cbf-receita-fg); } .direcao-btn.active-despesa { border-color: var(--cbf-despesa); background: var(--cbf-despesa-soft); color: var(--cbf-despesa-fg); } .direcao-btn:focus-visible { outline: 2px solid var(--cbf-accent); outline-offset: 2px; } /* ─── Tables ─── */ .cbf-table, .roteiro-table, .table { width: 100%; border-collapse: collapse; color: var(--cbf-ink); margin: 0; } .cbf-table th, .roteiro-table th, .table thead th { text-align: left; padding: 0.7rem 1rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cbf-ink-tertiary); border-bottom: 1px solid var(--cbf-border); background: var(--cbf-surface-2); } .cbf-table td, .roteiro-table td, .table tbody td { padding: 0.8rem 1rem; font-size: 0.9rem; border-bottom: 1px solid var(--cbf-border); vertical-align: middle; background: transparent; color: var(--cbf-ink); } .cbf-table tbody tr:last-child td, .roteiro-table tbody tr:last-child td { border-bottom: none; } .cbf-table tbody tr:hover td, .roteiro-table tbody tr:hover td { background: var(--cbf-surface-hover); } .table-dark { --bs-table-bg: transparent; --bs-table-color: var(--cbf-ink); --bs-table-border-color: var(--cbf-border); --bs-table-striped-bg: var(--cbf-surface-2); --bs-table-hover-bg: var(--cbf-surface-hover); color: var(--cbf-ink); background: transparent; } .name-cell { font-weight: 600; color: var(--cbf-ink); } /* ─── Badges ─── */ .cbf-badge, .badge-tipo { display: inline-flex; align-items: center; padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.01em; line-height: 1.3; } .cbf-badge--receita, .badge.receita, .text-bg-success { background: var(--cbf-receita-soft) !important; color: var(--cbf-receita-fg) !important; } .cbf-badge--despesa, .badge.despesa, .text-bg-warning { background: var(--cbf-despesa-soft) !important; color: var(--cbf-despesa-fg) !important; } .badge-nacional { background: var(--cbf-accent-soft); color: var(--cbf-accent); } .badge-internacional { background: var(--cbf-receita-soft); color: var(--cbf-receita-fg); } /* ─── Alerts ─── */ .alert { border-radius: var(--cbf-radius-sm); border: 1px solid var(--cbf-border); padding: 0.75rem 1rem; font-size: 0.875rem; } .alert-success { background: var(--cbf-success-soft); border-color: color-mix(in oklch, var(--cbf-success) 40%, var(--cbf-border)); color: var(--cbf-receita-fg); } .alert-warning { background: var(--cbf-warning-soft); border-color: color-mix(in oklch, var(--cbf-warning) 40%, var(--cbf-border)); color: var(--cbf-despesa-fg); } .alert-danger { background: var(--cbf-danger-soft); border-color: color-mix(in oklch, var(--cbf-danger) 40%, var(--cbf-border)); color: var(--cbf-danger); } .alert a { font-weight: 600; } /* Success after lançamento */ .success-card { display: none; background: var(--cbf-success-soft); border: 1px solid color-mix(in oklch, var(--cbf-success) 45%, var(--cbf-border)); border-radius: var(--cbf-radius); padding: var(--cbf-space-5); margin-bottom: var(--cbf-space-5); } .success-card h5 { color: var(--cbf-receita-fg); margin: 0 0 0.4rem; font-size: 1rem; font-weight: 700; } .success-card .meta { color: var(--cbf-ink-secondary); font-size: 0.9rem; } /* ─── Empty states ─── */ .cbf-empty, .empty-state { text-align: center; padding: var(--cbf-space-10) var(--cbf-space-6); color: var(--cbf-ink-secondary); } .cbf-empty__title { margin: 0 0 var(--cbf-space-2); font-size: 1.125rem; font-weight: 700; color: var(--cbf-ink); letter-spacing: -0.02em; } .cbf-empty__text { margin: 0 auto var(--cbf-space-6); max-width: 36ch; font-size: 0.925rem; color: var(--cbf-ink-secondary); line-height: 1.55; } .cbf-empty__actions { display: flex; flex-wrap: wrap; gap: var(--cbf-space-3); justify-content: center; } /* ─── Home ─── */ .cbf-home-hero { margin-bottom: var(--cbf-space-8); } .cbf-home-hero h1 { margin: 0 0 var(--cbf-space-2); font-size: 1.5rem; font-weight: 750; letter-spacing: -0.03em; } .cbf-home-hero p { margin: 0; color: var(--cbf-ink-secondary); font-size: 0.95rem; max-width: 48ch; } .cbf-company-pill { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: var(--cbf-space-4); padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--cbf-surface-2); border: 1px solid var(--cbf-border); font-size: 0.8rem; color: var(--cbf-ink-secondary); } .cbf-company-pill strong { color: var(--cbf-ink); font-weight: 600; } /* Dashboard filters */ .cbf-filters { display: grid; grid-template-columns: 1fr; gap: var(--cbf-space-3); margin-bottom: var(--cbf-space-5); padding: var(--cbf-space-4); background: var(--cbf-surface); border: 1px solid var(--cbf-border); border-radius: var(--cbf-radius); } @media (min-width: 720px) { .cbf-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; } } .cbf-filters__field .form-label { margin-bottom: 0.35rem; font-size: 0.75rem; font-weight: 600; color: var(--cbf-ink-tertiary); } .cbf-filters.is-loading { opacity: 0.65; pointer-events: none; } .cbf-empty--inline { padding: var(--cbf-space-6) var(--cbf-space-5); text-align: center; } .cbf-empty--inline .cbf-empty__text { margin: 0; } /* Summary strip — not the hero-metric SaaS cliché: compact, labeled rows */ .cbf-summary { display: grid; grid-template-columns: 1fr; gap: var(--cbf-space-4); margin-bottom: var(--cbf-space-6); } @media (min-width: 640px) { .cbf-summary { grid-template-columns: 1fr 1fr auto; align-items: stretch; } .cbf-summary--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .cbf-summary__cell { background: var(--cbf-surface); border: 1px solid var(--cbf-border); border-radius: var(--cbf-radius); padding: var(--cbf-space-4) var(--cbf-space-5); display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .cbf-summary__label { font-size: 0.75rem; font-weight: 600; color: var(--cbf-ink-tertiary); } .cbf-summary__value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--cbf-ink); } .cbf-summary__value--receita { color: var(--cbf-receita); } .cbf-summary__value--despesa { color: var(--cbf-despesa); } .cbf-summary__cta { display: flex; align-items: center; justify-content: center; } .cbf-list-panel { background: var(--cbf-surface); border: 1px solid var(--cbf-border); border-radius: var(--cbf-radius); overflow: hidden; box-shadow: var(--cbf-shadow-sm); } .cbf-list-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--cbf-space-3); padding: var(--cbf-space-4) var(--cbf-space-5); border-bottom: 1px solid var(--cbf-border); } .cbf-list-panel__head h2 { margin: 0; font-size: 0.95rem; font-weight: 650; } .cbf-money { font-variant-numeric: tabular-nums; font-weight: 600; } .cbf-money--receita { color: var(--cbf-receita); } .cbf-money--despesa { color: var(--cbf-despesa); } .cbf-muted { color: var(--cbf-ink-secondary); } .cbf-date { color: var(--cbf-ink-tertiary); font-size: 0.85rem; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Panel blocked / guest */ .cbf-panel { max-width: 32rem; margin: 0 auto; text-align: center; padding: var(--cbf-space-10) var(--cbf-space-6); background: var(--cbf-surface); border: 1px solid var(--cbf-border); border-radius: var(--cbf-radius-lg); box-shadow: var(--cbf-shadow-sm); } .cbf-panel h1 { margin: 0 0 var(--cbf-space-3); font-size: 1.35rem; font-weight: 750; } .cbf-panel p { margin: 0 0 var(--cbf-space-6); color: var(--cbf-ink-secondary); font-size: 0.95rem; line-height: 1.55; } /* Layout helpers for create+list */ .cbf-split { display: grid; gap: var(--cbf-space-6); } @media (min-width: 992px) { .cbf-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } } /* Loading skeleton */ .cbf-skeleton { display: block; height: 0.85rem; border-radius: 4px; background: linear-gradient( 90deg, var(--cbf-surface-2) 0%, var(--cbf-surface-hover) 50%, var(--cbf-surface-2) 100% ); background-size: 200% 100%; animation: cbf-shimmer 1.2s ease-in-out infinite; } @keyframes cbf-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .cbf-skeleton { animation: none; background: var(--cbf-surface-2); } } /* ─── Bootstrap harmony ─── */ .btn-close { filter: none; opacity: 0.55; } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%); } .text-muted { color: var(--cbf-ink-secondary) !important; } /* ─── Responsive nav ─── */ @media (max-width: 767.98px) { .cbf-nav-toggle { display: inline-flex; } .cbf-nav-panel { position: fixed; inset: var(--cbf-nav-h) 0 auto 0; z-index: var(--cbf-z-dropdown); display: none; flex-direction: column; gap: var(--cbf-space-2); padding: var(--cbf-space-3) var(--cbf-space-4) var(--cbf-space-4); background: var(--cbf-bg-elevated); border-bottom: 1px solid var(--cbf-border); box-shadow: var(--cbf-shadow-md); } .cbf-nav-panel.is-open { display: flex; } .cbf-nav { flex-direction: column; align-items: stretch; width: 100%; } .cbf-nav a { padding: 0.65rem 0.75rem; } .cbf-nav-actions--mobile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cbf-space-2); padding-top: var(--cbf-space-2); border-top: 1px solid var(--cbf-border); } .cbf-nav-actions--desktop { display: none; } .cbf-user-chip { max-width: 100%; } .cbf-page { padding-block: var(--cbf-space-6) var(--cbf-space-10); } } @media (min-width: 768px) { .cbf-nav-panel { display: flex !important; flex: 1; align-items: center; gap: var(--cbf-space-4); min-width: 0; position: static; padding: 0; border: 0; box-shadow: none; background: transparent; } .cbf-nav-actions--mobile { display: none; } } /* Visually hidden utility */ .cbf-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }