:root{
--bg:#f7f6f3;--bg2:#f0ede8;--surface:#ffffff;--surface2:#f9f8f6;
--border:#e8e4de;--border2:#d6d0c8;
--text:#1a1714;--text2:#3d3830;--muted:#8c8278;--muted2:#b5afa8;
--accent:#2a6049;--accent-lt:#e8f2ee;--accent2:#3d7a5e;
--green:#2a7a4a;--green-lt:#e6f4ec;
--red:#c0392b;--red-lt:#fdf0ee;
--amber:#b45309;--amber-lt:#fef3e2;
--blue:#1e5ba8;--blue-lt:#e8f0fb;
--r:12px;--r-sm:8px;--r-lg:18px;
--shadow-sm:0 1px 4px rgba(0,0,0,.06),0 2px 12px rgba(0,0,0,.04);
--shadow:0 4px 24px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);
--shadow-lg:0 12px 48px rgba(0,0,0,.12),0 4px 16px rgba(0,0,0,.06);
--font-serif:'Lora',Georgia,serif;
--font-sans:'Outfit',system-ui,sans-serif;
--sidebar-w:240px;--topbar-h:58px;--bottom-h:64px;
--brand-bg:#0e3520; /* Option 2: richer mid-green — sidebar + page header bar */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{font-size:15px;-webkit-text-size-adjust:100%;}
body{font-family:var(--font-sans);background:var(--bg);color:var(--text);height:100vh;height:100dvh;display:flex;overflow:hidden;-webkit-font-smoothing:antialiased;}
/* SIDEBAR */
/* ══════════════════════════════════════════════════════
SIDEBAR — Fintech style
══════════════════════════════════════════════════════ */
.sidebar {
width: var(--sidebar-w);
min-width: var(--sidebar-w);
background: linear-gradient(160deg, #0d3d28 0%, #1d6b47 60%, #0e3520 100%);
display: flex;
flex-direction: column;
z-index: 200;
transition: transform .3s cubic-bezier(.4,0,.2,1);
overflow: hidden;
position: relative;
}
/* Névoa difusa — same pattern as login Option 2 */
/* Sidebar orbe decorativo — mesmo idioma do dbt-hero / Option 1 */
.sidebar::before {
content: '';
position: absolute;
top: -60px; right: -60px;
width: 260px; height: 260px;
background: rgba(255,255,255,.04);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.sidebar::after {
content: none;
}
.sb-header { position: relative; overflow: visible; }
/* ── Header: logo + close btn ── */
.sb-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px 10px;
flex-shrink: 0;
overflow: hidden;
min-width: 0;
gap: 8px;
position: relative;
z-index: 1;
}
.sb-logo-img {
height: 25px;
max-height: 25px;
width: auto;
max-width: 170px; /* never wider than sidebar minus close btn + padding */
object-fit: contain;
display: block;
flex-shrink: 1;
min-width: 0;
}
.sb-close {
display: none; /* desktop: hidden; mobile: shown via media query */
background: rgba(255,255,255,.08);
border: none;
color: rgba(255,255,255,.7);
border-radius: 50%;
width: 28px;
height: 28px;
font-size: .85rem;
cursor: pointer;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background .15s, color .15s;
line-height: 1;
}
.sb-close:hover { background: rgba(255,255,255,.16); color: #fff; }
/* ── User card ── */
.sb-user-card {
margin: 0 12px 10px;
padding: 10px 12px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.10);
border-radius: 10px;
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.sb-user-info { min-width: 0; flex: 1; }
.sb-family-name {
font-size: .85rem;
font-weight: 700;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
letter-spacing: -.01em;
}
.sb-user-sub {
font-size: .68rem;
color: rgba(255,255,255,.45);
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* legacy aliases — kept for any external reference */
.sb-user-name { font-size:.82rem; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; }
.sb-user-role { font-size:.68rem; color:rgba(255,255,255,.45); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* ── Scrollable nav body ── */
.sidebar-nav {
flex: 1;
padding: 4px 10px 8px;
position: relative;
z-index: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
/* custom scrollbar */
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.12) transparent;
min-height: 0; /* critical: lets flex shrink properly */
}
.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 99px; }
/* ── Nav sections ── */
.nav-section { margin-bottom: 6px; }
.nav-label {
font-size: .6rem;
color: rgba(255,255,255,.3);
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 700;
padding: 8px 10px 4px;
}
/* ── Nav items ── */
.nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: 8px;
cursor: pointer;
font-size: 1.2rem;
font-weight: 400;
color: rgba(255,255,255,.58);
transition: background .14s, color .14s;
border: none;
background: transparent;
width: 100%;
text-align: left;
line-height: 1.25;
font-family: var(--font-sans);
position: relative;
}
.nav-item:hover {
color: rgba(255,255,255,.92);
background: rgba(255,255,255,.07);
}
.nav-item.active {
color: #fff;
background: rgba(58,184,85,.18); /* green tint */
font-weight: 600;
}
/* Active accent bar */
.nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 20%;
bottom: 20%;
width: 3px;
border-radius: 0 3px 3px 0;
background: #3ab855;
}
/* ── Icon box ── */
.ni-icon {
width: 28px;
height: 28px;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.55);
transition: background .14s, color .14s;
}
.nav-item:hover .ni-icon { background: rgba(255,255,255,.10); color: rgba(255,255,255,.9); }
.nav-item.active .ni-icon { background: rgba(58,184,85,.25); color: #6ee88a; }
/* ── Footer: always pinned at bottom, never hidden ── */
.sb-footer {
flex-shrink: 0;
padding: 6px 10px 10px;
/* Extra safe-area padding for iPhone home bar */
padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.sb-divider {
height: 1px;
background: rgba(255,255,255,.08);
margin: 0 2px 6px;
}
/* Logout: same nav-item but red-tinted */
.sb-logout {
color: rgba(255,120,100,.75) !important;
}
.sb-logout:hover {
background: rgba(220,80,60,.15) !important;
color: rgba(255,140,120,.95) !important;
}
.sb-logout .ni-icon {
background: rgba(220,80,60,.12) !important;
color: rgba(255,120,100,.75) !important;
}
.sb-logout:hover .ni-icon {
background: rgba(220,80,60,.22) !important;
color: rgba(255,150,130,.95) !important;
}
/* legacy */
.sidebar-logo{padding:0;overflow:hidden;}
.sidebar-footer{padding:10px 12px;}
.config-btn{width:100%;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.10);border-radius:var(--r-sm);padding:9px 12px;font-family:var(--font-sans);font-size:.82rem;font-weight:500;cursor:pointer;transition:all .15s;}
.config-btn:hover{background:rgba(255,255,255,.10);color:rgba(255,255,255,.8);}
/* TOPBAR */
.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{height:var(--topbar-h);min-height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:linear-gradient(135deg,#0f5132 0%, #16803d 52%, #22a06b 100%);border-bottom:1px solid rgba(255,255,255,.10);gap:12px;position:sticky;top:0;z-index:110;box-shadow:0 8px 24px rgba(5,34,20,.18);}
.topbar-left{display:flex;align-items:center;gap:12px;}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:6px;border-radius:var(--r-sm);color:var(--muted);flex-shrink:0;}
.hamburger:hover{background:var(--bg2);color:var(--text);}
.topbar-title{font-family:var(--font-serif);font-size:1.15rem;font-weight:500;color:#ffffff;letter-spacing:-.01em;display:none!important;}
.topbar-actions{display:flex;gap:8px;align-items:center;}
/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r-sm);font-family:var(--font-sans);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .15s;border:none;white-space:nowrap;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent2);}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border);}
.btn-ghost:hover{border-color:var(--border2);color:var(--text2);background:var(--bg2);}
.btn-sm{padding:5px 10px;font-size:.78rem;}
.btn-icon{background:var(--bg2);border:1px solid var(--border);color:var(--muted);border-radius:6px;padding:5px 8px;cursor:pointer;font-size:.85rem;transition:all .15s;line-height:1;}
.btn-icon:hover{border-color:var(--border2);color:var(--text2);background:var(--bg);}
/* CONTENT */
.content{flex:1;overflow-y:auto;overflow-x:hidden;padding:24px;padding-bottom:max(24px,env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;touch-action:pan-y;height:0;min-height:0;}
.page{display:none;}
.page.active{display:block;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
/* CARDS */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-sm);}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.card-title{font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;}
/* STAT CARDS */
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;}
.stat-accent{position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);border-radius:var(--r) var(--r) 0 0;}
.stat-label{font-size:.7rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px;}
.stat-value{font-family:var(--font-serif);font-size:1.6rem;font-weight:500;line-height:1;letter-spacing:-.02em;}
.stat-sub{font-size:.75rem;color:var(--muted);margin-top:7px;display:flex;align-items:center;gap:4px;}
/* DASHBOARD STAT CARDS — 4 em linha no desktop, 2×2 no mobile */
#page-dashboard .grid-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
#page-dashboard .stat-card{padding:14px;}
#page-dashboard .stat-label{margin-bottom:6px;}
#page-dashboard .stat-value{font-size:1.45rem;font-variant-numeric:tabular-nums;}
#page-dashboard .stat-sub{margin-top:5px;}
@media(max-width:768px){
#page-dashboard .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
#page-dashboard .stat-value{font-size:1.35rem;}
}
@media(max-width:420px){
#page-dashboard .grid-4{grid-template-columns:1fr;}
#page-dashboard .stat-value{font-size:1.25rem;}
}
/* Dashboard value colors */
#page-dashboard .stat-value.amount-pos,
#page-dashboard .stat-value .amount-pos{ color: var(--green); }
#page-dashboard .stat-value.amount-neg,
#page-dashboard .stat-value .amount-neg{ color: var(--red); }
/* Dashboard stat values smaller on mobile */
@media (max-width:768px){
#page-dashboard .stat-value{font-size:1.35rem;}
}
/* Keep dashboard cards readable on very small screens */
@media (max-width:420px){
#page-dashboard .grid-4{grid-template-columns:1fr;}
#page-dashboard .stat-value{font-size:1.25rem;}
}
/* ACCOUNT CARDS */
.account-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;}
/* Account Groups */
.account-group-section{margin-bottom:20px;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);}
.account-group-header{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--surface);cursor:pointer;user-select:none;transition:background .15s;border-left:3px solid var(--grp-color,var(--accent));}
.account-group-header--clickable:hover{background:var(--bg2);}
.account-group-badge{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;font-size:1.25rem;flex-shrink:0;}
.account-group-title{font-weight:700;font-size:.95rem;color:var(--text);}
.account-group-count{font-size:.72rem;font-weight:500;color:var(--muted);background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:1px 7px;}
.account-group-sum{font-family:var(--font-serif);font-size:1rem;font-weight:600;}
.account-group-actions{display:none;gap:4px;margin-left:auto;}
.account-group-header:hover .account-group-actions{display:flex;}
.account-group-chevron{font-size:.85rem;margin-left:4px;transition:transform .25s cubic-bezier(.4,0,.2,1);display:inline-block;opacity:.5;}
.account-group-chevron.expanded{transform:rotate(0deg);}
.account-group-chevron:not(.expanded){transform:rotate(-90deg);}
.account-group-body{background:var(--bg);padding:14px 14px 6px;}
.account-group-body.collapsed{display:none;}
/* Category icon picker (mirrors account icon picker) */
#categoryIconPicker .icon-grid{max-height:148px;overflow-y:auto;}
.account-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px;cursor:pointer;transition:all .18s;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);}
.account-card-stripe{position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--r) var(--r) 0 0;}
.account-card:hover{border-color:var(--border2);box-shadow:var(--shadow);transform:translateY(-1px);}
.account-icon{font-size:1.5rem;margin-bottom:8px;}
.account-name{font-weight:500;font-size:.9rem;margin-bottom:2px;color:var(--text);}
.account-type{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;}
.account-balance{font-family:var(--font-serif);font-size:1.35rem;font-weight:500;letter-spacing:-.02em;}
.account-currency{font-size:.7rem;color:var(--muted);margin-top:2px;}
.account-actions{position:absolute;top:10px;right:10px;display:none;gap:4px;}
.account-card:hover .account-actions{display:flex;}
/* TABLE */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;}
table{width:100%;border-collapse:collapse;font-size:.855rem;}
thead th{background:var(--surface2);color:var(--muted);font-weight:600;font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;padding:10px 14px;text-align:left;border-bottom:1px solid var(--border);cursor:pointer;white-space:nowrap;user-select:none;}
thead th:hover{color:var(--text2);}
tbody tr{border-bottom:1px solid var(--border);transition:background .12s;}
tbody tr:last-child{border-bottom:none;}
tbody tr:hover{background:var(--surface2);}
tbody td{padding:11px 14px;vertical-align:middle;}
.amount-pos{color:var(--green);font-weight:500;}
.amount-neg{color:var(--red);font-weight:500;}
/* BADGES */
.badge{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:100px;font-size:.7rem;font-weight:600;}
.badge-green{background:var(--green-lt);color:var(--green);}
.badge-red{background:var(--red-lt);color:var(--red);}
.badge-blue{background:var(--blue-lt);color:var(--blue);}
.badge-amber{background:var(--amber-lt);color:var(--amber);}
.badge-muted{background:var(--bg2);color:var(--muted);border:1px solid var(--border);}
/* FILTERS */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;align-items:center;}
.search-wrap{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 12px;flex:1;min-width:180px;transition:border-color .15s;}
.search-wrap:focus-within{border-color:var(--accent);}
.search-wrap input{background:none;border:none;padding:0;font-size:.875rem;color:var(--text);flex:1;font-family:var(--font-sans);outline:none;}
.search-wrap input::placeholder{color:var(--muted2);}
/* FORMS */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-group{display:flex;flex-direction:column;gap:5px;}
.amt-wrap{display:flex;gap:0;align-items:stretch;}
.amt-wrap input{flex:1;border-radius:0 var(--r-sm) var(--r-sm) 0!important;border-left:none!important;}
.amt-sign-btn{min-width:44px;padding:0 12px;font-size:1.15rem;font-weight:700;border:1.5px solid var(--border);border-right:none;border-radius:var(--r-sm) 0 0 var(--r-sm);background:var(--bg2);color:var(--text2);cursor:pointer;transition:background .15s,color .15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.amt-sign-btn:active{background:var(--bg3);}
.amt-sign-btn.negative{background:var(--red-lt,#fef2f2);color:var(--red,#c0392b);border-color:var(--red,#c0392b);}
.amt-sign-btn.positive{background:var(--green-lt,#f0fdf4);color:var(--green,#2a7a4a);border-color:var(--green,#2a7a4a);}
.form-group.full{grid-column:1/-1;}
label{font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
input:not([type=checkbox]):not([type=radio]),select,textarea{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 12px;font-family:var(--font-sans);font-size:.9rem;color:var(--text);outline:none;transition:border-color .15s;width:100%;-webkit-appearance:none;appearance:none;}input[type=checkbox],input[type=radio]{width:16px;height:16px;flex-shrink:0;cursor:pointer;accent-color:var(--accent);-webkit-appearance:auto;appearance:auto;}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(42,96,73,.08);}
textarea{resize:vertical;min-height:68px;}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238c8278' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:32px;}
input[type="color"]{padding:4px;height:38px;cursor:pointer;}
/* TAB BAR */
.tab-bar{display:flex;gap:2px;background:var(--bg2);padding:4px;border-radius:var(--r-sm);width:fit-content;margin-bottom:18px;border:1px solid var(--border);}
.tab{padding:6px 14px;border-radius:6px;font-size:.8rem;font-weight:500;cursor:pointer;color:var(--muted);transition:all .15s;border:none;background:transparent;white-space:nowrap;}
.tab:hover{color:var(--text2);}
.tab.active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm);font-weight:600;}
/* PROGRESS */
.progress{background:var(--bg2);border-radius:100px;height:5px;margin-top:8px;overflow:hidden;}
.progress-bar{height:100%;border-radius:100px;background:var(--accent);transition:width .5s cubic-bezier(.4,0,.2,1);}
/* SECTION HEADER */
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.section-title{font-family:var(--font-serif);font-size:1.35rem;font-weight:500;letter-spacing:-.02em;}
.mb-4{margin-bottom:14px;}.mb-6{margin-bottom:22px;}
/* CATEGORIES */
.category-tree{list-style:none;}
.category-tree li{padding:9px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;font-size:.875rem;}
.category-tree li:last-child{border-bottom:none;}
.category-tree li.child{padding-left:34px;color:var(--muted);font-size:.84rem;}
.category-tree .cat-actions{margin-left:auto;display:flex;gap:4px;opacity:0;transition:opacity .15s;}
.category-tree li:hover .cat-actions{opacity:1;}
/* EMPTY STATE */
.empty-state{text-align:center;padding:56px 20px;color:var(--muted);}
.empty-state .es-icon{font-size:2.5rem;margin-bottom:12px;opacity:.5;}
.empty-state p{font-size:.875rem;}
/* MODALS */
.modal-overlay{position:fixed;inset:0;background:rgba(26,23,20,.4);display:flex;align-items:flex-end;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .22s;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg) var(--r-lg) 0 0;width:100%;max-height:92vh;max-height:92dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;box-shadow:var(--shadow-lg);transform:translateY(40px);transition:transform .28s cubic-bezier(.4,0,.2,1);}
.modal-overlay.open .modal{transform:translateY(0);}
.modal-handle{width:36px;height:4px;background:var(--border2);border-radius:100px;margin:10px auto 0;}
.modal-header{padding:16px 20px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--surface);z-index:1;}
.modal-title{font-family:var(--font-serif);font-size:1.1rem;font-weight:500;}
.modal-close{background:var(--bg2);border:1px solid var(--border);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:.85rem;cursor:pointer;color:var(--muted);transition:all .15s;}
.modal-close:hover{background:var(--bg);color:var(--text);}
.modal-body{padding:18px 20px;}
.modal-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;position:sticky;bottom:0;background:var(--surface);padding-bottom:max(14px,env(safe-area-inset-bottom));}
/* SETUP */
.setup-screen{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:2000;padding:20px;}
.setup-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:36px 32px;width:min(440px,100%);box-shadow:var(--shadow);}
.setup-logo{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.setup-logo .logo-icon{width:42px;height:42px;font-size:1.1rem;border-radius:11px;}
.setup-logo h2{font-family:var(--font-serif);font-size:1.8rem;font-weight:500;letter-spacing:-.03em;}
.setup-box>p{color:var(--muted);margin-bottom:28px;font-size:.875rem;}
.setup-box .form-group{margin-bottom:14px;}
.setup-hint{margin-top:16px;font-size:.75rem;color:var(--muted2);text-align:center;}
/* TOAST */
#toast-container{position:fixed;top:70px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:7px;pointer-events:none;}
.toast{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:11px 16px;font-size:.855rem;box-shadow:var(--shadow);display:flex;align-items:center;gap:9px;min-width:220px;max-width:320px;animation:toastIn .22s ease;pointer-events:all;}
.toast.success{border-left:3px solid var(--green);}
.toast.error{border-left:3px solid var(--red);}
.toast.info{border-left:3px solid var(--blue);}
@keyframes toastIn{from{opacity:0;transform:translateX(16px);}to{opacity:1;transform:none;}}
/* BOTTOM NAV */
.bottom-nav{
--bn-visible-handle: 38px;
display:none;
position:fixed;
left:12px;
right:12px;
bottom:calc(10px + env(safe-area-inset-bottom));
padding:8px;
background:linear-gradient(180deg,rgba(14,40,28,.96),rgba(8,27,19,.98));
border:1px solid rgba(255,255,255,.10);
border-radius:22px;
box-shadow:0 10px 28px rgba(0,0,0,.24),0 0 0 1px rgba(255,255,255,.03) inset;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
z-index:200;
transition:transform .26s ease,opacity .22s ease;
touch-action:pan-y;
}
.bottom-nav::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
pointer-events:none;
}
.bottom-nav-inner{
position:relative;
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr)) 34px;
gap:4px;
align-items:stretch;
}
.bn-item{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
min-height:58px;
min-width:0;
padding:6px 2px;
border:none;
border-radius:14px;
background:transparent;
color:rgba(244,249,246,.82);
font-family:var(--font-sans);
font-size:.60rem;
font-weight:600;
letter-spacing:.01em;
cursor:pointer;
transition:transform .18s ease,background .18s ease,color .18s ease,opacity .18s ease;
-webkit-tap-highlight-color:transparent;
}
.bn-item:hover{ background:rgba(255,255,255,.04); color:#fff; }
.bn-item:active{ transform:translateY(1px) scale(.98); }
.bn-icon{
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
background:rgba(255,255,255,.03);
box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
.bn-svg{
width:18px;
height:18px;
stroke:#fff;
fill:none;
stroke-width:1.9;
stroke-linecap:round;
stroke-linejoin:round;
}
.bn-label{
line-height:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:100%;
}
.bn-item.active{
color:#fff;
background:rgba(255,255,255,.05);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.bn-item.active .bn-icon{
background:rgba(255,255,255,.10);
transform:translateY(-1px);
box-shadow:0 6px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.bottom-nav-toggle{
align-self:center;
justify-self:end;
width:30px;
min-width:30px;
height:58px;
border:none;
border-radius:12px;
background:rgba(255,255,255,.06);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
padding:0;
-webkit-tap-highlight-color:transparent;
transition:background .18s ease, transform .18s ease;
}
.bottom-nav-toggle:active{ transform:scale(.97); }
.bottom-nav-toggle-icon{
width:18px;
height:18px;
stroke:#fff;
fill:none;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
transition:transform .24s ease;
}
.bottom-nav.is-collapsed{
transform:translateX(calc(100% - var(--bn-visible-handle)));
/* manipulation = no 300ms tap delay, allows fast single taps */
touch-action:manipulation;
cursor:pointer;
}
.bottom-nav.is-collapsed .bn-item,
.bottom-nav.is-collapsed + .fab{
opacity:0;
pointer-events:none;
}
.bottom-nav.is-collapsed .bottom-nav-toggle{
background:rgba(255,255,255,.10);
animation:bn-handle-hint 2.4s ease-in-out 1s 2;
}
@keyframes bn-handle-hint{
0%,100%{ background:rgba(255,255,255,.10); }
50% { background:rgba(255,255,255,.22); box-shadow:0 0 0 3px rgba(255,255,255,.08); }
}
.bottom-nav.is-collapsed .bottom-nav-toggle-icon{
transform:rotate(180deg);
}
body.sidebar-open .bottom-nav,
body.sidebar-open .fab{
opacity:0;
pointer-events:none;
}
/* FAB */
/* FAB pulse ring */
@keyframes fabPulse {
0% { box-shadow: 0 0 0 0 rgba(56,210,120,.55), 0 16px 28px rgba(15,141,103,.4); }
70% { box-shadow: 0 0 0 14px rgba(56,210,120,0), 0 16px 28px rgba(15,141,103,.4); }
100% { box-shadow: 0 0 0 0 rgba(56,210,120,0), 0 16px 28px rgba(15,141,103,.4); }
}
.fab{
position:fixed;
right:18px;
bottom:calc(var(--bottom-h) + 22px + env(safe-area-inset-bottom));
width:62px;
height:62px;
border-radius:20px;
background:linear-gradient(145deg,#3ecf7a 0%,#28a85e 45%,#1a7a44 100%);
color:#fff;
border:none;
font-size:1.9rem;
font-weight:300;
line-height:1;
cursor:pointer;
display:none;
align-items:center;
justify-content:center;
z-index:210;
animation:fabPulse 2.6s ease-out infinite;
transition:transform .16s ease,filter .16s ease;
/* Raised above bar with strong colored shadow */
filter:drop-shadow(0 6px 16px rgba(30,160,80,.55));
}
.fab:hover{
transform:translateY(-2px) scale(1.06);
filter:drop-shadow(0 10px 22px rgba(30,160,80,.7)) brightness(1.08);
animation:none;
}
.fab:active{
transform:translateY(1px) scale(.94);
filter:drop-shadow(0 3px 8px rgba(30,160,80,.4));
}
/* SIDEBAR OVERLAY */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:190;backdrop-filter:blur(1px);}
/* TEXT HELPERS */
.text-muted{color:var(--muted);}.text-green{color:var(--green);}.text-red{color:var(--red);}.text-accent{color:var(--accent);}
/* RESPONSIVE */
@media(max-width:1024px){.grid-4:not(#page-dashboard .grid-4){grid-template-columns:repeat(2,1fr);}.grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:768px){
html{font-size:14px;}
/* Garantir que todos os elementos scrolláveis sejam reconhecidos pelo iOS */
*{-webkit-tap-highlight-color:transparent;}
:root{--topbar-h:52px;--bottom-h:60px;}
.sidebar{position:fixed;top:0;left:0;bottom:0;height:100%;height:100dvh;transform:translateX(-100%);box-shadow:0 8px 40px rgba(0,0,0,.35);}
.sidebar.open{transform:translateX(0);}
.sidebar-overlay{display:block;opacity:0;pointer-events:none;transition:opacity .28s;}
.sidebar-overlay.open{opacity:1;pointer-events:all;}
.sb-close{display:flex;}
.bottom-nav{display:block;}.fab{display:flex;}.hamburger{display:flex;}
#globalAddBtn{display:none;}
.content{padding:16px;padding-bottom:calc(var(--bottom-h) + 104px + env(safe-area-inset-bottom));}
.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}
.account-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
.stat-value{font-size:1.35rem;}
.form-grid{grid-template-columns:1fr;}
.form-group.full{grid-column:1;}
.tab-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;}
.topbar{padding:0 16px;}.topbar-title{font-size:1.05rem;}
table th:nth-child(4),table td:nth-child(4){display:none;}
}
@media(max-width:390px){
.content{padding:12px;padding-bottom:calc(var(--bottom-h) + 76px);}
.stat-value{font-size:1.2rem;}
table th:nth-child(5),table td:nth-child(5){display:none;}
}
@media(min-width:769px){
.modal-overlay{align-items:center;}
.modal{border-radius:var(--r-lg);width:min(560px,96vw);max-height:90vh;max-height:90dvh;}
.modal-handle{display:none;}
}
/* ─── PAYEE AUTOCOMPLETE ─── */
.payee-input-wrap{position:relative;}
.payee-input-wrap input{padding-right:32px;}
.payee-status{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:.8rem;pointer-events:none;}
.payee-dropdown{
position:absolute;left:0;right:0;
background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-sm);box-shadow:var(--shadow);
z-index:1100;max-height:min(220px,40vh);overflow-y:auto;
-webkit-overflow-scrolling:touch;margin-top:2px;
}
.payee-opt{
padding:10px 14px;cursor:pointer;font-size:.875rem;
display:flex;align-items:center;gap:10px;
border-bottom:1px solid var(--border);transition:background .1s;
}
.payee-opt:last-child{border-bottom:none;}
.payee-opt:hover,.payee-opt.focused{background:var(--accent-lt);}
.payee-opt-icon{width:28px;height:28px;border-radius:50%;background:var(--bg2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--muted);flex-shrink:0;}
.payee-opt-name{font-weight:500;color:var(--text);}
.payee-opt-sub{font-size:.72rem;color:var(--muted);}
.payee-opt-create{color:var(--accent);font-weight:500;}
.payee-opt-create .payee-opt-icon{background:var(--accent-lt);border-color:rgba(42,96,73,.2);color:var(--accent);}
.payee-similar-banner{
margin-top:6px;padding:10px 12px;
background:var(--amber-lt);border:1px solid rgba(180,83,9,.2);
border-radius:var(--r-sm);font-size:.82rem;
}
.payee-similar-banner strong{color:var(--amber);display:block;margin-bottom:6px;}
.payee-similar-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}
.payee-chip{
display:inline-flex;align-items:center;gap:6px;
background:var(--accent-lt);border:1px solid rgba(42,96,73,.2);
border-radius:100px;padding:4px 10px 4px 8px;
font-size:.78rem;font-weight:500;color:var(--accent);
margin-top:4px;
}
.payee-chip-clear{cursor:pointer;font-size:.9rem;line-height:1;color:var(--accent);opacity:.6;}
.payee-chip-clear:hover{opacity:1;}
/* ─── ICON PICKER ─── */
.icon-picker{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface2);}
.icon-picker-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--bg2);}
.icon-tab{flex:1;padding:8px 4px;font-size:.72rem;font-weight:600;color:var(--muted);border:none;background:transparent;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;font-family:var(--font-sans);}
.icon-tab:hover{color:var(--text2);}
.icon-tab.active{color:var(--accent);border-bottom-color:var(--accent);background:var(--surface);}
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:6px;padding:10px;}
.icon-option{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:var(--r-sm);cursor:pointer;border:2px solid transparent;transition:all .15s;text-align:center;}
.icon-option:hover{background:var(--bg2);border-color:var(--border2);}
.icon-option.selected{border-color:var(--accent);background:var(--accent-lt);}
.icon-label{font-size:.6rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:64px;}
.icon-option.selected .icon-label{color:var(--accent);}
/* ─── BANK LOGOS (CSS-rendered) ─── */
.bank-logo{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-weight:800;font-size:.7rem;font-family:var(--font-sans);flex-shrink:0;letter-spacing:-.02em;}
.itau-logo{background:linear-gradient(135deg,#FF6600,#FF8C00);color:#fff;border-radius:8px;}
.inter-logo{background:#FF7A00;color:#fff;border-radius:8px;}
.bradesco-logo{background:#CC092F;color:#fff;border-radius:8px;}
.nubank-logo{background:#820AD1;color:#fff;border-radius:50%;}
.bb-logo{background:linear-gradient(135deg,#F5A623,#003087);color:#fff;border-radius:8px;}
.caixa-logo{background:#005CA9;color:#fff;border-radius:4px;}
.santander-logo{background:#EC0000;color:#fff;border-radius:50%;}
.xp-logo{background:#000;color:#fff;border-radius:6px;font-size:.75rem;}
.c6-logo{background:#242424;color:#fff;border-radius:6px;}
.boursobank-logo{background:linear-gradient(135deg,#1A2E5A,#2E4A8A);color:#fff;border-radius:6px;font-size:.65rem;}
/* ─── CARD LOGOS ─── */
.card-visa{background:#1A1F71;color:#fff;border-radius:4px;font-style:italic;font-size:.65rem;font-weight:900;letter-spacing:-.03em;font-family:serif;}
.card-mc{background:transparent;position:relative;width:36px;height:36px;display:flex;align-items:center;justify-content:center;}
.mc-left{width:22px;height:22px;border-radius:50%;background:#EB001B;position:absolute;left:0;}
.mc-right{width:22px;height:22px;border-radius:50%;background:#F79E1B;position:absolute;right:0;opacity:.9;}
.card-amex{background:#2E77BC;color:#fff;border-radius:4px;font-size:.55rem;font-weight:700;letter-spacing:.04em;}
.card-elo{background:#000;color:#F5BC00;border-radius:4px;font-size:.75rem;font-weight:900;font-style:italic;}
/* ─── CATEGORY TREE (enhanced) ─── */
.category-tree li{position:relative;}
.category-tree .cat-indent{display:flex;align-items:center;gap:8px;flex:1;}
.cat-parent-badge{font-size:.62rem;color:var(--muted);background:var(--bg2);border:1px solid var(--border);border-radius:100px;padding:1px 6px;margin-left:4px;}
.add-sub-btn{font-size:.7rem;color:var(--accent);border:1px solid rgba(42,96,73,.25);background:var(--accent-lt);border-radius:100px;padding:2px 8px;cursor:pointer;opacity:0;transition:opacity .15s;white-space:nowrap;font-family:var(--font-sans);}
.category-tree li:hover .add-sub-btn{opacity:1;}
.cat-sub-count{font-size:.65rem;color:var(--muted);background:var(--bg2);border-radius:100px;padding:1px 7px;border:1px solid var(--border);}
/* ─── TX ACCOUNT GROUPS ─── */
.tx-account-group { margin-bottom: 18px; }
.tx-account-header {
display: flex; align-items: center; gap: 10px;
padding: 9px 14px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--r-sm) var(--r-sm) 0 0;
cursor: pointer; user-select: none;
border-bottom: none;
}
.tx-account-header:hover { background: var(--bg2); }
.tx-account-name { font-weight: 600; font-size: .875rem; flex: 1; }
.tx-account-totals { display: flex; gap: 8px; align-items: center; }
.tx-account-toggle { color: var(--muted); font-size: .75rem; transition: transform .2s; display: inline-block; }
.tx-account-toggle.collapsed { transform: rotate(-90deg); }
.tx-account-body { border: 1px solid var(--border); border-radius: 0 0 var(--r-sm) var(--r-sm); overflow: hidden; }
.tx-account-body.collapsed { display: none; }
/* ─── VIEW MODE TOGGLE ─── */
.view-toggle {
display: flex; gap: 2px;
background: var(--bg2); border: 1px solid var(--border);
border-radius: var(--r-sm); padding: 3px;
}
.view-btn {
padding: 5px 10px; border-radius: 5px; border: none;
background: transparent; color: var(--muted);
font-size: .78rem; font-weight: 500; cursor: pointer;
transition: all .15s; font-family: var(--font-sans);
display: flex; align-items: center; gap: 4px;
}
.view-btn:hover { color: var(--text2); }
.view-btn.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
/* ─── CATEGORY SUGGESTION ─── */
.cat-suggestion {
display: flex; align-items: center; gap: 6px;
margin-top: 5px; padding: 6px 10px;
background: var(--accent-lt); border: 1px solid rgba(42,96,73,.2);
border-radius: var(--r-sm); font-size: .78rem; cursor: pointer;
transition: background .15s;
}
.cat-suggestion:hover { background: #d4eae3; }
.cat-suggestion-label { color: var(--muted); }
.cat-suggestion-name { color: var(--accent); font-weight: 600; }
/* ─── TX ACCOUNT GROUPS ─── */
.tx-groups { display: flex; flex-direction: column; gap: 14px; }
.tx-group-header {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
background: var(--surface2); border: 1px solid var(--border);
border-bottom: 2px solid var(--border2);
cursor: pointer; user-select: none;
position: sticky; top: 0; z-index: 2;
}
.tx-group-header:hover { background: var(--bg2); }
.tx-group-icon { flex-shrink: 0; }
.tx-group-name { font-weight: 600; font-size: .9rem; flex: 1; }
.tx-group-totals { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tx-group-toggle { font-size: .75rem; color: var(--muted); transition: transform .2s; line-height: 1; }
.tx-group-body { display: block; }
.tx-group-body.collapsed { display: none; }
.tx-group-wrap { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.tx-group-header { border-radius: var(--r) var(--r) 0 0; }
/* view-mode toggle */
.view-toggle { display:flex; gap:2px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-sm); padding:3px; }
.view-btn { padding:5px 10px; border-radius:5px; border:none; background:transparent; color:var(--muted); font-size:.78rem; font-weight:500; cursor:pointer; transition:all .15s; font-family:var(--font-sans); }
.view-btn:hover { color:var(--text2); }
.view-btn.active { background:var(--surface); color:var(--accent); box-shadow:var(--shadow-sm); }
/* ─── CATEGORY SUGGESTION ─── */
.cat-suggestion {
display:none; align-items:center; gap:8px;
margin-top:5px; padding:7px 10px;
background:var(--accent-lt); border:1px solid rgba(42,96,73,.2);
border-radius:var(--r-sm); font-size:.8rem; cursor:pointer;
transition:background .15s; animation: fadeIn .2s;
}
.cat-suggestion.visible { display:flex; }
.cat-suggestion:hover { background:#cde8dc; }
.cat-sug-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.cat-sug-label { color:var(--muted); }
.cat-sug-name { color:var(--accent); font-weight:600; flex:1; }
.cat-sug-dismiss { color:var(--muted); font-size:.9rem; opacity:.5; }
.cat-sug-dismiss:hover { opacity:1; }
@keyframes fadeIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }
/* ─── CATEGORY PICKER ─── */
.cat-picker-wrap { position: relative; }
.cat-picker-btn {
width: 100%; padding: 8px 12px;
background: var(--surface); border: 1px solid var(--border2);
border-radius: var(--r-sm); cursor: pointer; text-align: left;
font-family: var(--font-sans); font-size: .875rem; color: var(--text);
display: flex; align-items: center; gap: 8px;
transition: border-color .15s;
}
.cat-picker-btn:hover { border-color: var(--accent); }
.cat-picker-btn.open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-lt); }
.cat-picker-caret { margin-left: auto; color: var(--muted); font-size: .7rem; transition: transform .2s; }
.cat-picker-btn.open .cat-picker-caret { transform: rotate(180deg); }
.cat-picker-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cat-picker-dropdown {
position: absolute; left: 0; right: 0; top: calc(100% + 4px);
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-sm); box-shadow: var(--shadow);
z-index: 1100; max-height: min(320px, 50vh); overflow-y: auto;
display: none; -webkit-overflow-scrolling: touch;
}
.cat-picker-dropdown.open { display: block; }
.cat-group-header {
display: flex; align-items: center; gap: 8px;
padding: 9px 12px; cursor: pointer;
border-bottom: 1px solid var(--border);
transition: background .12s; user-select: none;
position: sticky; top: 0; background: var(--surface2); z-index: 1;
}
.cat-group-header:hover { background: var(--bg2); }
.cat-group-label { font-weight: 600; font-size: .85rem; flex: 1; color: var(--text2); }
.cat-group-count { font-size: .65rem; color: var(--muted); background: var(--bg2); border: 1px solid var(--border); border-radius: 100px; padding: 1px 6px; }
.cat-group-arrow { font-size: .65rem; color: var(--muted); transition: transform .18s; }
.cat-group-arrow.open { transform: rotate(90deg); }
.cat-group-select { /* "select this parent" button */
font-size: .68rem; color: var(--accent); border: 1px solid rgba(42,96,73,.25);
background: var(--accent-lt); border-radius: 100px; padding: 2px 7px;
cursor: pointer; white-space: nowrap; flex-shrink: 0;
font-family: var(--font-sans);
}
.cat-group-select:hover { background: #cde8dc; }
.cat-children { display: none; }
.cat-children.open { display: block; }
.cat-option {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px 8px 28px; cursor: pointer;
border-bottom: 1px solid var(--border);
font-size: .85rem; transition: background .1s;
color: var(--text2);
}
.cat-option:last-child { border-bottom: none; }
.cat-option:hover { background: var(--accent-lt); color: var(--accent); }
.cat-option.selected { background: var(--accent-lt); color: var(--accent); font-weight: 600; }
.cat-none-option {
display: flex; align-items: center; gap: 8px;
padding: 9px 12px; cursor: pointer;
border-bottom: 1px solid var(--border);
font-size: .85rem; color: var(--muted); transition: background .12s;
}
.cat-none-option:hover { background: var(--bg2); }
/* ─── PAYEE GROUPS ─── */
.payee-group-wrap { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; margin-bottom: 14px; }
.payee-group-header {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px; cursor: pointer; user-select: none;
background: var(--surface2); border-bottom: 1px solid var(--border);
transition: background .12s;
}
.payee-group-header:hover { background: var(--bg2); }
.payee-group-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.payee-group-title { font-weight: 700; font-size: .95rem; flex: 1; }
.payee-group-meta { display: flex; gap: 6px; align-items: center; }
.payee-group-arrow { font-size: .7rem; color: var(--muted); transition: transform .2s; }
.payee-group-arrow.collapsed { transform: rotate(-90deg); }
.payee-group-body { display: block; }
.payee-group-body.collapsed { display: none; }
.payee-summary-chip {
display: flex; align-items: center; gap: 6px;
padding: 6px 12px; background: var(--surface);
border: 1px solid var(--border); border-radius: var(--r-sm);
font-size: .78rem; cursor: pointer; transition: box-shadow .15s;
}
.payee-summary-chip:hover { box-shadow: var(--shadow); }
/* ─── SCHEDULED TRANSACTIONS ─── */
.sc-recurrence-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 6px; margin-top: 6px;
}
.sc-freq-opt {
display: flex; align-items: center; gap: 6px;
padding: 8px 10px; border: 1.5px solid var(--border);
border-radius: var(--r-sm); cursor: pointer; font-size: .82rem;
transition: all .14s; user-select: none;
}
.sc-freq-opt:has(input:checked) {
border-color: var(--accent); background: var(--accent-lt); color: var(--accent); font-weight: 600;
}
.sc-freq-opt input[type=radio] { display: none; }
.sc-end-grid {
display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px;
}
.sc-end-opt {
display: flex; align-items: center; gap: 6px;
padding: 7px 12px; border: 1.5px solid var(--border);
border-radius: var(--r-sm); cursor: pointer; font-size: .82rem;
transition: all .14s; user-select: none;
}
.sc-end-opt:has(input:checked) {
border-color: var(--accent); background: var(--accent-lt); color: var(--accent); font-weight: 600;
}
.sc-end-opt input[type=radio] { display: none; }
.sc-preview {
background: var(--surface2); border: 1px solid var(--border);
border-radius: var(--r-sm); padding: 10px 14px;
font-size: .8rem; color: var(--muted); min-height: 36px;
line-height: 1.6;
}
.sc-preview strong { color: var(--accent); }
.sc-preview .sc-dates { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sc-preview .sc-date-chip {
background: var(--accent-lt); color: var(--accent);
border-radius: 100px; padding: 2px 8px; font-size: .72rem; font-weight: 500;
}
/* Scheduled list cards */
.sc-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); margin-bottom: 10px;
box-shadow: var(--shadow-sm); overflow: hidden;
transition: box-shadow .15s;
}
.sc-card:hover { box-shadow: var(--shadow); }
.sc-card-header {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; cursor: pointer;
}
.sc-card-type {
width: 36px; height: 36px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 1rem; flex-shrink: 0;
}
.sc-card-info { flex: 1; min-width: 0; }
.sc-card-title { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-card-sub { font-size: .75rem; color: var(--muted); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sc-card-amount { font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem; flex-shrink: 0; }
.sc-card-actions { display: flex; gap: 5px; flex-shrink: 0; align-items: center; }
.sc-card-body { display: none; border-top: 1px solid var(--border); }
.sc-card-body.open { display: block; }
.sc-occurrences { padding: 12px 16px; }
.sc-occ-row {
display: flex; align-items: center; gap: 10px;
padding: 7px 0; border-bottom: 1px solid var(--border);
font-size: .83rem;
}
.sc-occ-row:last-child { border-bottom: none; }
.sc-occ-date { color: var(--muted); min-width: 80px; flex-shrink: 0; }
.sc-occ-label { flex: 1; color: var(--text2); }
.sc-occ-status { flex-shrink: 0; }
.sc-status-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; border-radius: 100px;
font-size: .7rem; font-weight: 600; white-space: nowrap;
}
.sc-status-active { background: var(--green-lt); color: var(--green); border: 1px solid rgba(42,122,74,.2); }
.sc-status-paused { background: var(--amber-lt); color: var(--amber); border: 1px solid rgba(180,83,9,.2); }
.sc-status-finished { background: var(--bg2); color: var(--muted); border: 1px solid var(--border); }
.sc-status-overdue { background: var(--red-lt); color: var(--red); border: 1px solid rgba(192,57,43,.2); }
.sc-next-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: 100px;
font-size: .7rem; font-weight: 600;
background: var(--amber-lt); color: var(--amber);
border: 1px solid rgba(180,83,9,.2);
}
.sc-upcoming-row-overdue td { background: var(--red-lt)!important; }
/* ─── CATEGORY DRAG-AND-DROP EDITOR ─── */
.cat-editor-wrap { margin-bottom: 16px; }
.cat-editor-header {
display:flex; align-items:center; gap:10px; padding:10px 14px;
background:var(--surface2); border:1px solid var(--border);
border-radius:var(--r-sm) var(--r-sm) 0 0; cursor:pointer;
}
.cat-editor-header:hover { background:var(--bg2); }
.cat-editor-body { border:1px solid var(--border); border-top:none; border-radius:0 0 var(--r-sm) var(--r-sm); overflow:hidden; }
.cat-item-row {
display:flex; align-items:center; gap:8px; padding:9px 14px;
border-bottom:1px solid var(--border); background:var(--surface);
transition:background .12s; cursor:default;
position:relative;
}
.cat-item-row:last-child { border-bottom:none; }
.cat-item-row:hover { background:var(--surface2); }
.cat-item-row.dragging { opacity:.4; background:var(--accent-lt); }
.cat-item-row.drag-over { background:var(--accent-lt); border-top:2px solid var(--accent); }
.cat-drag-handle {
cursor:grab; color:var(--muted2); font-size:.9rem; padding:2px 4px;
touch-action:none; user-select:none; flex-shrink:0;
}
.cat-drag-handle:active { cursor:grabbing; }
.cat-item-icon { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.78rem; flex-shrink:0; }
.cat-item-name { flex:1; font-size:.875rem; font-weight:500; }
.cat-item-name.child-name { font-weight:400; color:var(--text2); }
.cat-item-indent { width:20px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.cat-parent-chip {
font-size:.68rem; background:var(--bg2); border:1px solid var(--border);
border-radius:100px; padding:1px 8px; color:var(--muted); cursor:pointer;
}
.cat-parent-chip:hover { border-color:var(--accent); color:var(--accent); }
.cat-inline-actions { display:flex; gap:4px; margin-left:auto; opacity:0; transition:opacity .12s; }
.cat-item-row:hover .cat-inline-actions { opacity:1; }
.cat-inline-input {
border:1px solid var(--accent); border-radius:var(--r-sm); padding:3px 8px;
font-family:var(--font-sans); font-size:.875rem; background:var(--surface);
flex:1; outline:none;
}
/* ─── TRANSACTION ATTACHMENT ─── */
.tx-attachment-area {
border:2px dashed var(--border2); border-radius:var(--r-sm);
padding:16px; text-align:center; cursor:pointer;
transition:all .15s; color:var(--muted);
}
.tx-attachment-area:hover, .tx-attachment-area.drag-active {
border-color:var(--accent); background:var(--accent-lt); color:var(--accent);
}
.tx-attachment-area input[type=file] { display:none; }
.tx-attachment-preview {
display:flex; align-items:center; gap:10px; padding:8px 12px;
background:var(--surface2); border:1px solid var(--border);
border-radius:var(--r-sm); margin-top:6px;
}
.tx-attachment-preview .att-name { flex:1; font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tx-attachment-preview .att-remove { color:var(--red); cursor:pointer; font-size:.85rem; }
/* ─── ACCOUNT IOF CONFIG ─── */
.iof-config {
background:var(--amber-lt); border:1px solid rgba(180,83,9,.2);
border-radius:var(--r-sm); padding:12px 14px; margin-top:8px;
display:none;
}
.iof-config.visible { display:block; }
.iof-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.iof-toggle { display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.iof-toggle input[type=checkbox] { width:16px; height:16px; accent-color:var(--accent); }
/* ─── IOF TRANSACTION ─── */
.iof-intl-toggle {
display:flex; align-items:center; gap:8px; padding:8px 12px;
background:var(--amber-lt); border:1px solid rgba(180,83,9,.2);
border-radius:var(--r-sm); cursor:pointer; user-select:none;
font-size:.85rem; transition:background .12s;
}
.iof-intl-toggle:hover { background:#fde68a33; }
.iof-intl-toggle input[type=checkbox] { width:15px; height:15px; accent-color:var(--amber); flex-shrink:0; }
.iof-mirror-info {
background:var(--amber-lt); border:1px solid rgba(180,83,9,.2);
border-radius:var(--r-sm); padding:10px 12px; font-size:.8rem;
display:none; margin-top:4px; line-height:1.6;
}
.iof-mirror-info.visible { display:block; }
/* ─── FORECAST REPORT ─── */
.forecast-account-section { margin-bottom:20px; }
.forecast-account-header {
display:flex; align-items:center; gap:10px; padding:12px 16px;
background:var(--surface2); border:1px solid var(--border);
border-radius:var(--r-sm) var(--r-sm) 0 0;
border-bottom:2px solid var(--accent);
cursor:pointer;
}
.forecast-account-header:hover { background:var(--bg2); }
.forecast-table-wrap { border:1px solid var(--border); border-top:none; border-radius:0 0 var(--r-sm) var(--r-sm); overflow:hidden; }
.forecast-row-past { opacity:.55; }
.forecast-row-today { background:var(--accent-lt)!important; font-weight:600; }
.forecast-row-negative td.forecast-balance { color:var(--red)!important; font-weight:700; }
.forecast-balance { font-family:var(--font-serif); font-weight:500; }
.forecast-chart-wrap { position:relative; height:220px; }
/* ─── EMAIL EXPORT ─── */
.email-export-bar {
display:flex; align-items:center; gap:10px; padding:12px 16px;
background:var(--surface2); border:1px solid var(--border);
border-radius:var(--r-sm); margin-bottom:14px; flex-wrap:wrap;
}
.email-export-bar input[type=email] { flex:1; min-width:180px; }
/* ─── PIN LOCK SCREEN ─── */
.pin-screen {
position: fixed; inset: 0; z-index: 9999;
background: linear-gradient(145deg, #0d3d2b 0%, #1a5c42 40%, #0f4a33 100%);
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 32px 24px;
}
.pin-logo-wrap {
margin-bottom: 32px; text-align: center; animation: pinLogoIn .6s cubic-bezier(.34,1.56,.64,1) both;
}
.pin-logo-img {
width: min(300px, 72vw); height: auto; object-fit: contain;
filter: drop-shadow(0 4px 24px rgba(0,0,0,.6));
}
@keyframes pinLogoIn {
from { opacity:0; transform: scale(.7) translateY(-20px); }
to { opacity:1; transform: scale(1) translateY(0); }
}
.pin-card {
background: rgba(255,255,255,.08); backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,.15);
border-radius: 24px; padding: 32px 28px; width: min(340px,100%);
box-shadow: 0 20px 60px rgba(0,0,0,.35);
animation: pinCardIn .5s .15s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes pinCardIn {
from { opacity:0; transform: translateY(30px) scale(.95); }
to { opacity:1; transform: translateY(0) scale(1); }
}
.pin-title {
color: rgba(255,255,255,.9); font-family: var(--font-serif);
font-size: 1.2rem; font-weight: 500; text-align: center; margin-bottom: 6px;
}
.pin-subtitle {
color: rgba(255,255,255,.5); font-size: .78rem; text-align: center; margin-bottom: 24px;
}
.pin-dots {
display: flex; justify-content: center; gap: 14px; margin-bottom: 28px;
}
.pin-dot {
width: 16px; height: 16px; border-radius: 50%;
border: 2px solid rgba(255,255,255,.4);
transition: all .2s cubic-bezier(.34,1.56,.64,1);
}
.pin-dot.filled {
background: #7ddc9e; border-color: #7ddc9e;
box-shadow: 0 0 12px #7ddc9e88;
transform: scale(1.15);
}
.pin-dot.error {
background: #ff6b6b; border-color: #ff6b6b;
box-shadow: 0 0 12px #ff6b6b88;
}
.pin-keypad {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.pin-key {
aspect-ratio: 1; border: none; border-radius: 50%;
background: rgba(255,255,255,.12); color: white;
font-size: 1.4rem; font-weight: 400; cursor: pointer;
transition: all .15s; font-family: var(--font-sans);
display: flex; align-items: center; justify-content: center;
-webkit-tap-highlight-color: transparent; user-select: none;
}
.pin-key:active, .pin-key.pressed { background: rgba(125,220,158,.35); transform: scale(.92); }
.pin-key.zero { grid-column: 2; }
.pin-key.del { background: transparent; font-size: 1.1rem; opacity: .7; }
.pin-key.del:active { background: rgba(255,100,100,.2); }
.pin-error-msg {
text-align: center; color: #ff9999; font-size: .8rem;
margin-top: 16px; min-height: 20px; font-weight: 500;
}
.pin-shake { animation: pinShake .4s ease; }
@keyframes pinShake {
0%,100%{ transform:translateX(0); }
20% { transform:translateX(-8px); }
40% { transform:translateX(8px); }
60% { transform:translateX(-5px); }
80% { transform:translateX(5px); }
}
/* ─── SETTINGS PAGE ─── */
.settings-section { margin-bottom: 20px; }
.settings-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm);
}
.settings-row {
display: flex; align-items: center; gap: 14px;
padding: 14px 18px; border-bottom: 1px solid var(--border); min-height: 60px;
}
.settings-row:last-child { border-bottom: none; }
.settings-row-icon {
width: 38px; height: 38px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem; flex-shrink: 0;
}
.settings-row-info { flex: 1; }
.settings-row-label { font-weight: 600; font-size: .9rem; }
.settings-row-sub { font-size: .75rem; color: var(--muted); margin-top: 2px; }
.settings-row-action { flex-shrink: 0; }
/* ─── PIN CHANGE MODAL ─── */
.pin-step { display: none; }
.pin-step.active { display: block; }
.pin-input-row {
display: flex; gap: 10px; justify-content: center; margin: 16px 0;
}
.pin-input-box {
width: 52px; height: 58px; border: 2px solid var(--border);
border-radius: var(--r-sm); text-align: center; font-size: 1.6rem;
font-family: var(--font-serif); background: var(--surface);
transition: border-color .15s; outline: none; letter-spacing: .1em;
-webkit-text-security: disc; text-security: disc;
}
.pin-input-box:focus { border-color: var(--accent); }
@media(max-width:768px){
.topbar-logo-mobile { display: block!important; }
}
/* ─── CHART LEGEND INTERACTION ─── */
canvas { cursor: default; }
.chartjs-render-monitor { cursor: default; }
/* ─── REPORTS PAGE ─── */
.report-toolbar {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); padding: 12px 16px; margin-bottom: 14px;
box-shadow: var(--shadow-sm);
}
.report-toolbar-sep {
width: 1px; height: 24px; background: var(--border); flex-shrink: 0;
}
.report-filter-bar {
display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px; background: var(--surface2); border: 1px solid var(--border);
border-radius: var(--r); padding: 14px 16px; margin-bottom: 14px;
}
.report-filter-bar label { font-size:.75rem; color:var(--muted); font-weight:600; display:block; margin-bottom:4px; }
.report-filter-bar select,
.report-filter-bar input { width:100%; font-size:.82rem; }
.report-kpi-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px;
}
.report-kpi {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.report-kpi-label { font-size:.72rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
.report-kpi-value { font-family:var(--font-serif); font-size:1.25rem; font-weight:600; }
.report-section-title {
font-size:.72rem; font-weight:700; text-transform:uppercase;
letter-spacing:.08em; color:var(--muted); margin: 18px 0 8px; padding-left:2px;
}
.export-btn-group { display:flex; gap:6px; flex-wrap:wrap; }
.export-btn {
display:flex; align-items:center; gap:6px; padding:7px 13px;
border-radius:var(--r-sm); font-size:.8rem; font-weight:500;
cursor:pointer; border:1px solid; transition:all .15s; font-family:var(--font-sans);
}
.export-btn-pdf { background:var(--red-lt); color:var(--red); border-color:rgba(192,57,43,.25); }
.export-btn-print{ background:var(--blue-lt); color:var(--blue); border-color:rgba(30,91,168,.25); }
.export-btn-csv { background:var(--green-lt); color:var(--green); border-color:rgba(42,122,74,.25); }
.export-btn-email{ background:var(--accent-lt); color:var(--accent); border-color:rgba(42,96,73,.25); }
.export-btn:hover { filter:brightness(.93); }
.email-popup {
position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:3000;
display:flex; align-items:center; justify-content:center; padding:20px;
}
.email-popup-box {
background:var(--surface); border-radius:var(--r-lg); padding:28px 28px 24px;
width:min(420px,100%); box-shadow:var(--shadow-lg);
}
.email-popup-box h3 { font-family:var(--font-serif); font-size:1.2rem; margin-bottom:16px; }
.email-popup-row { display:flex; gap:8px; margin-top:14px; }
@media print {
body > *:not(#printArea) { display:none !important; }
#printArea { display:block !important; position:fixed; inset:0; background:#fff; z-index:99999; padding:20mm; }
#printArea .no-print { display:none !important; }
}
#printArea { display:none; }
/* ─── EMAILJS CONFIG MODAL ─── */
.ej-status-dot {
width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
display: inline-block; margin-right: 6px;
}
.ej-status-ok { background: var(--green); box-shadow: 0 0 6px var(--green); }
.ej-status-warn { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
.ej-help-box {
background: var(--accent-lt); border: 1px solid rgba(42,96,73,.18);
border-radius: var(--r-sm); padding: 12px 14px; font-size: .78rem;
color: var(--text2); line-height: 1.65;
}
.ej-help-box strong { color: var(--accent); }
.ej-help-box code {
background: rgba(42,96,73,.1); border-radius: 4px;
padding: 1px 5px; font-family: monospace; font-size: .8rem;
color: var(--accent);
}
.ej-field-row { display: flex; align-items: center; gap: 8px; }
.ej-field-row input { flex: 1; }
.ej-copy-btn {
flex-shrink: 0; background: var(--surface2); border: 1px solid var(--border);
border-radius: var(--r-sm); padding: 6px 10px; font-size: .75rem;
cursor: pointer; color: var(--muted); transition: all .15s;
}
.ej-copy-btn:hover { border-color: var(--accent); color: var(--accent); }
.ej-test-result {
font-size: .78rem; padding: 8px 12px; border-radius: var(--r-sm);
margin-top: 6px; display: none;
}
.ej-test-ok { background: var(--green-lt); color: var(--green); border: 1px solid rgba(42,122,74,.2); display:block; }
.ej-test-err { background: var(--red-lt); color: var(--red); border: 1px solid rgba(192,57,43,.2); display:block; }
/* ════════════════════════════════
IMPORT PAGE
════════════════════════════════ */
.import-hero {
background: linear-gradient(135deg,#0d3d2b 0%,#1e5c42 100%);
border-radius: var(--r-lg); padding: 28px 32px; margin-bottom: 16px;
display: flex; align-items: center; gap: 20px; color:#fff;
}
.import-hero-icon { font-size:3rem; flex-shrink:0; }
.import-hero h2 { font-family:var(--font-serif); font-size:1.5rem; font-weight:500; margin-bottom:4px; }
.import-hero p { font-size:.85rem; opacity:.8; line-height:1.5; }
.import-drop-zone {
border: 2px dashed var(--accent); border-radius: var(--r-lg);
padding: 40px 24px; text-align: center; cursor: pointer;
transition: all .2s; background: var(--accent-lt); position: relative;
margin-bottom: 16px;
}
.import-drop-zone:hover, .import-drop-zone.dragover {
background: rgba(42,96,73,.12); border-color: var(--accent);
transform: translateY(-2px);
}
.import-drop-zone input[type=file] {
position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;
}
.import-drop-icon { font-size:2.5rem; margin-bottom:10px; }
.import-drop-title { font-size:1rem; font-weight:600; color:var(--accent); margin-bottom:4px; }
.import-drop-sub { font-size:.8rem; color:var(--muted); }
.import-section-grid {
display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap:12px;
margin-bottom: 16px;
}
.import-section-card {
background: var(--surface); border: 1.5px solid var(--border);
border-radius: var(--r); padding: 18px 16px; cursor: pointer;
transition: all .15s; text-align: center;
}
.import-section-card:hover { border-color:var(--accent); box-shadow: 0 4px 16px rgba(42,96,73,.12); transform:translateY(-2px); }
.import-section-card.active { border-color:var(--accent); background:var(--accent-lt); }
.import-section-card.disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }
.import-sc-icon { font-size:2rem; margin-bottom:8px; }
.import-sc-title { font-size:.9rem; font-weight:600; color:var(--text1); margin-bottom:3px; }
.import-sc-sub { font-size:.75rem; color:var(--muted); }
.import-sc-count {
display:inline-block; background:var(--accent); color:#fff;
border-radius:100px; font-size:.68rem; font-weight:700;
padding:1px 8px; margin-top:6px;
}
/* Staging table */
.staging-header {
display:flex; align-items:center; justify-content:space-between;
flex-wrap:wrap; gap:10px; margin-bottom:12px;
}
.staging-tabs { display:flex; gap:6px; flex-wrap:wrap; }
.staging-tab {
padding:5px 14px; border-radius:100px; font-size:.78rem; font-weight:600;
border: 1.5px solid var(--border); cursor:pointer; transition:all .15s;
background:var(--surface); color:var(--muted);
}
.staging-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.staging-tab.has-items { border-color:var(--accent); color:var(--accent); }
.staging-row-insert { background: rgba(42,122,74,.04); }
.staging-row-update { background: rgba(245,158,11,.06); }
.staging-row-skip { background: rgba(100,100,100,.04); color:var(--muted); }
.staging-action-badge {
display:inline-block; padding:1px 8px; border-radius:4px;
font-size:.68rem; font-weight:700; text-transform:uppercase;
}
.badge-insert { background:var(--green-lt); color:var(--green); }
.badge-update { background:#fef3c7; color:#b45309; }
.badge-skip { background:var(--bg2); color:var(--muted); }
.badge-error { background:var(--red-lt); color:var(--red); }
.import-progress {
background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
padding:20px; margin-bottom:12px;
}
.import-progress-bar-track {
background:var(--bg2); border-radius:100px; height:8px; overflow:hidden; margin:10px 0;
}
.import-progress-bar-fill {
height:100%; background:var(--accent); border-radius:100px;
transition:width .3s ease; width:0%;
}
.import-log {
background:var(--bg2); border-radius:var(--r-sm); padding:10px 12px;
font-family:monospace; font-size:.75rem; color:var(--text2);
max-height:120px; overflow-y:auto; margin-top:8px;
}
.import-log .log-ok { color:var(--green); }
.import-log .log-err { color:var(--red); }
.import-log .log-info{ color:var(--muted); }
/* Backup section */
.backup-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); padding: 20px 22px; margin-bottom: 12px;
}
.backup-card h4 { font-size:.9rem; font-weight:600; margin-bottom:4px; color:var(--text1); }
.backup-card p { font-size:.8rem; color:var(--muted); margin-bottom:14px; }
.danger-zone {
border: 1.5px solid rgba(192,57,43,.3) !important;
background: rgba(192,57,43,.03) !important;
}
.danger-zone h4 { color:var(--red) !important; }
/* Options bar for transaction import */
.import-options-bar {
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
background:var(--surface2); border:1px solid var(--border);
border-radius:var(--r-sm); padding:10px 14px; margin-bottom:12px;
}
.import-options-bar label { font-size:.8rem; color:var(--text2); font-weight:500; }
/* ════════ COL TEMPLATE MAPPER ════════ */
.import-wizard-steps {
display:flex; align-items:center; gap:0; margin-bottom:20px;
background:var(--surface); border:1px solid var(--border);
border-radius:var(--r); padding:14px 20px; flex-wrap:wrap; gap:8px;
}
.import-wizard-step {
display:flex; align-items:center; gap:8px; font-size:.8rem;
color:var(--muted); font-weight:500;
}
.import-wizard-step.active { color:var(--accent); font-weight:700; }
.import-wizard-step.done { color:var(--green); }
.import-wizard-step-num {
width:24px; height:24px; border-radius:50%; font-size:.72rem; font-weight:700;
display:flex; align-items:center; justify-content:center;
border:2px solid currentColor; flex-shrink:0;
}
.import-wizard-sep { color:var(--border); font-size:1.1rem; margin:0 4px; }
/* Column template mapper */
.col-mapper-screen {
display:none; background:var(--surface); border:1px solid var(--border);
border-radius:var(--r); padding:20px; margin-bottom:12px;
}
.col-mapper-title { font-size:.95rem; font-weight:700; color:var(--text1); margin-bottom:4px; }
.col-mapper-sub { font-size:.8rem; color:var(--muted); margin-bottom:16px; }
/* Section tabs inside mapper */
.cmap-section-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; border-bottom:1.5px solid var(--border); padding-bottom:10px; }
.cmap-section-tab { padding:6px 16px; border-radius:100px; font-size:.8rem; font-weight:600; border:1.5px solid var(--border); cursor:pointer; transition:all .15s; background:var(--surface); color:var(--muted); }
.cmap-section-tab:hover { border-color:var(--accent); color:var(--accent); }
.cmap-section-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); }
/* Field group card */
.cmap-group { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); margin-bottom:12px; overflow:hidden; }
.cmap-group-header { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; background:var(--surface2); border-bottom:1px solid var(--border); }
.cmap-group-icon { font-size:1.1rem; flex-shrink:0; }
.cmap-group-title { font-size:.82rem; font-weight:700; color:var(--text1); }
.cmap-group-sub { font-size:.72rem; color:var(--muted); margin-top:1px; }
.cmap-group-body { padding:12px 14px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:640px){ .cmap-group-body { grid-template-columns:1fr; } }
/* Individual field row */
.col-mapper-row { display:flex; flex-direction:column; gap:3px; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-sm); padding:10px 12px; transition:border-color .15s; }
.col-mapper-row.required-field { border-color:var(--accent); }
.col-mapper-label { font-size:.75rem; font-weight:700; color:var(--text2); display:flex; align-items:center; gap:4px; }
.col-mapper-label .req-star { color:var(--red); font-size:.7rem; }
.col-mapper-hint { font-size:.65rem; color:var(--muted); }
.col-mapper-select { width:100%; font-size:.8rem; padding:5px 8px; border:1.5px solid var(--border); border-radius:var(--r-sm); background:var(--surface); color:var(--text1); font-family:var(--font-sans); margin-top:3px; }
.col-mapper-select:focus { outline:none; border-color:var(--accent); }
.col-mapper-select.mapped { border-color:var(--green); }
.col-mapper-sample { font-size:.62rem; color:var(--muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Sample preview table */
.col-preview-wrap {
overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-sm);
margin-bottom:14px; max-height:200px; overflow-y:auto;
}
.col-preview-table {
border-collapse:collapse; font-size:.73rem; width:100%; white-space:nowrap;
}
.col-preview-table th {
background:var(--bg2); border-bottom:1px solid var(--border);
padding:6px 10px; text-align:left; font-weight:600; color:var(--text2);
position:sticky; top:0; z-index:1;
}
.col-preview-table td {
border-bottom:1px solid var(--border); padding:5px 10px; color:var(--text1);
max-width:200px; overflow:hidden; text-overflow:ellipsis;
}
.col-preview-table tr:last-child td { border-bottom:none; }
.col-preview-table th.col-mapped { background:var(--accent-lt); color:var(--accent); }
/* Source preset chips */
.source-chips {
display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;
}
.source-chip {
padding:6px 14px; border-radius:100px; font-size:.78rem; font-weight:600;
border:1.5px solid var(--border); cursor:pointer; transition:all .15s;
background:var(--surface); color:var(--text2);
}
.source-chip:hover { border-color:var(--accent); color:var(--accent); }
.source-chip.active { background:var(--accent); color:#fff; border-color:var(--accent); }
/* Dedup/mode bar */
.import-mode-bar {
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
background:var(--surface2); border:1px solid var(--border);
border-radius:var(--r-sm); padding:10px 14px; margin-bottom:12px;
font-size:.8rem;
}
.import-mode-bar label { display:flex; align-items:center; gap:5px; cursor:pointer; }
/* map-badge */
.map-badge-new { display:inline-block;padding:1px 8px;border-radius:4px;font-size:.68rem;font-weight:700;background:var(--green-lt);color:var(--green); }
.map-badge-exists { display:inline-block;padding:1px 8px;border-radius:4px;font-size:.68rem;font-weight:700;background:var(--bg2);color:var(--muted); }
.map-select { font-size:.78rem;padding:4px 6px;border:1.5px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text1);font-family:var(--font-sans); }
.map-count { font-size:.7rem;font-weight:600;color:var(--muted); }
/* field-map tabs */
.field-map-screen {
display:none; background:var(--surface); border:1px solid var(--border);
border-radius:var(--r); padding:20px; margin-bottom:12px;
}
.field-map-title { font-size:.95rem;font-weight:700;color:var(--text1);margin-bottom:4px; }
.field-map-sub { font-size:.8rem;color:var(--muted);margin-bottom:14px; }
.field-map-tabs { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;border-bottom:1px solid var(--border);padding-bottom:10px; }
.field-map-tab { padding:5px 14px;border-radius:100px;font-size:.78rem;font-weight:600;border:1.5px solid var(--border);cursor:pointer;transition:all .15s;background:var(--surface);color:var(--muted); }
.field-map-tab.active { background:var(--accent);color:#fff;border-color:var(--accent); }
.field-map-panel { display:none; }
.field-map-panel.active { display:block; }
/* ════════ AUTH / LOGIN ════════ */
.auth-screen {
position:fixed;inset:0;z-index:9000;
background:linear-gradient(135deg,#0d3d2b 0%,#1a5c42 60%,#2a6049 100%);
display:flex;align-items:center;justify-content:center;
padding:20px;
}
.auth-card {
background:#fff;border-radius:20px;padding:40px 36px;
width:100%;max-width:420px;box-shadow:0 24px 80px rgba(0,0,0,.35);
}
.auth-logo { text-align:center;margin-bottom:28px; }
.auth-logo img { width:120px;height:auto; }
.auth-title { font-family:'Lora',serif;font-size:1.5rem;font-weight:500;color:#1a1714;margin-bottom:4px;text-align:center; }
.auth-sub { font-size:.82rem;color:#8c8278;text-align:center;margin-bottom:28px; }
.auth-field { margin-bottom:16px; }
.auth-field label { font-size:.78rem;font-weight:600;color:#4a4540;display:block;margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em; }
.auth-field input {
width:100%;padding:11px 14px;border:1.5px solid #e0dbd4;border-radius:10px;
font-size:.95rem;font-family:'Outfit',sans-serif;color:#1a1714;
background:#faf9f7;transition:border-color .2s;outline:none;box-sizing:border-box;
}
.auth-field input:focus { border-color:#2a6049;background:#fff; }
.auth-error { background:#fef2f2;border:1px solid #fecaca;color:#dc2626;border-radius:8px;padding:10px 14px;font-size:.82rem;margin-bottom:14px;display:none; }
.auth-btn {
width:100%;padding:13px;background:#2a6049;color:#fff;border:none;
border-radius:10px;font-size:1rem;font-weight:600;font-family:'Outfit',sans-serif;
cursor:pointer;transition:background .2s;margin-top:4px;
}
.auth-btn:hover { background:#1e5040; }
.auth-btn:disabled { background:#94a3b8;cursor:not-allowed; }
.auth-change-pw { background:#fef3c7;border:1px solid #fde68a;border-radius:10px;padding:14px;margin-bottom:16px;font-size:.83rem;color:#92400e; }
/* ════════ USER MANAGEMENT ════════ */
.user-row {
display:flex;align-items:center;gap:12px;padding:14px 0;
border-bottom:1px solid var(--border);
}
.user-avatar {
width:38px;height:38px;border-radius:50%;background:var(--accent-lt);
display:flex;align-items:center;justify-content:center;
font-size:1.1rem;font-weight:600;color:var(--accent);flex-shrink:0;
}
.user-info { flex:1;min-width:0; }
.user-name { font-size:.9rem;font-weight:600;color:var(--text1); }
.user-email { font-size:.75rem;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.role-badge {
display:inline-block;padding:2px 10px;border-radius:100px;font-size:.7rem;font-weight:700;
text-transform:uppercase;letter-spacing:.06em;
}
.role-admin { background:#fef3c7;color:#b45309; }
.role-editor { background:var(--accent-lt);color:var(--accent); }
.role-viewer { background:var(--bg2);color:var(--muted); }
.user-actions { display:flex;gap:6px;flex-shrink:0; }
.topbar-user {
display:flex;align-items:center;gap:8px;cursor:pointer;
padding:4px 10px;border-radius:100px;transition:background .15s;
}
.topbar-user:hover { background:var(--bg2); }
.topbar-user-avatar {
width:28px;height:28px;border-radius:50%;background:var(--accent);
display:flex;align-items:center;justify-content:center;
font-size:.75rem;font-weight:700;color:#fff;flex-shrink:0;
}
.topbar-user-name { font-size:.78rem;font-weight:600;color:var(--text2); }
/* ══════════════════════════════════════════════════════════════════
TRANSACTIONS PAGE — desktop layout
══════════════════════════════════════════════════════════════════ */
/* Page header: count + totals on left, actions on right */
.tx-page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.tx-page-title-area {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.tx-page-count {
font-size: .78rem;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .06em;
white-space: nowrap;
}
.tx-page-totals {
display: flex;
gap: 5px;
flex-wrap: wrap;
}
/* Filter bar: dense single row */
.tx-filter-bar {
display: flex;
gap: 7px;
align-items: center;
margin-bottom: 12px;
flex-wrap: wrap;
}
.tx-search {
flex: 1;
min-width: 140px;
max-width: 220px;
}
.tx-filter-select {
font-size: .8rem;
padding: 6px 8px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--text);
cursor: pointer;
height: 32px;
}
.tx-view-toggle .view-btn {
padding: 4px 9px;
font-size: .82rem;
}
/* Table card: no extra card-header, table owns its space */
.tx-table-card {
padding: 0;
overflow: hidden;
}
.tx-table-card .table-wrap {
border-radius: var(--r) var(--r) 0 0;
}
/* Table column widths — desktop */
.tx-table { font-size: .84rem; }
.tx-th-date { width: 90px; white-space: nowrap; }
.tx-th-acct { width: 130px; }
.tx-th-desc { min-width: 160px; }
.tx-th-pay { width: 150px; }
.tx-th-cat { width: 140px; }
.tx-th-amt { width: 110px; text-align: right; }
.tx-th-act { width: 90px; text-align: center; }
/* Amount column right-aligned */
.tx-table tbody td:nth-child(6) {
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 600;
}
/* Actions column center */
.tx-table tbody td:nth-child(7) {
text-align: center;
}
/* Tighter row padding on desktop */
@media (min-width: 641px) {
.tx-table tbody td { padding: 9px 12px; }
.tx-table thead th { padding: 8px 12px; }
}
/* Pagination */
.tx-pagination {
display: flex;
justify-content: space-between;
align-items: center;
padding: 9px 14px;
border-top: 1px solid var(--border);
font-size: .78rem;
color: var(--muted);
}
/* ─────────────────────────────────────────────────────────────
MOBILE: Transações e Programados sem scroll horizontal
Altera somente em telas até 640px (não afeta desktop)
────────────────────────────────────────────────────────────── */
@media (max-width: 640px){
/* ========== TRANSAÇÕES (tabela -> card layout) ========== */
#page-transactions #txFlatCard .table-wrap{ overflow: visible; }
#page-transactions #txFlatCard table thead{ display:none; }
#page-transactions #txFlatCard table,
#page-transactions #txFlatCard tbody,
#page-transactions #txFlatCard tr,
#page-transactions #txFlatCard td{
display:block;
width:100%;
}
/* Cada linha vira um card */
#page-transactions #txBody tr{
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--surface);
padding: 12px;
margin: 10px 0;
}
#page-transactions #txBody td{ padding:0; border:0; }
/* old 7-col grid removed — using .tx-v2 layout */
/* Descrição (título) */
/* Valor sempre visível */
/* Data e Conta */
/* Beneficiário e Categoria */
/* Ações embaixo (sem estourar largura) */
#page-transactions #txBody tr td:nth-child(7) > div{
display:flex;
justify-content:flex-end;
gap:8px;
flex-wrap:wrap;
}
/* ========== PROGRAMADOS: Próximos 30 dias (tabela -> cards) ========== */
#page-scheduled #scheduledUpcomingCard .table-wrap{ overflow: visible; }
#page-scheduled #scheduledUpcomingCard table thead{ display:none; }
#page-scheduled #scheduledUpcomingCard table,
#page-scheduled #scheduledUpcomingCard tbody,
#page-scheduled #scheduledUpcomingCard tr,
#page-scheduled #scheduledUpcomingCard td{
display:block;
width:100%;
}
#page-scheduled #scheduledUpcomingBody tr{
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--surface);
padding: 12px;
margin: 10px 0;
display:grid;
grid-template-columns: 1fr auto;
gap: 6px 10px;
align-items:start;
}
#page-scheduled #scheduledUpcomingBody td{ padding:0; border:0; }
/* 1 Data, 2 Descrição, 3 Conta, 4 Valor, 5 Ação */
#page-scheduled #scheduledUpcomingBody tr td:nth-child(2){
grid-column: 1 / 2;
font-weight:650;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
#page-scheduled #scheduledUpcomingBody tr td:nth-child(4){
grid-column: 2 / 3;
justify-self:end;
font-weight:750;
white-space:nowrap;
}
#page-scheduled #scheduledUpcomingBody tr td:nth-child(1){
grid-column: 1 / 2;
color: var(--muted);
font-size:.80rem;
white-space:nowrap;
}
#page-scheduled #scheduledUpcomingBody tr td:nth-child(3){
grid-column: 2 / 3;
justify-self:end;
white-space:nowrap;
}
#page-scheduled #scheduledUpcomingBody tr td:nth-child(5){
grid-column: 1 / -1;
padding-top: 8px;
display:flex;
justify-content:flex-end;
}
/* ========== PROGRAMADOS: cards principais (render em #scheduledList) ========== */
.sc-card-header{ flex-wrap:wrap; align-items:flex-start; }
.sc-card-info{ flex: 1 1 100%; min-width:0; }
.sc-card-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-card-sub{ flex-wrap:wrap; gap:6px; }
.sc-card-amount{ margin-left:auto; white-space:nowrap; }
.sc-card-actions{
width:100%;
display:flex;
justify-content:flex-end;
gap:8px;
margin-top:8px;
flex-wrap:wrap;
}
}
/* =====================================================
FINTRACK MOBILE TRANSACTION UI IMPROVEMENTS
Melhor leitura no telefone
===================================================== */
@media (max-width:640px){
/* estrutura do card */
#page-transactions #txBody tr{
display:grid;
grid-template-columns: 1fr auto;
gap:8px 10px;
align-items:start;
}
/* DATA */
/* CONTA */
/* DESCRIÇÃO */
/* BENEFICIÁRIO (maior) */
/* CATEGORIA abaixo do beneficiário */
/* VALOR bem maior para facilitar leitura */
/* AÇÕES */
#page-transactions #txBody tr td:nth-child(7) > div{
display:flex;
justify-content:flex-end;
gap:8px;
flex-wrap:wrap;
}
}
/* =====================================================
MOBILE: aplicar layout de cards também no modo AGRUPADO
(Transações agrupadas por conta)
===================================================== */
@media (max-width: 640px){
/* Pega QUALQUER tabela dentro da página de transações */
/* Flat list (txFlatCard) — table → card layout */
#page-transactions #txFlatCard .table-wrap{ overflow: visible; }
#page-transactions #txFlatCard table thead{ display:none; }
#page-transactions #txFlatCard table,
#page-transactions #txFlatCard tbody,
#page-transactions #txFlatCard tr,
#page-transactions #txFlatCard td{
display:block;
width:100%;
}
/* Linha padrão vira card */
#page-transactions #txFlatCard tbody tr{
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--surface);
padding: 12px;
margin: 10px 0;
}
#page-transactions #txFlatCard tbody td{ padding:0; border:0; }
/* Group view (txGroupContainer) — keep table layout, just make it scrollable */
#txGroupContainer .table-wrap{ overflow-x: auto; }
#txGroupContainer table{ min-width: 320px; }
/* EXCEÇÃO: linhas de "título do grupo" (nome da conta)
Normalmente são linhas com 1 célula ocupando tudo (colspan)
ou com classe/estilo diferenciado. Este seletor cobre o caso
mais comum: apenas 1 | na linha.
*/
#page-transactions #txFlatCard tbody tr:has(> td:only-child){
border: 0;
background: transparent;
padding: 6px 4px;
margin: 14px 0 6px;
}
#page-transactions #txFlatCard tbody tr:has(> td:only-child) td{
font-weight: 750;
font-size: 1rem;
color: var(--text);
}
/* Grid para linhas "normais" (as que têm colunas) */
#page-transactions #txFlatCard tbody tr:not(:has(> td:only-child)){
display:grid;
grid-template-columns: 1fr auto;
gap: 8px 10px;
align-items:start;
}
/* Mapeamento por ordem de colunas (igual ao modo lista):
1 Data, 2 Conta, 3 Descrição, 4 Beneficiário, 5 Categoria, 6 Valor, 7 Ações
Se no agrupado a coluna "Conta" não existir, não tem problema:
o seletor só não encontra e o resto continua funcionando.
*/
/* Descrição */
/* Beneficiário maior */
/* Categoria abaixo do beneficiário (sempre à esquerda) */
/* Valor bem maior */
/* Data */
/* Conta (quando existir no modo lista) */
/* Ações embaixo */
#page-transactions #txFlatCard tbody tr:not(:has(> td:only-child)) td:nth-child(7) > div{
display:flex;
justify-content:flex-end;
gap:8px;
flex-wrap:wrap;
}
}
/* =====================================================
MOBILE: valores maiores e sempre alinhados à direita
(lista normal + agrupado por conta)
===================================================== */
@media (max-width:640px){
/* valor da transação */
#page-transactions td:nth-child(6){
font-size:1.65rem;
font-weight:900;
text-align:right;
justify-self:end;
white-space:nowrap;
}
/* reforço para qualquer classe usada para valores */
#page-transactions .amount,
#page-transactions .tx-amount,
#page-transactions .value{
font-size:1.65rem;
font-weight:900;
text-align:right;
justify-self:end;
white-space:nowrap;
}
}
/* =====================================================
MOBILE: valores maiores e sempre alinhados à direita
(lista normal + agrupado por conta)
===================================================== */
@media (max-width:640px){
/* valor da transação */
#page-transactions td:nth-child(6){
font-size:1.65rem;
font-weight:900;
text-align:right;
justify-self:end;
white-space:nowrap;
}
/* reforço para qualquer classe usada para valores */
#page-transactions .amount,
#page-transactions .tx-amount,
#page-transactions .value{
font-size:1.65rem;
font-weight:900;
text-align:right;
justify-self:end;
white-space:nowrap;
}
}
/* =====================================================
MOBILE: aplicar layout de cards também no modo AGRUPADO
(Transações agrupadas por conta)
===================================================== */
@media (max-width: 640px){
/* Pega QUALQUER tabela dentro da página de transações */
#page-transactions #txFlatCard .table-wrap{ overflow: visible; }
#page-transactions #txFlatCard table thead{ display:none; }
#page-transactions #txFlatCard table,
#page-transactions #txFlatCard tbody,
#page-transactions #txFlatCard tr,
#page-transactions #txFlatCard td{
display:block;
width:100%;
}
/* Linha padrão vira card — flat list only */
#page-transactions #txFlatCard tbody tr{
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--surface);
padding: 12px;
margin: 10px 0;
}
#page-transactions #txFlatCard tbody td{ padding:0; border:0; }
/* EXCEÇÃO: linhas de cabeçalho de grupo (1 | full-width) */
#page-transactions #txFlatCard tbody tr:has(> td:only-child){
border: 0;
background: transparent;
padding: 6px 4px;
margin: 14px 0 6px;
}
#page-transactions #txFlatCard tbody tr:has(> td:only-child) td{
font-weight: 750;
font-size: 1rem;
color: var(--text);
}
/* Grid para linhas normais — flat list */
#page-transactions #txFlatCard tbody tr:not(:has(> td:only-child)){
display:grid;
grid-template-columns: 1fr auto;
gap: 8px 10px;
align-items:start;
}
/* Mapeamento por ordem de colunas (igual ao modo lista):
1 Data, 2 Conta, 3 Descrição, 4 Beneficiário, 5 Categoria, 6 Valor, 7 Ações
Se no agrupado a coluna "Conta" não existir, não tem problema:
o seletor só não encontra e o resto continua funcionando.
*/
/* Descrição */
/* Beneficiário maior */
/* Categoria abaixo do beneficiário (sempre à esquerda) */
/* Valor bem maior */
/* Data */
/* Conta (quando existir no modo lista) */
/* Ações embaixo */
#page-transactions #txFlatCard tbody tr:not(:has(> td:only-child)) td:nth-child(7) > div{
display:flex;
justify-content:flex-end;
gap:8px;
flex-wrap:wrap;
}
}
/* =====================================================
MOBILE: valores maiores e sempre alinhados à direita
(lista normal + agrupado por conta)
===================================================== */
@media (max-width:640px){
/* valor da transação */
#page-transactions td:nth-child(6){
font-size:1.65rem;
font-weight:900;
text-align:right;
justify-self:end;
white-space:nowrap;
}
/* reforço para qualquer classe usada para valores */
#page-transactions .amount,
#page-transactions .tx-amount,
#page-transactions .value{
font-size:1.65rem;
font-weight:900;
text-align:right;
justify-self:end;
white-space:nowrap;
}
}
/* =====================================================
MOBILE / INPUT / SCROLL IMPROVEMENTS
===================================================== */
/* impedir zoom automático do iOS em inputs */
input,
select,
textarea{
font-size:16px;
}
/* melhorar comportamento de scroll no mobile */
html, body{
overscroll-behavior: none;
}
/* =====================================================
BUDGETS v2
===================================================== */
.budget-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
}
.budget-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 16px 16px 14px 20px;
position: relative;
overflow: hidden;
transition: box-shadow .18s, border-color .18s;
}
.budget-card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,.08);
border-color: var(--border2);
}
.budget-card.budget-over,
.budget-card.budget-card--over {
border-color: var(--red);
background: var(--red-lt);
}
.budget-card.budget-near,
.budget-card.budget-card--near {
border-color: var(--amber);
background: var(--amber-lt, #fef3e2);
}
.budget-card-stripe {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
border-radius: var(--r) 0 0 var(--r);
}
.budget-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
margin-bottom: 12px;
}
.budget-amounts {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
margin-bottom: 10px;
padding: 10px 0 10px;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.budget-lbl {
font-size: .68rem;
color: var(--muted);
margin-bottom: 2px;
text-transform: uppercase;
letter-spacing: .05em;
}
.budget-val {
font-size: .9rem;
font-weight: 700;
font-family: var(--font-serif);
color: var(--text);
white-space: nowrap;
}
/* History table */
#budgetHistContainer table {
width: 100%;
border-collapse: collapse;
font-size: .82rem;
}
#budgetHistContainer th {
padding: 8px 10px;
text-align: left;
font-weight: 600;
color: var(--muted);
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .06em;
border-bottom: 2px solid var(--border);
background: var(--bg2);
}
#budgetHistContainer td {
padding: 7px 10px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
#budgetHistContainer tr:last-child td {
border-bottom: none;
}
#budgetHistContainer tr:hover td {
background: var(--bg2);
}
@media (max-width: 600px) {
.budget-grid {
grid-template-columns: 1fr;
}
.budget-amounts {
grid-template-columns: 1fr 1fr 1fr;
}
}
/* ── Budgets v2 ──────────────────────────────────────────────────────────── */
.budget-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
}
.budget-loading {
grid-column: 1/-1;
text-align: center;
padding: 40px;
color: var(--muted);
font-size: .9rem;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* Card */
.budget-card {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 16px 16px 14px 20px;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: 10px;
overflow: hidden;
transition: box-shadow .15s;
}
.budget-card:hover { box-shadow: var(--shadow); }
.budget-card--over {
border-color: rgba(220,38,38,.3);
background: linear-gradient(135deg, var(--surface) 85%, rgba(220,38,38,.04));
}
.budget-card--near {
border-color: rgba(245,158,11,.3);
background: linear-gradient(135deg, var(--surface) 85%, rgba(245,158,11,.04));
}
/* Colored left stripe */
.budget-card-stripe {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
border-radius: var(--r) 0 0 var(--r);
}
/* Header: icon + name + actions */
.budget-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
}
.budget-cat-info {
display: flex;
align-items: center;
gap: 9px;
flex: 1;
min-width: 0;
}
.budget-cat-icon {
font-size: 1.3rem;
flex-shrink: 0;
line-height: 1;
}
/* Amounts row */
.budget-amounts {
display: flex;
justify-content: space-between;
gap: 8px;
}
.budget-amt-lbl {
font-size: .68rem;
color: var(--muted);
margin-bottom: 2px;
text-transform: uppercase;
letter-spacing: .04em;
}
.budget-amt-val {
font-size: .95rem;
font-weight: 700;
font-family: var(--font-serif);
color: var(--text);
white-space: nowrap;
}
/* Badge pills */
.budget-badge {
display: inline-flex;
align-items: center;
padding: 2px 7px;
border-radius: 20px;
font-size: .68rem;
font-weight: 600;
white-space: nowrap;
}
/* Children subcategory tags */
.budget-child-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
padding-top: 8px;
border-top: 1px solid var(--border);
}
.budget-child-tag {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px 7px;
border-radius: 20px;
font-size: .68rem;
font-weight: 500;
}
/* History table tweaks */
#budgetHistContainer .table-wrap { border-radius: var(--r-sm); overflow: hidden; }
#budgetHistContainer table { width: 100%; border-collapse: collapse; }
#budgetHistContainer th { background: var(--bg2); font-size: .75rem; padding: 8px 10px; text-align: left; color: var(--muted); font-weight: 600; }
#budgetHistContainer td { padding: 7px 10px; border-bottom: 1px solid var(--border); font-size: .82rem; vertical-align: middle; }
#budgetHistContainer tfoot td { background: var(--bg2); }
@media (max-width: 600px) {
.budget-grid { grid-template-columns: 1fr; }
}
.budget-child-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border);
align-items: center;
}
.budget-child-tag {
font-size: .68rem;
font-weight: 600;
padding: 2px 6px;
border-radius: 5px;
display: inline-flex;
align-items: center;
gap: 2px;
}
.budget-badge {
font-size: .68rem;
font-weight: 600;
padding: 2px 6px;
border-radius: 5px;
display: inline-flex;
align-items: center;
gap: 2px;
white-space: nowrap;
}
.budget-cat-info {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
}
.budget-cat-icon {
font-size: 1.3rem;
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg2);
border-radius: 10px;
}
.budget-amt-lbl {
font-size: .67rem;
color: var(--muted);
margin-bottom: 2px;
text-transform: uppercase;
letter-spacing: .05em;
}
.budget-amt-val {
font-size: .9rem;
font-weight: 700;
font-family: var(--font-serif);
color: var(--text);
white-space: nowrap;
}
/* ── Category tx-count badge ─────────────────────────────────────── */
.cat-tx-count {
font-size: .68rem;
font-weight: 600;
padding: 2px 7px;
border-radius: 10px;
background: var(--blue-lt, #e8f0fb);
color: var(--blue, #1e5ba8);
white-space: nowrap;
flex-shrink: 0;
}
/* ══════════════════════════════════════════════════════════════════════════
MOBILE UX v2 — Programados, Categorias, geral
══════════════════════════════════════════════════════════════════════════ */
/* ── Scheduled: summary bar ────────────────────────────────────────────── */
.sc-summary-bar {
display: flex;
gap: 8px;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 2px;
margin-bottom: 14px;
}
.sc-summary-bar::-webkit-scrollbar { display: none; }
.sc-summary-bar .badge {
font-size: .8rem;
padding: 5px 12px;
white-space: nowrap;
flex-shrink: 0;
}
/* ── Scheduled: filter bar ─────────────────────────────────────────────── */
.sc-filter-bar {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.sc-filter-chips {
display: flex;
gap: 6px;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.sc-filter-chips::-webkit-scrollbar { display: none; }
.sc-chip {
padding: 6px 14px;
border-radius: 100px;
border: 1.5px solid var(--border);
background: var(--surface);
color: var(--muted);
font-size: .8rem;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: all .15s;
font-family: var(--font-sans);
-webkit-tap-highlight-color: transparent;
}
.sc-chip:hover { border-color: var(--accent); color: var(--accent); }
.sc-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.sc-type-select {
font-size: .82rem;
padding: 7px 10px;
border: 1.5px solid var(--border);
border-radius: 100px;
background: var(--surface);
color: var(--text);
cursor: pointer;
}
/* ── Scheduled: upcoming items ─────────────────────────────────────────── */
.sc-upcoming-list {
padding: 8px 0;
}
.sc-upcoming-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
border-bottom: 1px solid var(--border);
transition: background .12s;
}
.sc-upcoming-item:last-child { border-bottom: none; }
.sc-upcoming-item:hover { background: var(--surface2); }
.sc-upcoming-overdue { background: var(--red-lt) !important; }
.sc-upcoming-today { background: var(--amber-lt) !important; }
.sc-upcoming-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-upcoming-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sc-upcoming-date { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sc-upcoming-desc { font-size: .88rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-upcoming-acct { font-size: .75rem; color: var(--muted2); }
.sc-upcoming-amt { font-family: var(--font-serif); font-weight: 700; font-size: 1rem; }
.sc-upcoming-btn { font-size: .75rem; padding: 5px 10px; white-space: nowrap; }
/* ── Scheduled: card redesign ──────────────────────────────────────────── */
.sc-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
margin-bottom: 10px;
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: box-shadow .15s, transform .1s;
}
.sc-card:active { transform: scale(.995); }
.sc-card-right {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
}
.sc-card-transfer-tag {
font-size: .68rem;
color: var(--muted);
white-space: nowrap;
max-width: 80px;
overflow: hidden;
text-overflow: ellipsis;
}
/* Card footer — action bar */
.sc-card-footer {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-top: 1px solid var(--border);
background: var(--surface2);
}
.sc-footer-actions {
display: flex;
gap: 4px;
margin-left: auto;
}
.sc-action-btn {
padding: 7px 14px;
border-radius: 20px;
border: none;
font-size: .8rem;
font-weight: 600;
cursor: pointer;
transition: all .15s;
font-family: var(--font-sans);
-webkit-tap-highlight-color: transparent;
}
.sc-action-register {
background: var(--accent);
color: #fff;
}
.sc-action-register:hover { filter: brightness(1.08); }
.sc-action-icon {
width: 36px;
height: 36px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--surface);
font-size: 1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all .15s;
-webkit-tap-highlight-color: transparent;
}
.sc-action-icon:hover { background: var(--bg2); border-color: var(--accent); }
.sc-action-delete:hover { background: var(--red-lt); border-color: var(--red); }
/* Card body info row */
.sc-body-info {
padding: 10px 16px 12px;
display: flex;
gap: 12px;
flex-wrap: wrap;
border-top: 1px solid var(--border);
font-size: .75rem;
color: var(--muted);
}
/* ── Category items: bigger touch targets on mobile ────────────────────── */
.cat-item-row {
min-height: 48px;
}
/* ── DB Backup rows in settings ─────────────────────────────────────────── */
.db-backup-row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
transition: background .1s;
}
.db-backup-row:last-child { border-bottom: none; }
.db-backup-row:hover { background: var(--surface2); }
.db-backup-row-info { flex: 1; min-width: 0; }
.db-backup-row-label {
font-size: .88rem;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.db-backup-row-meta {
font-size: .73rem;
color: var(--muted);
margin-top: 2px;
line-height: 1.5;
}
.db-backup-row-counts {
font-size: .72rem;
color: var(--muted2);
margin-top: 3px;
}
.db-backup-row-actions {
flex-shrink: 0;
display: flex;
gap: 4px;
align-items: center;
}
/* ── Global mobile tweaks ───────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Scheduled: stack filter bar */
.sc-filter-bar {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.sc-filter-chips {
overflow-x: auto;
}
.sc-type-select {
width: 100%;
border-radius: var(--r-sm);
}
/* Scheduled: upcoming items tighter */
.sc-upcoming-item { padding: 10px 14px; }
/* Scheduled card: footer full width register btn */
.sc-card-footer {
flex-wrap: wrap;
gap: 8px;
}
.sc-action-btn {
flex: 1;
text-align: center;
}
.sc-footer-actions { margin-left: auto; }
/* Category rows: larger touch targets */
.cat-item-row { min-height: 52px; padding: 11px 14px; }
.cat-inline-actions {
opacity: 1 !important;
}
/* DB Backup rows: stack on mobile */
.db-backup-row {
flex-direction: column;
gap: 8px;
}
.db-backup-row-actions {
width: 100%;
justify-content: flex-end;
}
/* Settings rows: better spacing */
.settings-row { min-height: 56px; padding: 12px 16px; }
.settings-row-action { flex-shrink: 0; }
/* Modals: full-screen on small phones */
.modal { border-radius: var(--r) var(--r) 0 0; }
/* Tables: hide more columns on narrow screens */
.sc-upcoming-item .sc-upcoming-acct { display: none; }
}
@media (max-width: 480px) {
/* Scheduled summary bar: tiny chips */
.sc-summary-bar .badge { font-size: .72rem; padding: 4px 10px; }
/* Upcoming: further simplify */
.sc-upcoming-right { flex-direction: row; align-items: center; gap: 8px; }
.sc-upcoming-btn { font-size: .72rem; padding: 5px 8px; }
/* Cards: tighter */
.sc-card-header { padding: 12px 14px; gap: 10px; }
.sc-card-type { width: 32px; height: 32px; font-size: .9rem; }
.sc-card-amount { font-size: .95rem; }
}
/* ══════════════════════════════════════════════════════════════════
RECEIPT AI — Botão, painel de resultado, spinner, modal
══════════════════════════════════════════════════════════════════ */
/* Botão "Ler com IA" */
#receiptAiReadBtn {
background: linear-gradient(135deg, #6d28d9, #4f46e5);
color: #fff;
border: none;
border-radius: var(--r-sm, 8px);
padding: 10px 16px;
font-size: .85rem;
font-weight: 600;
cursor: pointer;
font-family: var(--font-serif);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 8px;
transition: opacity .15s, transform .1s;
}
#receiptAiReadBtn:hover { opacity: .9; }
#receiptAiReadBtn:active { transform: scale(.99); }
#receiptAiReadBtn:disabled { opacity: .6; cursor: wait; }
/* Spinner animado */
.ai-spin { display: inline-block; animation: ai-rotate .8s linear infinite; }
@keyframes ai-rotate { to { transform: rotate(360deg); } }
/* Painel de resultado IA */
#receiptAiResultPanel {
background: #f5f3ff;
border: 1px solid #c4b5fd;
border-radius: var(--r-sm, 8px);
overflow: hidden;
font-size: .82rem;
}
.ai-res-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: #ede9fe;
font-weight: 600;
font-size: .8rem;
color: #4c1d95;
}
.ai-res-conf { font-size: .78rem; font-weight: 700; }
.ai-res-body { padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }
.ai-res-row { display: flex; align-items: baseline; gap: 6px; }
.ai-res-lbl { color: var(--muted); font-size: .75rem; min-width: 110px; flex-shrink: 0; }
.ai-res-val { color: var(--fg, #111); font-weight: 500; word-break: break-word; }
.ai-res-hint {
margin: 0;
padding: 6px 12px 8px;
font-size: .73rem;
color: #7c3aed;
border-top: 1px solid #ddd6fe;
}
/* Input da chave API no modal */
#anthropicApiKeyInput {
font-family: monospace;
font-size: .82rem;
letter-spacing: .02em;
}
/* ════════════════════════════════════════════════════════════════════════
AUDIT PAGE — counters, badges, search
════════════════════════════════════════════════════════════════════════ */
.audit-counters {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 18px;
}
.audit-counter {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 16px 18px;
box-shadow: var(--shadow-sm);
border-top: 3px solid var(--border);
transition: box-shadow .15s;
}
.audit-counter:hover { box-shadow: var(--shadow); }
.audit-counter-total { border-top-color: var(--accent); }
.audit-counter-ok { border-top-color: var(--green); }
.audit-counter-pending{ border-top-color: var(--amber); }
.audit-counter-error { border-top-color: var(--red); }
.audit-counter-value { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--text); }
.audit-counter-total .audit-counter-value { color: var(--accent); }
.audit-counter-ok .audit-counter-value { color: var(--green); }
.audit-counter-pending .audit-counter-value { color: var(--amber); }
.audit-counter-error .audit-counter-value { color: var(--red); }
.audit-counter-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; margin-top: 6px; }
.audit-status-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 9px; border-radius: 100px;
font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.audit-ok { background: var(--green-lt); color: var(--green); border: 1px solid rgba(42,122,74,.2); }
.audit-pending { background: var(--amber-lt); color: var(--amber); border: 1px solid rgba(180,83,9,.2); }
.audit-error { background: var(--red-lt); color: var(--red); border: 1px solid rgba(192,57,43,.2); }
@media (max-width: 640px) {
.audit-counters { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
/* ════════════════════════════════════════════════════════════════════════
CATEGORIES PAGE — summary bar, col headers, add button
════════════════════════════════════════════════════════════════════════ */
/* ── Category summary: compact inline chips ────────────────────── */
.cat-summary-bar {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.cat-summary-item {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px 5px 8px;
border-radius: 100px;
border: 1px solid var(--border);
background: var(--surface);
font-size: .78rem;
font-weight: 500;
color: var(--text2);
line-height: 1;
}
.cat-summary-sep { display: none; }
.cat-summary-icon { font-size: .9rem; line-height: 1; }
.cat-summary-label {
font-size: .78rem; font-weight: 500;
color: var(--text2); letter-spacing: 0;
text-transform: none;
}
.cat-summary-count {
font-size: .78rem; font-weight: 700;
margin-left: 2px;
}
.cat-summary-expense {
background: #fff5f5;
border-color: #fecaca;
}
.cat-summary-expense .cat-summary-count { color: var(--red); }
.cat-summary-income {
background: #f0fdf4;
border-color: #bbf7d0;
}
.cat-summary-income .cat-summary-count { color: var(--green); }
/* ── Category column headers ───────────────────────────────────── */
.cat-col-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
}
.cat-col-expense { background: #fff5f5; border-bottom-color: #fecaca; }
.cat-col-income { background: #f0fdf4; border-bottom-color: #bbf7d0; }
.cat-col-icon { font-size: 1rem; }
.cat-col-title { font-weight: 700; font-size: .85rem; color: var(--text); }
.cat-add-root {
text-align: center;
padding: 10px;
font-size: .78rem;
color: var(--muted);
border-top: 1px dashed var(--border);
cursor: pointer;
transition: all .15s;
}
.cat-add-root:hover { color: var(--accent); background: var(--accent-lt); }
/* ════════════════════════════════════════════════════════════════════════
PAYEES — row avatar
════════════════════════════════════════════════════════════════════════ */
.payee-row-avatar {
width: 32px; height: 32px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: .7rem; font-weight: 700;
flex-shrink: 0;
}
/* ════════════════════════════════════════════════════════════════════════
SETTINGS — group labels
════════════════════════════════════════════════════════════════════════ */
.settings-group-label {
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--muted);
margin-bottom: 8px;
padding: 0 4px;
display: flex;
align-items: center;
gap: 6px;
}
.settings-group-label::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
margin-left: 6px;
}
/* ══ User list rows (clickable) ══════════════════════════════════════════ */
.user-list-row { transition: background .12s; }
.user-list-row:hover { background: var(--bg2); }
/* ══ Topbar avatar circle (before logout) ═══════════════════════════════ */
#topbarAvatarCircle {
display: flex;
align-items: center;
cursor: pointer;
border-radius: 50%;
transition: opacity .15s;
}
#topbarAvatarCircle:hover { opacity: .8; }
/* ══ Settings user avatar ════════════════════════════════════════════════ */
#settingsUserAvatarWrap {
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
overflow: hidden;
padding: 0 !important;
}
#settingsUserAvatarWrap img,
#settingsUserAvatarWrap div {
width: 40px !important;
height: 40px !important;
}
/* ══════════════════════════════════════════════════════════════════
USER MENU DROPDOWN & PROFILE AVATAR
══════════════════════════════════════════════════════════════════ */
.topbar-user:hover { opacity: 1; border-color: rgba(255,255,255,0.34); background: rgba(255,255,255,0.18); transform: translateY(-1px); }
/* Dropdown menu item */
.user-menu-item {
display: flex; align-items: center; gap: 10px;
width: 100%; padding: 9px 12px;
background: none; border: none; cursor: pointer;
font-size: .85rem; font-weight: 500; color: var(--text);
border-radius: 8px; text-align: left; transition: background .12s;
}
.user-menu-item:hover { background: var(--bg2); }
.user-menu-item span:first-child { font-size: 1rem; flex-shrink: 0; }
/* Settings avatar wrap */
#settingsUserAvatarWrap img,
#settingsUserAvatarWrap > div {
width: 100%; height: 100%;
border-radius: 50%; object-fit: cover;
}
/* ══════════════════════════════════════════════════════════════════
DELETE ACCOUNT MODAL — option cards
══════════════════════════════════════════════════════════════════ */
.del-acc-option {
display: block;
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 10px;
cursor: pointer;
transition: border-color .15s, background .15s;
background: var(--surface);
}
.del-acc-option:hover { border-color: var(--accent); background: var(--accent-lt); }
.del-acc-option:has(input:checked) {
border-color: var(--accent);
background: var(--accent-lt);
box-shadow: 0 0 0 2px rgba(42,96,73,.12);
}
.del-acc-option-danger:has(input:checked) {
border-color: var(--red);
background: #fef2f2;
box-shadow: 0 0 0 2px rgba(192,57,43,.10);
}
.del-acc-option input[type="radio"] { display: none; }
.del-acc-option-body {
display: flex; align-items: center; gap: 12px; pointer-events: none;
}
.del-acc-option-icon {
width: 36px; height: 36px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 1.05rem; flex-shrink: 0;
}
.del-acc-option-title { font-size: .86rem; font-weight: 700; color: var(--text); }
.del-acc-option-sub { font-size: .75rem; color: var(--muted); margin-top: 1px; }
.btn-danger {
background: var(--red); color: #fff; border: none;
opacity: 1; transition: opacity .15s;
}
.btn-danger:disabled { opacity: .4; cursor: not-allowed; }
.btn-danger:not(:disabled):hover { opacity: .88; }
/* ══════════════════════════════════════════════════════════════════
MULTI-FAMILY — family members panel
══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
FAMILY MANAGEMENT — Tab-based mobile-first redesign
══════════════════════════════════════════════════════════════════════════════ */
/* Tab strip — horizontal scroll on mobile */
.fam-tabs {
display: flex;
overflow-x: auto;
gap: 6px;
padding: 14px 16px 0;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
border-bottom: 2px solid var(--border);
}
.fam-tabs::-webkit-scrollbar { display: none; }
.fam-tab {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 8px 14px 10px;
border: none;
background: transparent;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
border-radius: 8px 8px 0 0;
transition: all .18s;
color: var(--muted);
}
.fam-tab:hover { background: var(--surface2); color: var(--text); }
.fam-tab.active {
color: var(--accent);
border-bottom-color: var(--accent);
background: var(--accent-lt);
font-weight: 600;
}
.fam-tab-icon { font-size: 1.1rem; }
.fam-tab-name { font-size: .8rem; font-weight: 600; max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
.fam-tab-count {
font-size: .65rem;
background: var(--border);
color: var(--muted);
border-radius: 10px;
padding: 1px 6px;
font-weight: 700;
}
.fam-tab.active .fam-tab-count {
background: var(--accent);
color: #fff;
}
/* Panels */
.fam-panels { position: relative; }
.fam-panel { display: none; }
.fam-panel.active { display: block; }
/* Panel header */
.fam-panel-header {
padding: 14px 16px 8px;
border-bottom: 1px solid var(--border);
}
.fam-panel-title {
display: flex;
align-items: center;
gap: 10px;
}
.fam-panel-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--accent-lt);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.fam-panel-name { font-weight: 700; font-size: .95rem; color: var(--text); }
.fam-panel-meta { font-size: .73rem; color: var(--muted); margin-top: 2px; }
/* Sections within panel */
.fam-section {
padding: 12px 16px;
border-bottom: 1px solid var(--border);
}
.fam-section:last-child { border-bottom: none; }
.fam-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.fam-section-title {
font-size: .78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.fam-section-header .fam-section-title { margin-bottom: 0; }
.fam-badge-muted {
font-size: .68rem;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--muted);
}
/* Member row */
.fam-member-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 0;
border-bottom: 1px solid var(--border);
}
.fam-member-row:last-child { border-bottom: none; }
.fam-member-info {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
}
.fam-member-text { min-width: 0; }
.fam-member-name {
font-size: .84rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fam-member-email {
font-size: .72rem;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fam-member-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.fam-role-select {
font-size: .78rem;
padding: 4px 6px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
max-width: 130px;
}
.fam-remove-btn {
background: none;
border: 1px solid var(--border);
border-radius: 6px;
padding: 4px 8px;
cursor: pointer;
color: var(--muted);
font-size: .8rem;
transition: all .15s;
flex-shrink: 0;
}
.fam-remove-btn:hover { background: var(--red); color: #fff; border-color: var(--red); }
.fam-empty {
font-size: .8rem;
color: var(--muted);
text-align: center;
padding: 16px 0;
font-style: italic;
}
.fam-loading { font-size: .78rem; color: var(--muted); text-align: center; padding: 10px 0; }
/* Add / Invite forms — stacked on mobile */
.fam-add-form, .fam-invite-form {
display: flex;
flex-direction: column;
gap: 8px;
}
.fam-input, .fam-select {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--r-sm, 8px);
background: var(--surface);
color: var(--text);
font-size: .85rem;
}
.fam-select-role { flex-shrink: 0; }
.fam-btn-full { width: 100%; justify-content: center; padding: 10px; font-size: .85rem; }
.fam-btn-sm { font-size: .75rem; padding: 4px 10px; white-space: nowrap; }
/* Modules */
.fam-modules { display: flex; gap: 8px; flex-wrap: wrap; }
.fam-mod-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border: 1.5px solid var(--border);
border-radius: 20px;
background: var(--surface);
font-size: .82rem;
font-weight: 600;
color: var(--text2);
cursor: pointer;
transition: all .18s;
flex: 1;
justify-content: center;
}
.fam-mod-chip.active {
background: var(--accent-lt);
border-color: var(--accent);
color: var(--accent);
}
/* Action grid */
.fam-action-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.fam-action-btn {
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--r-sm, 8px);
background: var(--surface2);
color: var(--text);
font-size: .8rem;
font-weight: 600;
cursor: pointer;
transition: all .15s;
text-align: center;
}
.fam-action-btn:hover { background: var(--surface); }
.fam-action-warn { color: var(--amber, #b45309); border-color: var(--amber, #b45309); }
.fam-action-danger { color: var(--red); border-color: var(--red); }
.fam-action-danger:hover { background: var(--red); color: #fff; }
/* FMC member list */
.fam-fmc-list { display: flex; flex-direction: column; gap: 6px; }
/* Danger zone */
.fam-danger-zone { background: var(--surface2); }
/* Wider screens: use row layout for add/invite forms */
@media (min-width: 480px) {
.fam-add-form {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
}
.fam-invite-form {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
}
.fam-btn-full { width: auto; }
}
/* ─── Legacy fm-* classes (kept for compatibility) ─────────────────────── */
.fm-row {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 0;
border-bottom: 1px solid var(--border);
}
.fm-row:last-child { border-bottom: none; }
.fm-add-row {
display: flex;
gap: 8px;
align-items: center;
margin-top: 12px;
padding-top: 10px;
border-top: 1px dashed var(--border);
}
/* ══════════════════════════════════════════════════════════════════
FAMILY SWITCHER PICKER
══════════════════════════════════════════════════════════════════ */
.fam-switcher-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 10px 5px 8px;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 10px;
cursor: pointer;
transition: border-color .15s, background .15s, box-shadow .15s;
max-width: 200px;
min-width: 0;
color: var(--text);
}
.fam-switcher-btn:hover,
.fam-switcher-btn.open {
border-color: var(--accent);
background: var(--accent-lt);
box-shadow: 0 0 0 3px rgba(42,96,73,.10);
}
.fam-switcher-icon {
font-size: .95rem;
flex-shrink: 0;
line-height: 1;
}
.fam-switcher-name {
font-size: .8rem;
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 110px;
}
.fam-switcher-role {
font-size: .66rem;
font-weight: 700;
padding: 1px 5px;
border-radius: 4px;
flex-shrink: 0;
line-height: 1.5;
}
.fam-switcher-chevron {
flex-shrink: 0;
color: var(--muted);
transition: transform .2s;
}
.fam-switcher-btn.open .fam-switcher-chevron { transform: rotate(180deg); }
/* Dropdown */
.fam-picker-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 260px;
max-width: 320px;
background: var(--surface);
border: 1.5px solid var(--border2,var(--border));
border-radius: 14px;
box-shadow: 0 16px 48px rgba(0,0,0,.20), 0 2px 8px rgba(0,0,0,.10);
z-index: 9998;
overflow: hidden;
animation: famPickerIn .15s ease;
}
@keyframes famPickerIn {
from { opacity:0; transform:translateY(-6px) scale(.97); }
to { opacity:1; transform:translateY(0) scale(1); }
}
.fam-picker-header {
font-size: .7rem;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .06em;
padding: 12px 14px 8px;
border-bottom: 1px solid var(--border);
}
.fam-picker-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
cursor: pointer;
border: none;
background: none;
width: 100%;
text-align: left;
transition: background .12s;
border-bottom: 1px solid var(--border);
}
.fam-picker-item:last-child { border-bottom: none; }
.fam-picker-item:hover { background: var(--bg2); }
.fam-picker-item.active {
background: var(--accent-lt);
}
.fam-picker-item.active .fam-picker-item-name {
color: var(--accent);
}
.fam-picker-item-icon {
width: 36px; height: 36px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 1.05rem;
flex-shrink: 0;
background: var(--bg2);
border: 1.5px solid var(--border);
transition: background .12s;
}
.fam-picker-item.active .fam-picker-item-icon {
background: var(--accent);
border-color: var(--accent);
}
.fam-picker-item-body { flex: 1; min-width: 0; }
.fam-picker-item-name {
font-size: .84rem;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fam-picker-item-meta {
font-size: .72rem;
color: var(--muted);
margin-top: 1px;
}
.fam-picker-item-check {
flex-shrink: 0;
color: var(--accent);
font-size: 1rem;
opacity: 0;
}
.fam-picker-item.active .fam-picker-item-check { opacity: 1; }
/* Role badge colors */
.role-badge-owner { background:#fef3c7; color:#92400e; }
.role-badge-admin { background:#fef3c7; color:#b45309; }
.role-badge-user { background:var(--accent-lt); color:var(--accent); }
.role-badge-viewer { background:var(--bg2); color:var(--muted); }
/* Responsive: collapse name on small screens */
@media(max-width:600px){
.fam-switcher-name { max-width:70px; }
.fam-picker-dropdown { min-width:220px; left:auto; right:0; }
}
/* ══════════════════════════════════════════════════════════════════
USER MENU — family switcher items
══════════════════════════════════════════════════════════════════ */
.um-family-item {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 7px 10px;
border: none;
background: none;
border-radius: 8px;
cursor: pointer;
text-align: left;
transition: background .12s;
margin-bottom: 2px;
}
.um-family-item:hover { background: var(--bg2); }
.um-family-item--active { background: var(--accent-lt); }
.um-family-item--active:hover { background: var(--accent-lt); }
.um-family-icon {
width: 26px; height: 26px;
border-radius: 7px;
background: var(--bg2);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
border: 1px solid var(--border);
}
.um-family-item--active .um-family-icon {
background: var(--accent);
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(42,96,73,.18);
}
.um-family-body { flex: 1; min-width: 0; }
.um-family-name {
font-size: .82rem;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.um-family-item--active .um-family-name { color: var(--accent); }
.um-family-role {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: .66rem;
font-weight: 700;
padding: 1px 6px;
border-radius: 4px;
margin-top: 2px;
line-height: 1.5;
}
/* ══════════════════════════════════════════════════════════════════
IMPORT AI — badge de resultado de análise inteligente
══════════════════════════════════════════════════════════════════ */
.import-ai-badge {
border-radius: 10px;
padding: 10px 14px;
font-size: .82rem;
border: 1.5px solid var(--border);
}
.import-ai-badge--ok {
background: linear-gradient(135deg, var(--accent-lt), #f0faf5);
border-color: var(--accent);
}
.import-ai-badge--warn {
background: linear-gradient(135deg, #fff8e1, #fffde7);
border-color: var(--amber, #f59e0b);
}
.import-ai-badge--loading {
background: var(--bg2);
border-color: var(--border);
color: var(--muted);
display: flex;
align-items: center;
gap: 8px;
}
.import-ai-badge-row {
display: flex;
align-items: flex-start;
gap: 10px;
}
.import-ai-badge-body { flex: 1; min-width: 0; }
.import-ai-badge-title {
font-weight: 700;
font-size: .85rem;
color: var(--text);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.import-ai-conf {
font-size: .72rem;
font-weight: 700;
padding: 1px 6px;
border-radius: 4px;
background: rgba(0,0,0,.06);
}
.import-ai-badge-sub {
font-size: .75rem;
color: var(--muted);
margin-top: 2px;
}
.import-ai-badge-status {
font-size: .76rem;
font-weight: 600;
color: var(--accent);
margin-top: 4px;
}
.import-ai-warns {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 4px;
}
.import-ai-warns span {
font-size: .7rem;
color: #b45309;
background: #fef3c7;
padding: 1px 6px;
border-radius: 4px;
}
.import-ai-dismiss {
background: none;
border: none;
cursor: pointer;
color: var(--muted);
font-size: .8rem;
padding: 0 2px;
line-height: 1;
flex-shrink: 0;
opacity: .6;
}
.import-ai-dismiss:hover { opacity: 1; }
/* Source chips — scroll quando muitos */
.source-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 14px;
}
/* ══════════════════════════════════════════════════════════════════
NORMALIZAR NOMES — modal de preview Title Case
══════════════════════════════════════════════════════════════════ */
.norm-counter {
display: flex;
align-items: center;
gap: 8px;
background: var(--accent-lt);
border: 1px solid var(--accent);
border-radius: 8px;
padding: 9px 14px;
font-size: .83rem;
margin-bottom: 14px;
}
.norm-table-head {
display: grid;
grid-template-columns: 1fr 28px 1fr;
gap: 4px;
padding: 0 12px 5px;
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--muted);
}
.norm-list {
border: 1px solid var(--border);
border-radius: 8px;
max-height: 320px;
overflow-y: auto;
margin-bottom: 4px;
}
.norm-empty {
padding: 28px 16px;
text-align: center;
font-size: .84rem;
color: var(--muted);
}
.norm-row {
display: grid;
grid-template-columns: 1fr 28px 1fr;
align-items: center;
gap: 4px;
padding: 7px 12px;
border-bottom: 1px solid var(--border);
font-size: .81rem;
}
.norm-row:last-child { border-bottom: none; }
.norm-row:nth-child(even) { background: var(--bg2); }
.norm-row-old {
color: var(--red, #dc2626);
text-decoration: line-through;
opacity: .65;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.norm-row-arrow {
color: var(--muted);
text-align: center;
font-size: .85rem;
flex-shrink: 0;
}
.norm-row-new {
color: var(--green, #16a34a);
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ══════════════════════════════════════════════════════════════════
FAMILY MANAGEMENT — invite row + wipe button
══════════════════════════════════════════════════════════════════ */
.fm-invite-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
padding: 10px 0 4px;
border-top: 1px dashed var(--border);
margin-top: 8px;
}
.fm-invite-row input[type="email"] {
min-width: 0;
}
/* ── myFamilyMgmtModal member list scrollbar ── */
#mfmMembersList::-webkit-scrollbar { width: 4px; }
#mfmMembersList::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
/* ══ myProfileModal — mobile optimisation ════════════════════════════════════
Em mobile o modal é um bottom-sheet. Garantir que o conteúdo caiba
sem rolar excessivamente em telas com menos de 480px de altura.
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
#myProfileModal .modal {
max-height: 88vh;
max-height: 88dvh;
}
#myProfileModal .modal-body {
padding: 12px 14px 18px;
}
/* Side-by-side password grid → single column on very small screens */
@media (max-width: 360px) {
#myProfileModal .modal-body > div > div[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}
}
}
/* Landscape mobile: limit height more aggressively */
@media (max-height: 500px) and (max-width: 768px) {
#myProfileModal .modal {
max-height: 95vh;
max-height: 95dvh;
}
#myProfileModal .modal-body {
padding: 8px 14px 14px;
}
}
/* ═══════════════════════════════════════════
PRICES MODULE
═══════════════════════════════════════════ */
.price-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 12px 14px;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
transition: background .12s;
}
.price-card:hover { background: var(--bg2); }
.price-card-main { flex: 1; min-width: 0; }
.price-card-name { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price-card-cat { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.price-card-stats { display: flex; gap: 14px; flex-shrink: 0; }
.price-stat { text-align: right; }
.price-stat-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.price-stat-value { font-size: .88rem; font-weight: 700; color: var(--accent); }
.price-card-arrow { font-size: .8rem; color: var(--muted); flex-shrink: 0; }
.prices-empty { text-align: center; padding: 48px 24px; color: var(--muted); font-size: .88rem; }
/* ── Prices page: card classes used by JS render ────────────────────────── */
.price-list { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.price-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border2); cursor: pointer; transition: background .12s; }
.price-card:last-child { border-bottom: none; }
.price-card:hover { background: var(--bg2); }
.price-card-body { flex: 1; min-width: 0; }
.price-card-name { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price-card-tag { display: inline-block; font-size: .7rem; font-weight: 600; color: var(--accent); background: var(--accent-lt); border-radius: 4px; padding: 1px 6px; margin-top: 3px; }
.price-card-desc { font-size: .75rem; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price-card-stats { display: flex; gap: 14px; flex-shrink: 0; }
.price-card-chevron { font-size: 1.1rem; color: var(--muted); flex-shrink: 0; }
.price-stat-col { text-align: right; }
.price-stat-lbl { display: block; font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.price-stat-val { display: block; font-size: .88rem; font-weight: 700; color: var(--text); }
.price-stat-val.accent { color: var(--accent); }
/* ── Register prices modal: rpm-item rows ────────────────────────────────── */
.rpm-item { padding: 12px 14px; border-bottom: 1px solid var(--border2); }
.rpm-item:last-child { border-bottom: none; }
.rpm-item-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rpm-item-num { font-size: .75rem; color: var(--muted); min-width: 18px; text-align: center; flex-shrink: 0; }
.rpm-item-desc { font-size: .85rem; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); width: 100%; }
.rpm-item-desc:focus { outline: none; border-color: var(--accent); }
.rpm-ai-btn { padding: 5px 8px; font-size: .8rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface2); cursor: pointer; flex-shrink: 0; line-height: 1; }
.rpm-ai-btn:hover { background: var(--accent-lt); border-color: var(--accent); }
.rpm-del-btn { padding: 5px 7px; font-size: .78rem; border: none; background: transparent; cursor: pointer; color: var(--muted); flex-shrink: 0; border-radius: var(--r-sm); }
.rpm-del-btn:hover { color: var(--red); background: #fef2f2; }
.rpm-item-fields { display: grid; grid-template-columns: 80px 1fr 1fr; gap: 8px; }
/* ── History rows in detail modal ────────────────────────────────────────── */
.pid-row-date { font-size: .75rem; color: var(--muted); }
.pid-row-store { min-width: 0; }
.pid-row-store-name { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pid-row-store-addr { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pid-row-qty { font-size: .8rem; color: var(--muted); text-align: center; }
.pid-row-price { font-size: .88rem; font-weight: 700; color: var(--accent); text-align: right; }
.pid-row-del { background: transparent; border: none; cursor: pointer; font-size: .82rem; padding: 2px 4px; color: var(--muted); border-radius: 4px; }
.pid-row-del:hover { color: var(--red); background: #fef2f2; }
@media (max-width: 480px) {
.price-card-stats { gap: 8px; }
.price-stat-val { font-size: .8rem; }
.rpm-item-fields { grid-template-columns: 72px 1fr; }
.rpm-item-fields > *:nth-child(3) { grid-column: 1 / -1; }
}
/* Prices detail modal */
.pid-stat-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; text-align: center; }
.pid-stat-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; }
.pid-stat-val { font-size: 1.05rem; font-weight: 700; color: var(--accent); }
.pid-row { display: grid; grid-template-columns: 72px 1fr 52px 80px 28px; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border2); font-size: .8rem; }
.pid-row:last-child { border-bottom: none; }
/* Register prices modal rows */
.rpm-row { padding: 10px 12px; border-bottom: 1px solid var(--border2); }
.rpm-row:last-child { border-bottom: none; }
.rpm-row-header { display: grid; grid-template-columns: 24px 1fr 80px 80px 80px 100px 28px; gap: 6px; align-items: center; }
.rpm-row-num { font-size: .72rem; color: var(--muted); text-align: center; }
@media (max-width: 480px) {
.price-card-stats { gap: 8px; }
.price-stat-value { font-size: .8rem; }
.pid-row { grid-template-columns: 60px 1fr 44px 68px 24px; }
.rpm-row-header { grid-template-columns: 1fr 70px 70px; gap: 4px; }
.rpm-row-header > *:nth-child(1),
.rpm-row-header > *:nth-child(6),
.rpm-row-header > *:nth-child(7) { display: none; }
}
/* ═══════════════════════════════════════════
PAYEE CATEGORY PICKER
═══════════════════════════════════════════ */
#payeeCatPickerDropdown > div:hover { background: var(--bg2) !important; }
/* ═══════════════════════════════════════════
CURRENCY BADGE & CONVERSION PANEL
═══════════════════════════════════════════ */
#txCurrencyBadge, #scCurrencyBadge {
transition: background .15s, color .15s;
min-width: 44px;
text-align: center;
}
#txCurrencyPanel, #scCurrencyPanel {
transition: background .15s;
}
/* ── Foreign currency amount display in transaction list ─────────────────── */
.tx-col-amt .fx-hint {
display: block;
font-size: .68rem;
color: var(--muted);
font-weight: 400;
line-height: 1.2;
}
/* ── Prices module: store-row in manager modal ──────────────────────────── */
.store-row {
display: flex; align-items: flex-start; gap: 12px;
padding: 10px 14px; border-bottom: 1px solid var(--border2);
transition: background .1s;
}
.store-row:last-child { border-bottom: none; }
.store-row:hover { background: var(--bg2); }
/* ── price-stat updated for 4-col strip ─────────────────────────────────── */
.price-stat-col { display: flex; flex-direction: column; align-items: center; min-width: 52px; }
.price-stat-lbl { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.price-stat-val { font-size: .88rem; font-weight: 700; color: var(--text); }
.price-stat-val.accent { color: var(--accent); }
/* ── Store suggest dropdown z-fix ──────────────────────────────────────── */
#pifStoreSuggest, #rpmStoreSuggest, #aprStoreSuggest {
position: absolute; left: 0; right: 0; top: calc(100% + 2px);
min-width: 240px; z-index: 300;
}
/* ══════════════════════════════════════════════════════════════════════════
PAGE HEADER — faixa verde escura padrão abaixo do fx-bar
══════════════════════════════════════════════════════════════════════════ */
.page-header-bar {
background: #166534;
padding: 0 16px;
min-height: 46px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-shrink: 0;
margin: -24px -24px 0 -24px;
width: calc(100% + 48px);
border-bottom: 1px solid rgba(255,255,255,.08);
}
.page-header-bar-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.page-header-bar-icon {
width: 28px;
height: 28px;
background: rgba(255,255,255,.10);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: rgba(255,255,255,.8);
}
.page-header-bar-icon svg { display: block; }
.page-header-bar-title {
font-size: 1.05rem;
font-weight: 600;
color: #ffffff;
letter-spacing: -.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.page-header-bar-right {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
/* Slot para botões de ação (ex: Atualizar, + Novo) injetados por cada página */
.page-header-action {
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.18);
color: rgba(255,255,255,.85);
border-radius: 8px;
padding: 4px 10px;
font-size: .72rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
display: flex;
align-items: center;
gap: 4px;
font-family: var(--font-sans);
transition: background .15s, border-color .15s;
}
.page-header-action:hover {
background: rgba(255,255,255,.18);
border-color: rgba(255,255,255,.35);
}
@media (max-width: 768px) {
.page-header-bar {
margin: -16px -16px 0 -16px;
width: calc(100% + 32px);
}
.fx-bar {
width: calc(100% + 32px);
margin: 0 -16px 14px -16px;
}
}
@media (max-width: 480px) {
.page-header-bar { height: 42px; padding: 0 12px; }
.page-header-bar-title { font-size: .97rem; }
.page-header-bar-icon { width: 24px; height: 24px; border-radius: 6px; }
}
/* ══════════════════════════════════════════════════════════════════════════
FX RATES BAR — barra de cotações abaixo da topbar
══════════════════════════════════════════════════════════════════════════ */
/* ── FX bar palette (dark-green, dark-mode-safe) ─── */
:root {
/* FX bar — paleta extraída do logo Family FinTrack */
--fx-bg: #eef7f2; /* verde menta muito claro */
--fx-bg2: rgba(255,255,255,.75); /* chips: branco semi-transparente */
--fx-border: #b0d9c0; /* borda verde sage */
--fx-text: #3a7a52; /* verde médio para labels */
--fx-cur: #03511d; /* verde escuro do texto "Family" */
--fx-val: #037762; /* teal do texto "Fintrack" */
--fx-sep: #8abfa0; /* separador verde suave */
--fx-chip-h: rgba(3,119,98,.08); /* chip hover tint */
--fx-stale-bg: rgba(212,147,58,.10);
--fx-stale-brd: #d4933a;
--fx-stale-txt: #b5621a;
}
/* ── Container ────────────────────────────────────── */
.fx-bar {
position: relative;
top: auto;
z-index: 5;
background: linear-gradient(90deg, #eaf5ee 0%, #f3fbf6 50%, #eaf5ee 100%);
border-bottom: 1px solid var(--fx-border);
width: calc(100% + 48px);
margin: 0 -24px 16px -24px;
}
/* ── Inner row — centred, max-width, no visible scroll ── */
.fx-bar-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 20px;
height: 28px;
max-width: 900px;
margin: 0 auto;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
white-space: nowrap;
}
.fx-bar-inner::-webkit-scrollbar { display: none; }
/* ── "CÂMBIO" label ─────────────────────────────── */
.fx-bar-label {
font-size: .6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--fx-text);
flex-shrink: 0;
opacity: .7;
}
/* ── Rate chips row ─────────────────────────────── */
.fx-bar-rates {
display: flex;
align-items: center;
gap: 5px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.fx-bar-rates::-webkit-scrollbar { display: none; }
/* Thin divider between label and chips */
.fx-bar-label::after {
content: '';
display: inline-block;
width: 1px;
height: 10px;
background: var(--fx-border);
margin-left: 10px;
vertical-align: middle;
}
/* ── Individual chip ────────────────────────────── */
.fx-chip {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 1px 7px;
border-radius: 20px;
background: var(--fx-bg2);
border: 1px solid var(--fx-border);
flex-shrink: 0;
cursor: default;
transition: background .15s, border-color .15s;
}
.fx-chip:hover {
background: var(--fx-chip-h);
border-color: #037762;
}
.fx-chip-stale {
background: var(--fx-stale-bg);
border-color: var(--fx-stale-brd);
}
.fx-chip-cur {
font-size: .65rem;
font-weight: 700;
color: var(--fx-cur);
letter-spacing: .02em;
}
.fx-chip-sep {
font-size: .6rem;
color: var(--fx-sep);
margin: 0 1px;
}
.fx-chip-val {
font-size: .68rem;
font-weight: 600;
color: var(--fx-val);
font-variant-numeric: tabular-nums;
letter-spacing: -.01em;
}
.fx-chip-stale .fx-chip-val { color: var(--fx-stale-txt); }
/* ── Refresh button ─────────────────────────────── */
.fx-bar-refresh {
background: none;
border: none;
cursor: pointer;
font-size: .72rem;
padding: 1px 3px;
border-radius: 3px;
flex-shrink: 0;
opacity: .45;
transition: opacity .15s;
line-height: 1;
color: inherit;
}
.fx-bar-refresh:hover { opacity: .9; }
.fx-bar-refresh.fx-bar-stale { opacity: 1; animation: fx-pulse 2.5s ease-in-out infinite; }
/* ── Age text ───────────────────────────────────── */
.fx-bar-age {
font-size: .6rem;
color: var(--fx-text);
flex-shrink: 0;
white-space: nowrap;
opacity: .6;
}
@keyframes fx-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .3; }
}
/* ── Mobile tweaks ──────────────────────────────── */
@media (max-width: 768px) {
.fx-bar-inner { padding: 0 14px; height: 26px; gap: 6px; }
.fx-chip { padding: 1px 5px; }
.fx-chip-cur { font-size: .62rem; }
.fx-chip-val { font-size: .64rem; }
.fx-bar-label { display: none; } /* save space; chips speak for themselves */
.fx-bar-age { display: none; }
}
/* ── Prices module: store autocomplete & list ──────────────────────────────── */
.store-suggest-item {
padding: 8px 12px;
cursor: pointer;
border-bottom: 1px solid var(--border2);
transition: background .12s;
font-size: .85rem;
}
.store-suggest-item:hover { background: var(--accent-lt); }
.store-suggest-item:last-child { border-bottom: none; }
.store-list-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-bottom: 1px solid var(--border2);
cursor: pointer;
transition: background .12s;
}
.store-list-row:hover { background: var(--surface2); }
.store-list-row:last-child { border-bottom: none; }
/* ══════════════════════════════════════════════════════════════════════════
REGISTER PRICES MODAL — tabela de itens do recibo
══════════════════════════════════════════════════════════════════════════ */
.rpm-table {
width: 100%;
border-collapse: collapse;
font-size: .8rem;
table-layout: fixed;
}
.rpm-table thead tr {
background: var(--surface2);
border-bottom: 2px solid var(--border);
}
.rpm-table thead th {
padding: 6px 8px;
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--muted);
white-space: nowrap;
}
.rpm-row {
border-bottom: 1px solid var(--border2);
transition: background .12s;
}
.rpm-row:last-child { border-bottom: none; }
.rpm-row:hover { background: var(--surface2); }
.rpm-td-num { padding: 4px 6px; color: var(--muted); font-size: .72rem; text-align: center; width: 28px; }
.rpm-td-desc { padding: 4px 6px; }
.rpm-td-qty { padding: 4px 4px; width: 66px; }
.rpm-td-price { padding: 4px 4px; width: 96px; }
.rpm-td-cat { padding: 4px 4px; width: 120px; }
.rpm-td-link { padding: 4px 4px; width: 148px; }
.rpm-td-act { padding: 4px 4px; width: 52px; text-align: center; white-space: nowrap; }
.rpm-inline-input {
width: 100%;
padding: 4px 6px;
border: 1px solid transparent;
border-radius: var(--r-sm);
background: transparent;
font-size: .8rem;
font-family: var(--font-sans);
color: var(--text);
transition: border-color .15s, background .15s;
}
.rpm-inline-input:focus {
outline: none;
border-color: var(--accent);
background: var(--surface);
}
.rpm-inline-input:hover { border-color: var(--border); }
.rpm-input-center { text-align: center; }
.rpm-input-right { text-align: right; }
.rpm-inline-select {
width: 100%;
padding: 3px 4px;
border: 1px solid transparent;
border-radius: var(--r-sm);
background: transparent;
font-size: .75rem;
font-family: var(--font-sans);
color: var(--text);
cursor: pointer;
transition: border-color .15s, background .15s;
}
.rpm-inline-select:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.rpm-inline-select:hover { border-color: var(--border); }
.rpm-ai-name {
font-size: .65rem;
color: var(--muted);
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rpm-ai-btn {
background: none; border: none; cursor: pointer;
font-size: .75rem; padding: 2px 3px;
border-radius: 3px; opacity: .6; line-height: 1;
transition: opacity .15s;
}
.rpm-ai-btn:hover { opacity: 1; background: var(--accent-lt); }
.rpm-del-btn {
background: none; border: none; cursor: pointer;
font-size: .72rem; padding: 2px 3px;
border-radius: 3px; color: var(--red); opacity: .5; line-height: 1;
transition: opacity .15s;
}
.rpm-del-btn:hover { opacity: 1; background: var(--red-lt); }
/* Mobile: hide category and link columns, collapse layout */
@media (max-width: 640px) {
.rpm-table { font-size: .78rem; }
.rpm-td-cat, .rpm-table thead th:nth-child(5),
.rpm-td-link,.rpm-table thead th:nth-child(6) { display: none; }
.rpm-td-price { width: 78px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
v24 — Feature additions
═══════════════════════════════════════════════════════════════════════════ */
/* ── Feature 1: upcoming card collapsible ────────────────────────────────── */
.sc-upcoming-header {
cursor: pointer;
user-select: none;
border-bottom: none;
transition: background .12s;
}
.sc-upcoming-header:hover { background: var(--surface2); }
/* Compact upcoming items */
.sc-upcoming-item {
padding: 7px 16px;
gap: 8px;
}
.sc-upcoming-amt { font-size: .88rem !important; }
.sc-upcoming-desc { font-size: .82rem !important; }
.sc-upcoming-acct { font-size: .68rem !important; }
/* ── Feature 3: Family admin redesign ───────────────────────────────────── */
.fam-card { border-radius: var(--r-md); overflow: hidden; }
.fam-features-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 8px;
padding: 4px 0;
}
.fam-feature-item {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 10px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
font-size: .8rem;
}
.fam-feature-icon { font-size: .95rem; flex-shrink: 0; }
.fam-feature-label { flex: 1; font-weight: 500; color: var(--text2); }
.fam-feature-tip {
font-size: .68rem;
color: var(--muted);
cursor: help;
border: 1px solid var(--border);
border-radius: 50%;
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.fam-feature-toggle {
font-size: .68rem;
font-weight: 700;
padding: 3px 8px;
border-radius: 10px;
border: 1px solid var(--border);
cursor: pointer;
background: var(--surface);
color: var(--muted);
white-space: nowrap;
transition: background .15s, color .15s;
font-family: inherit;
}
.fam-feature-toggle.on {
background: var(--green-lt, #dcfce7);
color: var(--green, #16a34a);
border-color: rgba(22,163,74,.3);
}
.fam-feature-toggle:hover { opacity: .8; }
/* ── Feature 2: RPM grid (receipt price import) ─────────────────────────── */
.rpm-grid {
display: flex;
flex-direction: column;
gap: 0;
}
.rpm-card {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid var(--border2);
transition: background .1s;
}
.rpm-card:last-child { border-bottom: none; }
.rpm-card:hover { background: var(--surface2); }
.rpm-card-num {
font-size: .72rem;
font-weight: 700;
color: var(--muted);
width: 18px;
flex-shrink: 0;
padding-top: 7px;
text-align: center;
}
.rpm-card-body { flex: 1; min-width: 0; }
.rpm-card-row { margin-bottom: 6px; }
.rpm-desc-input {
width: 100%;
font-size: .85rem;
font-weight: 600;
}
.rpm-ai-name {
font-size: .68rem;
color: var(--muted);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rpm-card-fields {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: flex-end;
}
.rpm-field-group {
display: flex;
flex-direction: column;
gap: 2px;
}
.rpm-field-label {
font-size: .65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--muted);
}
.rpm-card-actions {
display: flex;
flex-direction: column;
gap: 4px;
flex-shrink: 0;
padding-top: 4px;
}
.rpm-inline-input {
font-size: .8rem;
padding: 4px 7px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--text);
font-family: inherit;
}
.rpm-inline-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-lt);
}
.rpm-inline-select {
font-size: .78rem;
padding: 4px 6px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--text);
font-family: inherit;
width: 100%;
}
.rpm-input-center { text-align: center; }
.rpm-input-right { text-align: right; }
@media (max-width: 520px) {
.rpm-card { padding: 8px 10px; }
.rpm-card-fields > .rpm-field-group { min-width: calc(50% - 3px); }
}
/* ── Feature 4: Grocery module ──────────────────────────────────────────── */
.grocery-list-card:hover { background: var(--surface2); }
.grocery-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--border2);
transition: opacity .15s;
}
.grocery-item:last-child { border-bottom: none; }
.grocery-item-done { opacity: .55; }
.grocery-check-btn { transition: background .15s, border-color .15s; }
/* ── Feature 9: upcoming non-auto badge ─────────────────────────────────── */
/* (inline styles used directly in JS — no extra class needed) */
/* ── Feature 10: finished section toggle ────────────────────────────────── */
.sc-finished-section { }
.sc-finished-toggle:hover { background: var(--border) !important; }
/* ── Feature 11: store-payee map ────────────────────────────────────────── */
.spm-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--border2);
flex-wrap: wrap;
}
.spm-row:last-child { border-bottom: none; }
.spm-store { flex: 1; min-width: 160px; }
.spm-store-name { font-size: .85rem; font-weight: 600; color: var(--text); }
.spm-store-addr { font-size: .72rem; color: var(--muted); margin-top: 1px; }
.spm-store-cnpj { font-size: .7rem; color: var(--muted2); }
.spm-arrow { color: var(--muted); font-size: 1rem; flex-shrink: 0; }
.spm-payee { flex-shrink: 0; min-width: 180px; }
/* ── Mobile responsiveness improvements (all features) ──────────────────── */
@media (max-width: 600px) {
.fam-features-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
.fam-feature-label { font-size: .72rem; }
.spm-row { gap: 8px; }
.spm-store { min-width: 120px; }
.spm-payee { min-width: 140px; }
.sc-upcoming-item { padding: 6px 12px; }
.rpm-card { padding: 8px; }
}
@media (max-width: 400px) {
.fam-features-grid { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════════
v25 — COMPACT UX OVERHAUL
═══════════════════════════════════════════════════════════════════ */
/* ── 1. Global: tighter base density ───────────────────────────────── */
:root {
--r-md: 10px; /* used by old mobile card code */
}
/* Reduce default card padding everywhere */
.card { padding: 14px 16px; }
.card-header { margin-bottom: 10px; }
.mb-6 { margin-bottom: 14px !important; }
.mb-4 { margin-bottom: 10px !important; }
/* Tighter section-header */
.section-header { margin-bottom: 12px; }
.section-title { font-size: 1.2rem; }
/* Content padding already 24px desktop / 16px mobile — leave that */
/* Just tighten bottom nav safe-area padding */
@media (max-width: 768px) {
.content {
padding: 12px 12px;
padding-bottom: calc(var(--bottom-h) + 82px + env(safe-area-inset-bottom));
}
}
/* ── 2. Stat cards: compact ─────────────────────────────────────────── */
.stat-card { padding: 12px 14px; }
.stat-label { font-size: .67rem; margin-bottom: 5px; }
.stat-value { font-size: 1.45rem; }
.stat-sub { font-size: .7rem; margin-top: 4px; }
#page-dashboard .stat-value { font-size: 1.35rem; }
@media (max-width: 768px) {
.stat-card { padding: 10px 12px; }
.stat-value { font-size: 1.25rem; }
#page-dashboard .stat-value { font-size: 1.2rem; }
}
/* ── 3. Transaction rows v2 — compact 2-line cards ───────────────────
Desktop: table with 4 columns
Mobile ≤640: card layout
──────────────────────────────────────────────────────────────────── */
/* Column widths — desktop */
.tx-v2-th-date { width: 78px; white-space: nowrap; color: var(--muted); font-size: .72rem; }
.tx-v2-th-body { min-width: 160px; }
.tx-v2-th-right { width: 110px; text-align: right; }
.tx-v2-th-act { width: 86px; text-align: center; }
/* Row cells — desktop */
.tx-v2-date {
color: var(--muted);
font-size: .78rem;
white-space: nowrap;
vertical-align: top;
padding-top: 9px !important;
}
/* Two-line date: day large, month small */
.tx-date-day {
display: block;
font-size: .88rem;
font-weight: 700;
color: var(--text2);
line-height: 1.1;
text-align: center;
}
.tx-date-mon {
display: block;
font-size: .62rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--muted);
text-align: center;
line-height: 1.2;
}
.tx-v2-body {
vertical-align: top;
padding: 7px 10px !important;
max-width: 0; /* forces text-overflow to work in table */
min-width: 140px;
}
.tx-v2-title {
font-size: .875rem;
font-weight: 600;
color: var(--text);
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
overflow: hidden;
white-space: nowrap;
}
/* The text span clips, the bubble and badges stay visible */
.tx-v2-desc-text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tx-v2-meta {
display: flex;
align-items: center;
gap: 0;
margin-top: 2px;
flex-wrap: nowrap;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tx-v2-acct, .tx-v2-pay {
font-size: .72rem;
color: var(--muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 1;
min-width: 0;
}
.tx-v2-account-line {
display: flex;
align-items: center;
gap: 4px;
margin-top: 2px;
}
.tx-v2-acct-pill {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: .68rem;
color: var(--muted);
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 20px;
padding: 1px 7px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
}
.tx-v2-dot { font-size: .65rem; color: var(--border2); flex-shrink: 0; padding: 0 2px; }
/* Category chip — inline small */
.tx-cat-chip {
display: inline-block;
padding: 1px 6px;
border-radius: 100px;
font-size: .65rem;
font-weight: 600;
background: color-mix(in srgb, var(--c, var(--accent)) 12%, transparent);
color: var(--c, var(--accent));
border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 25%, transparent);
white-space: nowrap;
flex-shrink: 0;
max-width: 90px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red, blue)) {
.tx-cat-chip { background: rgba(42,96,73,.10); color: var(--accent); border-color: rgba(42,96,73,.22); }
}
/* Amount cell */
.tx-v2-right {
text-align: right;
vertical-align: top;
padding: 7px 12px 7px 6px !important;
white-space: nowrap;
}
.tx-v2-amt-wrap { display: flex; flex-direction: column; align-items: flex-end; }
.tx-v2-amt { font-family: var(--font-serif); font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; }
.tx-v2-brl { font-size: .68rem; color: var(--muted); font-weight: 400; margin-top: 1px; }
/* Running balance */
.tx-v2-bal {
font-size: .7rem;
color: var(--green, #2a7a4a);
font-weight: 600;
margin-top: 2px;
display: block;
font-variant-numeric: tabular-nums;
}
.tx-v2-bal.neg { color: var(--red, #c0392b); }
/* Pending emoji indicator in date cell — no background, just sized */
.tx-v2-pend {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .82rem;
line-height: 1;
flex-shrink: 0;
}
.tx-v2-clip { opacity: .55; font-size: .72rem; flex-shrink: 0; }
/* Actions cell */
.tx-v2-act { vertical-align: middle; text-align: center; padding: 4px 6px !important; }
.tx-v2-btns { display: flex; gap: 2px; justify-content: center; }
/* Separator row between pending / confirmed */
.tx-v2-sep {
padding: 4px 12px !important;
background: var(--bg2);
color: var(--muted);
font-size: .67rem;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
}
/* ── Date grouping headers ──────────────────────────────────────────── */
tr.tx-date-header-row { pointer-events: none; cursor: default; }
td.tx-date-header-cell {
padding: 5px 12px 4px !important;
font-size: .67rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
border-top: 1px solid var(--border) !important;
border-bottom: none !important;
line-height: 1;
white-space: nowrap;
}
tr.tx-date-band td.tx-date-header-cell {
color: var(--accent, #2a6049);
background: transparent;
}
tr.tx-date-band-alt td.tx-date-header-cell {
color: var(--text2);
background: transparent;
}
/* ── Desktop only: indent date-group label to align with description col ──
The date column is 72-78px wide. We shift the label right so it starts
at the same horizontal position as the transaction description text.
This block is scoped outside any @media so it applies desktop-only;
mobile overrides below reset to zero indent. ── */
@media (min-width: 641px) {
#page-transactions #txFlatCard td.tx-date-header-cell {
padding-left: calc(72px + 16px) !important; /* date-col width + body-col left-pad */
}
/* Reconcile mode adds a 36px checkbox column before the date column */
.reconcile-mode #page-transactions #txFlatCard td.tx-date-header-cell {
padding-left: calc(36px + 72px + 16px) !important;
}
}
/* Row tinting per date band — rows following a band header inherit it */
tr.tx-date-band ~ tr:not(.tx-date-header-row):not(.tx-pending) {
background: transparent;
}
tr.tx-date-band-alt ~ tr:not(.tx-date-header-row):not(.tx-pending) {
background: var(--surface2, #f9fafb);
}
/* Stripe reset on next band header */
tr.tx-date-band-alt + tr.tx-date-band ~ tr:not(.tx-date-header-row) { background: transparent; }
/* Tighter table rows */
.tx-table tbody tr { border-bottom: 1px solid var(--border); }
.tx-table tbody tr:last-child { border-bottom: none; }
.tx-table tbody tr:hover { background: var(--surface2); }
.tx-table tbody td { padding: 7px 10px; border: 0; }
.tx-table thead th { padding: 6px 10px; }
/* Pending row tint */
tr.tx-pending { background: rgba(251,191,36,.06); }
/* ── Mobile TX: cards ─────────────────────────────────────────────── */
@media (max-width: 640px) {
/* Reset all old v1 mobile overrides that used nth-child */
#page-transactions #txFlatCard table thead { display: none; }
#page-transactions #txFlatCard .table-wrap { overflow: visible; }
#page-transactions #txFlatCard table,
#page-transactions #txFlatCard tbody { display: block; width: 100%; }
/* Card rows become block — flat list only, NOT group-by-account */
#page-transactions #txFlatCard tr:not(.tx-date-header-row),
#page-transactions #txFlatCard td:not(.tx-date-header-cell) { display: block; width: 100%; }
/* ── Date header row: single-line pill with trailing rule ── */
#page-transactions tbody tr.tx-date-header-row {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 16px 0 5px !important;
margin: 0 !important;
width: 100% !important;
}
#page-transactions tbody tr.tx-date-header-row td.tx-date-header-cell {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
width: auto !important;
min-width: 0 !important;
padding: 0 8px 0 2px !important;
font-size: .67rem !important;
font-weight: 800 !important;
letter-spacing: .07em !important;
text-transform: uppercase !important;
border: none !important;
background: transparent !important;
white-space: nowrap !important;
overflow: visible !important;
line-height: 1 !important;
flex-shrink: 0;
}
/* Trailing line after the date label */
#page-transactions tbody tr.tx-date-header-row td.tx-date-header-cell::after {
content: '';
display: block;
height: 1px;
background: var(--border);
opacity: .55;
min-width: 20px;
width: 9999px; /* extends to fill row */
margin-left: 8px;
flex-shrink: 1;
}
/* Band accent colours on label */
tr.tx-date-band td.tx-date-header-cell { color: var(--accent, #2a6049); }
tr.tx-date-band-alt td.tx-date-header-cell { color: var(--text2); }
/* ── Transaction card shell ── */
#page-transactions #txFlatCard tbody tr {
display: grid !important;
grid-template-columns: 38px 1fr auto;
grid-template-rows: 1fr;
gap: 0 10px;
align-items: center;
border: 1px solid var(--border) !important;
border-radius: 14px !important;
background: var(--surface) !important;
padding: 11px 13px !important;
margin: 4px 0 !important;
box-shadow: 0 1px 3px rgba(0,0,0,.06);
transition: box-shadow .15s, transform .12s;
}
/* Reconcile mode: 4-col grid -- scoped to #txFlatCard only */
.reconcile-mode #page-transactions #txFlatCard tbody tr:not(.tx-date-header-row):not(:has(.tx-v2-sep)) {
grid-template-columns: 28px 38px 1fr auto;
}
.reconcile-mode #page-transactions #txFlatCard tbody td.tx-v2-chk {
grid-column: 1; grid-row: 1;
padding: 0 !important;
align-self: center;
display: flex !important;
align-items: center;
justify-content: center;
}
.reconcile-mode #page-transactions #txFlatCard tbody td.tx-v2-date {
grid-column: 2 !important;
}
.reconcile-mode #page-transactions #txFlatCard tbody td.tx-v2-body {
grid-column: 3 !important;
}
.reconcile-mode #page-transactions #txFlatCard tbody td.tx-v2-right {
grid-column: 4 !important;
}
#page-transactions #txFlatCard tbody tr:active {
transform: scale(.982);
box-shadow: none !important;
}
/* Colour-coded left border by date band */
tr.tx-date-band:not(.tx-date-header-row) {
border-left: 3px solid var(--accent, #2a6049) !important;
}
tr.tx-date-band-alt:not(.tx-date-header-row) {
border-left: 3px solid color-mix(in srgb, var(--accent, #2a6049) 35%, var(--border)) !important;
background: color-mix(in srgb, var(--surface2, #f8fafc) 70%, var(--surface)) !important;
}
/* Pending tint */
#page-transactions tbody tr.tx-pending {
background: rgba(251,191,36,.07) !important;
border-color: rgba(251,191,36,.4) !important;
border-left-color: #f59e0b !important;
}
/* Separator rows (CONFIRMADAS label) */
#page-transactions tbody tr:has(.tx-v2-sep) {
display: block !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 4px 2px !important;
margin: 6px 0 2px !important;
}
/* Col 1: date — centred two-line stack */
#page-transactions tbody td.tx-v2-date {
grid-column: 1; grid-row: 1;
padding: 0 !important;
align-self: center;
text-align: center;
width: 38px !important;
min-width: 38px;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
}
/* Pending icon inside date cell: compact, no block margin */
#page-transactions #txFlatCard .tx-v2-pend {
display: inline-flex !important;
align-items: center;
justify-content: center;
font-size: .8rem;
margin: 0 !important;
padding: 0 !important;
line-height: 1;
}
/* Date strings inside date cell */
#page-transactions #txFlatCard .tx-date-day,
#page-transactions #txFlatCard .tx-date-mon {
display: block;
text-align: center;
line-height: 1.15;
}
/* Col 2: body */
#page-transactions tbody td.tx-v2-body {
grid-column: 2; grid-row: 1;
padding: 0 !important;
min-width: 0;
max-width: none;
align-self: center;
overflow: hidden; /* prevent account pill from escaping card */
width: 0; /* let flex/grid distribute remaining space */
}
/* Account pill: must be contained inside the body cell */
#page-transactions #txFlatCard .tx-v2-account-line {
overflow: hidden;
width: 100%;
}
#page-transactions #txFlatCard .tx-v2-acct-pill {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Title + meta lines: must not overflow */
#page-transactions #txFlatCard .tx-v2-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
#page-transactions #txFlatCard .tx-v2-mobile-meta,
#page-transactions #txFlatCard .tx-v2-payee-line {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
/* Col 3: amount */
#page-transactions tbody td.tx-v2-right {
grid-column: 3; grid-row: 1;
padding: 0 !important;
text-align: right;
align-self: center;
width: auto !important;
}
/* Actions and reconcile checkbox: hidden in normal mode */
#page-transactions tbody td.tx-v2-act { display: none !important; }
/* Reconcile checkbox hidden by default on mobile, shown via .reconcile-mode */
#page-transactions tbody td.tx-v2-chk { display: none !important; }
.reconcile-mode #page-transactions #txFlatCard tbody td.tx-v2-chk { display: flex !important; }
/* Typography */
.tx-v2-title { font-size: .875rem; line-height: 1.3; }
.tx-v2-meta { font-size: .71rem; }
.tx-v2-amt { font-size: 1rem !important; }
.tx-v2-brl { font-size: .65rem !important; }
.tx-v2-category { font-size: .7rem; }
}
/* ── 4. Compact filter bar ──────────────────────────────────────────── */
.tx-filter-bar { gap: 5px; margin-bottom: 8px; }
.tx-filter-select { font-size: .78rem; height: 30px; padding: 4px 6px; }
.tx-search { min-width: 120px; }
@media (max-width: 640px) {
.tx-filter-bar { flex-wrap: wrap; gap: 4px; }
.tx-filter-select { font-size: .75rem; flex: 1 1 auto; min-width: 110px; }
}
/* ── 5. Settings page — compact collapsible ─────────────────────────── */
/* cfg-header removed — user info in topbar/sidebar */
.cfg-user-row { display: flex; align-items: center; gap: 10px; }
.cfg-section {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
margin-bottom: 8px;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.cfg-sec-hdr {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
width: 100%;
border: none;
background: transparent;
cursor: pointer;
text-align: left;
font-family: var(--font-sans);
transition: background .12s;
}
.cfg-sec-hdr:hover { background: var(--surface2); }
.cfg-sec-icon {
width: 28px; height: 28px;
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
font-size: .9rem; flex-shrink: 0;
}
.cfg-sec-title {
flex: 1;
font-size: .875rem;
font-weight: 600;
color: var(--text);
}
.cfg-sec-arr {
color: var(--muted);
font-size: .72rem;
transition: transform .2s;
flex-shrink: 0;
}
.cfg-sec-body {
display: none;
border-top: 1px solid var(--border);
}
.cfg-sec-body.open { display: block; }
/* Individual row inside settings */
.cfg-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
border-bottom: 1px solid var(--border);
min-height: 44px; /* was 60px — saves 16px per row */
}
.cfg-row:last-child { border-bottom: none; }
.cfg-row:hover { background: var(--surface2); }
.cfg-row-icon {
width: 28px; height: 28px;
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
font-size: .85rem;
flex-shrink: 0;
}
.cfg-row-info { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cfg-row-label { font-size: .855rem; font-weight: 600; color: var(--text); }
.cfg-row-sub { font-size: .72rem; color: var(--muted); }
.cfg-select {
font-size: .8rem;
padding: 4px 7px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--text);
font-family: var(--font-sans);
max-width: 150px;
}
.cfg-input {
font-size: .8rem;
padding: 4px 8px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--text);
font-family: var(--font-sans);
max-width: 180px;
width: 100%;
}
@media (max-width: 640px) {
.cfg-select { max-width: 130px; }
.cfg-row { padding: 8px 12px; min-height: 40px; }
}
/* ── 6. Dashboard: tighter last-tx table ────────────────────────────── */
#recentTxBody td { padding: 6px 10px !important; font-size: .82rem; }
#recentTxBody tr { border-bottom: 1px solid var(--border); }
#recentTxBody tr:last-child { border-bottom: none; }
/* Dashboard account balances list tighter */
#accountBalancesList > div { padding: 6px 14px !important; }
/* ── 7. Accounts page: tighter cards ───────────────────────────────── */
.account-card { padding: 12px 14px; }
.account-icon { font-size: 1.3rem; margin-bottom: 5px; }
.account-name { font-size: .85rem; }
/* ── 8. Scheduled: tighter upcoming items ──────────────────────────── */
.sc-upcoming-item { padding: 6px 14px; }
.sc-upcoming-desc { font-size: .82rem !important; }
.sc-upcoming-amt { font-size: .9rem !important; }
.sc-upcoming-acct { font-size: .67rem !important; }
.sc-card { margin-bottom: 8px; }
.sc-card-header { padding: 10px 14px; }
.sc-card-type { width: 30px; height: 30px; font-size: .85rem; }
.sc-card-title { font-size: .855rem; }
.sc-card-amount { font-size: .97rem; }
.sc-occ-row { padding: 5px 0; font-size: .8rem; }
/* ── 9. Payees: tighter groups ──────────────────────────────────────── */
.payee-group-header { padding: 9px 14px; }
.payee-group-icon { width: 30px; height: 30px; font-size: .95rem; }
.payee-group-title { font-size: .875rem; }
/* ── 10. Budget cards ───────────────────────────────────────────────── */
.budget-card, .budget-item { padding: 10px 14px !important; }
/* ── 11. Category tree rows ─────────────────────────────────────────── */
.category-tree li { padding: 7px 12px; font-size: .84rem; }
.category-tree li.child { padding-left: 28px; }
.cat-item-row { padding: 7px 12px; }
/* ── 12. Form fields: slightly tighter ──────────────────────────────── */
input:not([type=checkbox]):not([type=radio]),
select, textarea { padding: 7px 10px; font-size: .875rem; }
label { font-size: .7rem; }
/* ── 13. Table-wrap: remove extra padding ───────────────────────────── */
.table-wrap table { font-size: .84rem; }
.table-wrap th, .table-wrap td { padding: 7px 12px; }
/* ── 14. Modal: tighter ─────────────────────────────────────────────── */
.modal-body { padding: 14px 18px; }
.modal-header { padding: 12px 18px 10px; }
.modal-footer { padding: 10px 18px; }
.modal-title { font-size: 1.05rem; }
/* ── 15. Empty state: less tall ─────────────────────────────────────── */
.empty-state { padding: 40px 20px; }
.empty-state .es-icon { font-size: 2rem; margin-bottom: 8px; }
/* ── 16. Report KPI cards ───────────────────────────────────────────── */
.report-kpi { padding: 10px 12px; }
.report-kpi-label { font-size: .68rem; margin-bottom: 3px; }
.report-kpi-value { font-size: 1.15rem; }
/* ── 17. Import hero: less tall on mobile ───────────────────────────── */
@media (max-width: 640px) {
.import-hero { padding: 18px 20px; }
.import-hero h2 { font-size: 1.2rem; }
.import-hero-icon { font-size: 2rem; }
.import-drop-zone { padding: 28px 16px; }
.import-section-card { padding: 12px 10px; }
}
/* ── 18. SC upcoming card: collapsible header ──────────────────────── */
.sc-upcoming-header { cursor: pointer; user-select: none; }
.sc-upcoming-header:hover { background: var(--surface2); }
/* ── 19. Prices page: tighter stats ────────────────────────────────── */
.pid-stat-card { padding: 10px 12px !important; }
/* ── 20. Topbar: reduce height slightly on mobile ───────────────────── */
@media (max-width: 768px) {
:root { --topbar-h: 48px; }
.topbar { padding: 0 12px; }
.topbar-title { font-size: 1rem; }
}
/* ── DESKTOP refinements ─────────────────────────────────────────────── */
@media (min-width: 769px) {
.content { padding: 20px 24px; }
/* Sidebar nav items — readable on desktop/tablet */
.nav-item { padding: 8px 10px; font-size: .925rem; }
.nav-label { padding: 7px 10px 3px; font-size: .65rem; }
.ni-icon { width: 30px; height: 30px; }
/* Settings rows tighter on desktop too */
.settings-row { padding: 11px 16px; min-height: 52px; }
}
/* ── Ensure old settings classes still work for JS references ─────── */
.settings-section { margin-bottom: 0; }
.settings-row-label { font-weight: 600; font-size: .875rem; }
.settings-row-sub { font-size: .72rem; color: var(--muted); margin-top: 1px; }
.settings-row-action { flex-shrink: 0; }
/* ═══════════════════════════════════════════════════════════════════
TX ROW v3 — aligned layout + modern filter bar
═══════════════════════════════════════════════════════════════════ */
/* ── Date cell: compact "13 Mar" ──────────────────────────────────── */
.tx-v2-date {
color: var(--muted);
font-size: .75rem;
font-weight: 500;
white-space: nowrap;
vertical-align: middle;
padding-top: 0 !important;
min-width: 38px;
text-align: center;
letter-spacing: -.01em;
}
/* Two-line date stack also in dark/alternate theme */
.tx-v2-date .tx-date-day {
font-size: .88rem;
font-weight: 700;
color: var(--text2);
}
.tx-v2-date .tx-date-mon {
font-size: .62rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--muted);
}
/* ── Body cell: title left-aligned, meta beneath ─────────────────── */
.tx-v2-body {
vertical-align: top;
padding: 8px 10px !important;
min-width: 0;
}
.tx-v2-title {
font-size: .875rem;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
line-height: 1.35;
}
.tx-v2-meta {
display: flex;
align-items: center;
gap: 0;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
.tx-v2-acct, .tx-v2-pay {
font-size: .73rem;
color: var(--muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 1;
min-width: 0;
}
.tx-v2-dot {
font-size: .6rem;
color: var(--border2);
flex-shrink: 0;
padding: 0 3px;
}
.tx-v2-mobile-meta,
.tx-v2-payee-line,
.tx-v2-account-line {
display: block;
min-width: 0;
margin-top: 2px;
color: var(--muted);
font-size: .74rem;
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
.tx-v2-account-line {
margin-top: 3px;
}
.tx-v2-account-line .tx-v2-acct-pill {
display: inline-flex;
align-items: center;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Right cell: category chip ABOVE amount ──────────────────────── */
.tx-v2-right {
text-align: right;
vertical-align: top;
padding: 6px 12px 6px 4px !important;
white-space: nowrap;
display: table-cell; /* keep table-cell behavior */
}
.tx-v2-amt-wrap {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.tx-v2-amt {
font-family: var(--font-serif);
font-weight: 700;
font-size: .97rem;
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.tx-v2-brl {
font-size: .69rem;
color: var(--muted);
font-weight: 400;
margin-top: 1px;
font-variant-numeric: tabular-nums;
}
.tx-v2-bal {
font-size: .7rem;
font-weight: 600;
color: var(--green, #2a7a4a);
margin-top: 3px;
font-variant-numeric: tabular-nums;
}
.tx-v2-bal.neg { color: var(--red, #c0392b); }
/* Category chip — compact, above the amount */
.tx-cat-chip {
display: inline-block;
padding: 1px 7px;
border-radius: 100px;
font-size: .65rem;
font-weight: 600;
background: color-mix(in srgb, var(--c, var(--accent)) 12%, transparent);
color: var(--c, var(--accent));
border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 22%, transparent);
white-space: nowrap;
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
margin-bottom: 3px;
display: block; /* full-width in right cell, aligns right */
text-align: right;
}
@supports not (color: color-mix(in srgb, red, blue)) {
.tx-cat-chip { background: rgba(42,96,73,.10); color: var(--accent); border-color: rgba(42,96,73,.22); }
}
/* Pending indicator in date cell */
.tx-v2-pend {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .75rem;
line-height: 1;
flex-shrink: 0;
}
/* Clip icon */
.tx-v2-clip { opacity: .5; font-size: .72rem; flex-shrink: 0; }
/* Actions */
.tx-v2-act { vertical-align: middle; text-align: center; padding: 4px 6px !important; }
.tx-v2-btns { display: flex; gap: 2px; justify-content: center; }
/* Separator row */
.tx-v2-sep {
padding: 3px 12px !important;
background: var(--bg2);
color: var(--muted);
font-size: .67rem;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
}
/* Date band overrides for dark mode / alternate theme */
[data-theme="dark"] tr.tx-date-band td.tx-date-header-cell { background: rgba(255,255,255,.03); }
[data-theme="dark"] tr.tx-date-band-alt td.tx-date-header-cell { background: rgba(255,255,255,.07); }
[data-theme="dark"] tr.tx-date-band-alt ~ tr:not(.tx-date-header-row):not(.tx-pending) { background: rgba(255,255,255,.02); }
/* Row hover + pending */
.tx-table tbody tr { border-bottom: 1px solid var(--border); cursor: pointer; transition: background .1s; }
.tx-table tbody tr:hover { background: var(--surface2); }
.tx-table tbody tr:last-child { border-bottom: none; }
tr.tx-pending { background: rgba(251,191,36,.05); }
.tx-table tbody td { padding: 7px 10px; border: 0; }
.tx-table thead th { padding: 6px 10px; font-size: .72rem; }
/* Desktop col widths */
.tx-v2-th-date { width: 58px; white-space: nowrap; color: var(--muted); font-size: .72rem; }
.tx-v2-th-body { min-width: 160px; }
.tx-v2-th-right { width: 120px; text-align: right; }
.tx-v2-th-act { width: 86px; text-align: center; }
/* ── Mobile card layout ──────────────────────────────────────────── */
@media (max-width: 640px) {
#page-transactions #txFlatCard table thead { display: none; }
#page-transactions #txFlatCard .table-wrap { overflow: visible; }
#page-transactions #txFlatCard table,
#page-transactions #txFlatCard tbody { display: block; width: 100%; }
/* Card rows become block — flat list only */
#page-transactions #txFlatCard tr:not(.tx-date-header-row),
#page-transactions #txFlatCard td:not(.tx-date-header-cell) { display: block; width: 100%; }
/* ── Date header: single-line with trailing rule — NEVER breaks ── */
#page-transactions tbody tr.tx-date-header-row {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 16px 0 5px !important;
margin: 0 !important;
width: 100% !important;
}
#page-transactions tbody tr.tx-date-header-row td.tx-date-header-cell {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
width: auto !important;
min-width: 0 !important;
padding: 0 8px 0 2px !important;
font-size: .67rem !important;
font-weight: 800 !important;
letter-spacing: .07em !important;
text-transform: uppercase !important;
border: none !important;
background: transparent !important;
white-space: nowrap !important;
overflow: visible !important;
line-height: 1 !important;
flex-shrink: 0;
}
#page-transactions tbody tr.tx-date-header-row td.tx-date-header-cell::after {
content: '';
display: block;
height: 1px;
background: var(--border);
opacity: .5;
min-width: 20px;
width: 9999px;
margin-left: 8px;
flex-shrink: 1;
}
tr.tx-date-band td.tx-date-header-cell { color: var(--accent, #2a6049) !important; }
tr.tx-date-band-alt td.tx-date-header-cell { color: var(--text2) !important; }
/* ── Card shell ── */
#page-transactions #txFlatCard tbody tr {
display: grid !important;
grid-template-columns: 38px 1fr auto;
grid-template-rows: 1fr;
gap: 0 10px;
align-items: center;
border: 1px solid var(--border) !important;
border-radius: 14px !important;
background: var(--surface) !important;
padding: 11px 13px !important;
margin: 4px 0 !important;
box-shadow: 0 1px 3px rgba(0,0,0,.06);
transition: box-shadow .15s, transform .12s;
}
#page-transactions #txFlatCard tbody tr:active {
transform: scale(.982);
box-shadow: none !important;
}
/* ── Grouped view: reset to normal table rows (not grid cards) ── */
#page-transactions #txGroupContainer tbody tr {
display: table-row !important;
grid-template-columns: none !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
#page-transactions #txGroupContainer tbody tr:active { transform: none !important; box-shadow: none !important; }
#page-transactions #txGroupContainer tbody td { display: table-cell !important; }
/* Colour-coded left border per date band */
tr.tx-date-band:not(.tx-date-header-row) {
border-left: 3px solid var(--accent, #2a6049) !important;
}
tr.tx-date-band-alt:not(.tx-date-header-row) {
border-left: 3px solid color-mix(in srgb, var(--accent, #2a6049) 35%, var(--border)) !important;
background: color-mix(in srgb, var(--surface2, #f8fafc) 70%, var(--surface)) !important;
}
/* Pending */
#page-transactions tbody tr.tx-pending {
background: rgba(251,191,36,.06) !important;
border-color: rgba(251,191,36,.35) !important;
border-left-color: #f59e0b !important;
}
/* Separator (CONFIRMADAS label) */
#page-transactions tbody tr:has(.tx-v2-sep) {
display: block !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 3px 2px !important;
margin: 4px 0 2px !important;
}
/* Date col */
#page-transactions tbody td.tx-v2-date {
grid-column: 1;
padding: 0 !important;
align-self: center;
text-align: center;
width: 38px !important;
min-width: 38px;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
}
/* Body col */
#page-transactions tbody td.tx-v2-body {
grid-column: 2;
padding: 0 !important;
min-width: 0;
max-width: none;
align-self: center;
overflow: hidden;
width: 0;
}
/* Right col: amount */
#page-transactions tbody td.tx-v2-right {
grid-column: 3;
padding: 0 !important;
text-align: right;
align-self: center;
display: flex !important;
flex-direction: column;
align-items: flex-end;
gap: 2px;
width: auto !important;
}
/* Actions hidden */
#page-transactions tbody td.tx-v2-act { display: none !important; }
/* Typography */
.tx-v2-title { font-size: .875rem; line-height: 1.3; }
.tx-v2-meta { font-size: .71rem; }
.tx-v2-amt { font-size: 1rem !important; }
.tx-v2-brl { font-size: .65rem !important; }
.tx-v2-category { font-size: .7rem; }
/* Category chip on mobile */
.tx-cat-chip {
font-size: .62rem;
padding: 1px 6px;
max-width: 90px;
margin-bottom: 2px;
}
}
/* ── Modern filter bar ───────────────────────────────────────────── */
.tx-filter-bar {
display: flex;
flex-direction: column;
gap: 7px;
margin-bottom: 10px;
}
/* Search row */
.tx-search-wrap {
display: flex;
align-items: center;
gap: 8px;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 100px;
padding: 6px 14px;
transition: border-color .15s, box-shadow .15s;
}
.tx-search-wrap:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(42,96,73,.08);
}
.tx-search-wrap svg { color: var(--muted); flex-shrink: 0; }
.tx-search-input {
border: none !important;
outline: none !important;
background: transparent !important;
font-size: .875rem;
color: var(--text);
width: 100%;
padding: 0 !important;
box-shadow: none !important;
}
/* Chips row */
.tx-filter-chips-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
/* Individual chip select */
.tx-filter-chip-wrap {
position: relative;
}
.tx-chip-select {
appearance: none;
-webkit-appearance: none;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 100px;
padding: 5px 28px 5px 12px;
font-size: .78rem;
font-weight: 500;
font-family: var(--font-sans);
color: var(--text2);
cursor: pointer;
transition: border-color .15s, background .15s, color .15s;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238c8278' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
white-space: nowrap;
max-width: 160px;
}
.tx-chip-select:hover {
border-color: var(--border2);
background-color: var(--surface2);
}
.tx-chip-select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(42,96,73,.08);
color: var(--accent);
}
/* Active state: when a value is selected (non-empty) */
.tx-chip-select.is-active {
border-color: var(--accent);
background-color: var(--accent-lt);
color: var(--accent);
font-weight: 600;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%232a6049' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* View toggle buttons */
.tx-view-btns {
display: flex;
gap: 2px;
background: var(--bg2);
border: 1.5px solid var(--border);
border-radius: 100px;
padding: 3px;
margin-left: auto;
}
.tx-view-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
border-radius: 100px;
background: transparent;
color: var(--muted);
cursor: pointer;
transition: background .15s, color .15s;
padding: 0;
font-family: var(--font-sans);
}
.tx-view-btn:hover { color: var(--text2); background: var(--surface); }
.tx-view-btn.active {
background: var(--surface);
color: var(--accent);
box-shadow: 0 1px 4px rgba(0,0,0,.10);
}
/* Mobile filter bar */
@media (max-width: 640px) {
.tx-filter-chips-row { gap: 5px; }
.tx-chip-select {
font-size: .74rem;
padding: 5px 24px 5px 10px;
max-width: 130px;
}
.tx-view-btns { margin-left: 0; }
}
/* ═══════════════════════════════════════════════════════════════════
SCHEDULED v3 — compact single-row cards
═══════════════════════════════════════════════════════════════════ */
/* Main card row: icon · title+meta · amount+badges · chevron */
.sc-card-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
cursor: pointer;
transition: background .12s;
}
.sc-card-row:hover { background: var(--surface2); }
.sc-card-icon {
width: 30px; height: 30px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: .9rem; flex-shrink: 0;
}
.sc-card-mid {
flex: 1; min-width: 0;
}
.sc-card-title2 {
font-size: .875rem; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
color: var(--text);
}
.sc-card-meta {
font-size: .72rem; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-top: 1px;
display: flex; align-items: center; gap: 4px; flex-wrap: nowrap;
}
.sc-card-end {
flex-shrink: 0; text-align: right; min-width: 80px;
}
.sc-card-amt {
font-family: var(--font-serif); font-weight: 700;
font-size: .95rem; font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.sc-card-badges {
display: flex; gap: 4px; justify-content: flex-end;
flex-wrap: nowrap; margin-top: 3px;
}
.sc-card-chevron {
flex-shrink: 0; color: var(--muted);
transition: transform .2s;
}
.sc-card.open .sc-card-chevron { transform: rotate(180deg); }
/* Next occurrence pill */
.sc-next-pill {
display: inline-flex; align-items: center;
padding: 1px 6px; border-radius: 100px;
font-size: .62rem; font-weight: 600;
background: var(--surface2); color: var(--muted);
border: 1px solid var(--border); white-space: nowrap;
}
.sc-next-pill.overdue { background: var(--red-lt); color: var(--red); border-color: rgba(192,57,43,.2); }
.sc-next-pill.today { background: var(--amber-lt); color: var(--amber); border-color: rgba(180,83,9,.2); }
/* Category chip in meta */
.sc-cat-chip {
display: inline-block;
padding: 0 6px; border-radius: 100px;
font-size: .62rem; font-weight: 600;
background: color-mix(in srgb, var(--c, var(--accent)) 12%, transparent);
color: var(--c, var(--accent));
border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 22%, transparent);
white-space: nowrap; flex-shrink: 0;
}
@supports not (color: color-mix(in srgb, red, blue)) {
.sc-cat-chip { background: rgba(42,96,73,.10); color: var(--accent); border-color: rgba(42,96,73,.22); }
}
/* Action bar below header */
.sc-card-actions {
display: flex; align-items: center; gap: 8px;
padding: 6px 14px; border-top: 1px solid var(--border);
background: var(--surface2);
}
.sc-reg-btn {
flex: 1;
padding: 6px 12px; border: none; border-radius: 100px;
font-size: .78rem; font-weight: 600;
background: var(--accent); color: #fff;
cursor: pointer; font-family: var(--font-sans);
transition: filter .15s;
-webkit-tap-highlight-color: transparent;
}
.sc-reg-btn:hover { filter: brightness(1.08); }
/* Desktop: botão menor e discreto */
@media (min-width: 768px) {
.sc-reg-btn {
flex: none;
padding: 4px 10px;
font-size: .72rem;
font-weight: 500;
background: transparent;
color: var(--accent);
border: 1px solid var(--accent);
opacity: .7;
}
.sc-reg-btn:hover {
filter: none;
background: var(--accent-lt);
opacity: 1;
}
}
.sc-reg-none {
flex: 1; font-size: .75rem; color: var(--muted);
background: transparent; border-radius: 100px;
padding: 6px 12px; text-align: left;
}
.sc-icon-btns { display: flex; gap: 3px; margin-left: auto; }
.sc-icon-btn {
width: 30px; height: 30px; border-radius: 8px;
border: 1px solid var(--border); background: var(--surface);
color: var(--muted); font-size: .75rem;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all .12s;
-webkit-tap-highlight-color: transparent;
}
.sc-icon-btn:hover { background: var(--bg2); color: var(--accent); border-color: var(--accent); }
.sc-icon-del:hover { background: var(--red-lt); color: var(--red); border-color: var(--red); }
/* Occurrences header */
.sc-occ-header {
font-size: .68rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .08em; color: var(--muted); margin-bottom: 8px;
}
/* Card: reduce base margin */
.sc-card { margin-bottom: 6px; }
/* Mobile: keep row layout, just tighter */
@media (max-width: 640px) {
.sc-card-row { padding: 9px 12px; gap: 8px; }
.sc-card-actions { padding: 5px 12px; }
.sc-card-icon { width: 28px; height: 28px; font-size: .82rem; }
.sc-card-title2 { font-size: .845rem; }
.sc-card-meta { font-size: .7rem; }
.sc-card-amt { font-size: .9rem; }
.sc-reg-btn { font-size: .74rem; padding: 5px 10px; }
}
/* ═══════════════════════════════════════════════════════════════════
FAMILY ADMIN v2 — clean card layout
═══════════════════════════════════════════════════════════════════ */
.fam-card2 {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
margin-bottom: 10px;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
/* Header: avatar · name+desc+count · edit/delete */
.fam-card2-header {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
}
.fam-card2-avatar {
width: 36px; height: 36px; border-radius: 10px;
background: var(--accent-lt);
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem; flex-shrink: 0;
}
.fam-card2-title-block { flex: 1; min-width: 0; }
.fam-card2-name { font-weight: 700; font-size: .92rem; color: var(--text); }
.fam-card2-desc { font-size: .72rem; color: var(--muted); margin-top: 1px; }
.fam-card2-count { font-size: .7rem; color: var(--muted); margin-top: 1px; }
.fam-card2-header-btns { display: flex; gap: 4px; flex-shrink: 0; }
.fam-hdr-btn {
width: 30px; height: 30px; border-radius: 8px;
border: 1px solid var(--border); background: var(--surface);
font-size: .82rem; display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all .12s;
}
.fam-hdr-btn:hover { background: var(--surface2); border-color: var(--accent); }
.fam-hdr-btn.danger:hover { background: var(--red-lt); border-color: var(--red); }
/* Section within card */
.fam-section { padding: 10px 16px; border-bottom: 1px solid var(--border); }
.fam-section:last-child { border-bottom: none; }
.fam-section-label {
font-size: .67rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .07em; color: var(--muted); margin-bottom: 8px;
}
/* Module toggle pills */
.fam-mod-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.fam-mod-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 12px; border-radius: 100px;
border: 1.5px solid var(--border); background: var(--surface);
font-size: .78rem; font-weight: 500; font-family: var(--font-sans);
color: var(--muted); cursor: pointer;
transition: all .15s; white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
.fam-mod-pill:hover { border-color: var(--accent); color: var(--accent); }
.fam-mod-pill.on {
background: var(--accent-lt); border-color: var(--accent);
color: var(--accent); font-weight: 600;
}
.fam-mod-dot { font-size: .65rem; opacity: .7; }
/* Member rows */
.fam-members-list { display: flex; flex-direction: column; gap: 0; }
.fam-member-row {
display: flex; align-items: center; gap: 10px;
padding: 7px 0; border-bottom: 1px solid var(--border);
}
.fam-member-row:last-child { border-bottom: none; }
.fam-member-info { flex: 1; min-width: 0; }
.fam-member-name { font-size: .84rem; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fam-member-email { font-size: .7rem; color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fam-role-badge {
display: inline-flex; align-items: center; gap: 3px;
padding: 2px 8px; border-radius: 100px;
font-size: .68rem; font-weight: 600; white-space: nowrap;
background: var(--bg2); color: var(--muted);
border: 1px solid var(--border); flex-shrink: 0;
}
.fam-role-badge.owner { background: var(--amber-lt); color: var(--amber); border-color: rgba(180,83,9,.2); }
.fam-remove-btn {
width: 24px; height: 24px; border-radius: 6px;
border: 1px solid var(--border); background: transparent;
font-size: .72rem; color: var(--muted); cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all .12s; flex-shrink: 0;
}
.fam-remove-btn:hover { background: var(--red-lt); color: var(--red); border-color: var(--red); }
.fam-empty-members { font-size: .78rem; color: var(--muted); padding: 6px 0; }
/* Add member row */
.fam-add-member {
display: flex; gap: 8px; align-items: center; margin-top: 10px;
}
.fam-add-sel {
flex: 1; font-size: .8rem;
border: 1px solid var(--border); border-radius: var(--r-sm);
padding: 5px 8px; background: var(--surface); color: var(--text);
}
@media (max-width: 640px) {
.fam-mod-pills { gap: 5px; }
.fam-mod-pill { font-size: .74rem; padding: 4px 10px; }
.fam-add-member { flex-direction: column; align-items: stretch; }
.fam-add-sel { width: 100%; }
}
/* ── Family cards: stacked header + checkbox flags ─────────────────── */
.fam-card2--stacked { display:flex; flex-direction:column; gap:10px; }
.fam-card2-topline { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.fam-card2-topmain { display:flex; align-items:flex-start; gap:10px; min-width:0; flex:1; }
.fam-card2-subline { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.fam-flags-row { display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap; }
.fam-flag-item { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:var(--text2); white-space:nowrap; }
.fam-flag-item input { width:16px; height:16px; accent-color: var(--accent); }
/* ── Transactions: fixed three-line body, category glued to title ─── */
.tx-v2-body { vertical-align: top; padding: 8px 10px !important; min-width: 0; }
.tx-v2-title {
font-size: .875rem; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
text-align: left; line-height: 1.22; margin: 0;
}
.tx-v2-category {
font-size: .72rem; color: var(--text2); line-height: 1.05;
margin: 0; padding: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tx-v2-meta {
display: flex; align-items: center; gap: 0;
margin-top: 0; line-height: 1.05;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
}
.tx-v2-acct, .tx-v2-pay { font-size: .71rem; color: var(--muted); }
.tx-v2-right { text-align:right; vertical-align:top; padding: 6px 12px 6px 4px !important; white-space: nowrap; }
.tx-v2-amt-wrap { display:flex; flex-direction:column; align-items:flex-end; }
.tx-v2-act, .tx-v2-th-act { display:none !important; }
/* Scoped to flat view only — grouped view must NOT inherit grid */
#page-transactions #txFlatCard tbody tr { grid-template-columns: 40px minmax(0,1fr) auto !important; }
/* Grouped view: reset to normal table row — override any inherited grid/flex */
#page-transactions #txGroupContainer tbody tr {
display: table-row !important;
grid-template-columns: none !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
#page-transactions #txGroupContainer tbody td {
display: table-cell !important;
border-bottom: 1px solid var(--border) !important;
}
#page-transactions #txGroupContainer tbody tr:last-child td { border-bottom: none !important; }
/* Grouped view column widths via inline style on table — reinforce here */
#page-transactions #txGroupContainer table { width: 100% !important; table-layout: fixed !important; }
#page-transactions #txGroupContainer td.tx-v2-date {
width: 52px !important;
min-width: 52px !important;
max-width: 52px !important;
padding: 9px 4px 9px 12px !important;
vertical-align: middle !important;
text-align: center !important;
}
#page-transactions #txGroupContainer td.tx-v2-body {
padding: 9px 6px !important;
overflow: hidden !important;
vertical-align: middle !important;
}
#page-transactions #txGroupContainer td.tx-v2-right {
width: 90px !important;
min-width: 90px !important;
max-width: 90px !important;
padding: 9px 12px 9px 4px !important;
text-align: right !important;
vertical-align: middle !important;
white-space: nowrap !important;
}
/* Description text must not overflow */
#page-transactions #txGroupContainer .tx-v2-desc-text {
display: block !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
max-width: 100% !important;
}
#page-transactions #txGroupContainer .tx-v2-amt { font-size: .82rem !important; white-space: nowrap !important; }
#page-transactions #txGroupContainer .tx-v2-brl { font-size: .7rem !important; white-space: nowrap !important; display: block !important; }
@media (max-width: 640px) {
.tx-v2-title { font-size:.865rem; line-height:1.18; }
.tx-v2-category { font-size:.7rem; }
.tx-v2-meta { font-size:.69rem; }
}
/* ── Forecast: fixed layout and always three lines ─────────────────── */
.forecast-table-wrap table { width:100%; table-layout:fixed; }
.forecast-tx-row td { padding:7px 10px; vertical-align:middle; }
.forecast-date-cell {
width:24px;
padding: 4px 3px 4px 3px;
color: var(--muted);
vertical-align: middle;
border-right: 1px solid var(--border);
}
.forecast-head-date {
width: 24px;
min-width: 24px;
max-width: 24px;
}
.forecast-date-main { font-size:.75rem; line-height:1.15; font-weight:600; white-space:nowrap; }
/* Forecast category icon in date column */
.forecast-cat-icon {
font-size: .82rem;
line-height: 1;
display: inline;
margin-right: 2px;
}
.forecast-date-flag,
.forecast-date-today { display:block; font-size:.63rem; line-height:1.1; min-height:11px; white-space:nowrap; margin-top:1px; }
.forecast-date-cell--today .forecast-date-main,
.forecast-date-cell--today .forecast-date-today { color:var(--accent); }
.forecast-desc-cell {
min-width:0;
padding: 7px 12px;
}
.forecast-line { display:block; margin:0; padding:0; min-height:0; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.forecast-title { font-size:.84rem; color:var(--text); font-weight:500; }
.forecast-category { font-size:.74rem; color:var(--text2); margin-top:1px; }
.forecast-payee { font-size:.71rem; color:var(--muted); margin-top:1px; }
.forecast-amount-cell,
.forecast-balance-cell {
width: 100px;
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
padding: 7px 14px 7px 6px;
vertical-align: middle;
}
/* All block children inside the amount cell must explicitly right-align */
.forecast-amount-cell > *,
.forecast-balance-cell > * {
text-align: right;
display: block;
width: 100%;
}
.forecast-amount-main {
display: block;
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 600;
white-space: nowrap;
}
.forecast-amount-brl {
display: block;
text-align: right;
font-size: .68rem;
color: var(--muted);
font-weight: 400;
margin-top: 1px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
@media (max-width: 640px) {
.forecast-tx-row td { padding:5px 6px; }
.forecast-date-cell { width:24px; padding:5px 6px; border-right:none; }
.forecast-amount-cell { width:auto !important; font-size:.8rem; }
.forecast-balance-head,
.forecast-balance-cell {
display:none !important;
width:0 !important;
min-width:0 !important;
padding:0 !important;
overflow:hidden !important;
}
.forecast-table-wrap table { table-layout:auto !important; }
}
/* ── Transactions: avoid blank area under title when optional lines are absent ── */
.tx-v2-body {
height: auto !important;
}
.tx-v2-body .tx-v2-title,
.tx-v2-body .tx-v2-category,
.tx-v2-body .tx-v2-meta {
margin-bottom: 0 !important;
}
.tx-v2-body .tx-v2-category:empty,
.tx-v2-body .tx-v2-meta:empty {
display: none !important;
}
/* ── Forecast mobile: show running balance line-by-line under amount ── */
.forecast-balance-mobile { display:none !important; }
@media (max-width: 640px) {
.forecast-balance-head,
.forecast-balance-cell {
display:none !important;
width:0 !important;
min-width:0 !important;
padding:0 !important;
overflow:hidden !important;
}
.forecast-table-wrap table {
table-layout: auto !important;
}
.forecast-amount-cell {
width: auto !important;
min-width: 90px;
}
.forecast-balance-mobile { display:none !important; }
}
/* ── Módulo family toggle buttons ─────────────────────────────────── */
.fam-mod-btn {
display:inline-flex; align-items:center; gap:5px;
padding:5px 11px; border:1.5px solid var(--border);
border-radius:20px; background:var(--surface);
font-size:.78rem; font-weight:600; color:var(--text2);
cursor:pointer; transition:all .18s; user-select:none;
}
.fam-mod-btn:hover { border-color:var(--accent); background:var(--accent-lt); color:var(--accent); }
.fam-mod-btn.active { border-color:var(--accent); background:var(--accent-lt); color:var(--accent); }
.fam-mod-dot { font-size:.6rem; opacity:.7; }
.fam-mod-btn.active .fam-mod-dot { opacity:1; }
/* ── Budget card hover ───────────────────────────────────────────── */
.budget-card { transition: transform .18s, box-shadow .18s; }
.budget-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.10); }
/* ── History table alternating rows ─────────────────────────────── */
#catHistoryBody tr:nth-child(even),
#budgetDrillBody tr:nth-child(even) { background:var(--surface2); }
#catHistoryBody tr:hover,
#budgetDrillBody tr:hover { background:var(--accent-lt) !important; }
/* ── Running balance in tx list ─────────────────────────────────── */
.tx-v2-bal { font-size:.7rem; color:var(--accent); font-weight:600; text-align:right; margin-top:2px; }
.tx-v2-bal.neg { color:var(--red); }
/* ── Grocery module v2 ────────────────────────────────────────────── */
.grocery-item {
display:flex; align-items:center; gap:10px;
padding:10px 4px; border-bottom:1px solid var(--border);
}
.grocery-item:last-child { border-bottom:none; }
.grocery-item-done { opacity:.55; }
.grocery-check-btn { transition:all .15s; }
.grocery-list-card:hover { transform:translateY(-1px); box-shadow:var(--shadow-md); transition:all .18s; }
.grocery-sug-row {
display:flex; justify-content:space-between; align-items:center;
padding:9px 12px; cursor:pointer;
border-bottom:1px solid var(--border); transition:background .12s;
}
.grocery-sug-row:last-child { border-bottom:none; }
.grocery-sug-new {
color:var(--accent); font-size:.82rem;
background:var(--accent-lt);
}
/* ── Topbar page icon (mobile only) ────────────────────────────────── */
.topbar-page-icon {
display:none!important;
display: none; /* hidden on desktop */
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--accent-lt);
color: var(--accent);
flex-shrink: 0;
}
.topbar-page-icon svg { display: block; }
@media (max-width: 768px) {
.topbar-page-icon { display: flex; } /* show icon on mobile */
.topbar-title { display: none; } /* hide text on mobile */
}
/* ═══════════════════════════════════════════════════════════════════
SCHEDULED CALENDAR VIEW
Design: clean card-grid, semantically colored dots, responsive
════════════════════════════════════════════════════════════════════ */
/* ── View toggle (List / Calendar) ─────────────────────────────── */
.sc-view-toggle {
display: flex;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 2px;
gap: 2px;
}
.sc-view-btn {
display: flex; align-items: center; gap: 5px;
padding: 5px 10px;
border: none; border-radius: 6px;
background: transparent; color: var(--muted);
font-size: .8rem; font-weight: 500;
cursor: pointer; transition: all .15s;
font-family: var(--font-sans);
}
.sc-view-btn:hover { color: var(--text2); background: var(--surface); }
.sc-view-btn.active {
background: var(--surface);
color: var(--accent);
box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
@media (max-width: 480px) {
.sc-view-lbl { display: none; }
.sc-view-btn { padding: 6px 8px; }
}
/* ── Calendar navigation bar ───────────────────────────────────── */
.sc-cal-nav {
display: flex; align-items: center; gap: 10px;
margin-bottom: 10px;
}
.sc-cal-nav-btn {
display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px;
border: 1px solid var(--border); border-radius: var(--r-sm);
background: var(--surface); color: var(--text2);
cursor: pointer; transition: all .15s; flex-shrink: 0;
}
.sc-cal-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.sc-cal-month-label {
flex: 1; text-align: center;
font-family: var(--font-serif); font-size: 1.1rem;
font-weight: 500; color: var(--text); letter-spacing: -.01em;
}
.sc-cal-today-btn {
padding: 5px 14px;
border: 1px solid var(--border); border-radius: var(--r-sm);
background: var(--surface); color: var(--muted);
font-size: .8rem; font-weight: 600; cursor: pointer;
transition: all .15s; font-family: var(--font-sans);
}
.sc-cal-today-btn:hover {
border-color: var(--accent); color: var(--accent);
background: var(--accent-lt);
}
/* ── Legend ─────────────────────────────────────────────────────── */
.sc-cal-legend {
display: flex; align-items: center; gap: 14px;
margin-bottom: 10px; flex-wrap: wrap;
}
.sc-cal-leg-item {
display: flex; align-items: center; gap: 5px;
font-size: .75rem; color: var(--muted); font-weight: 500;
}
.sc-cal-dot {
width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.sc-cal-dot-expense { background: var(--red); }
.sc-cal-dot-transfer { background: var(--amber); }
.sc-cal-dot-income { background: var(--green); }
/* ── Calendar outer container ───────────────────────────────────── */
.sc-cal-wrap {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
/* ── Calendar desktop split layout ─────────────────────────────── */
/* ── Calendar desktop layout ─────────────────────────────────────
TOP ROW: [calendar grid] [próximos 10 dias — sticky]
BOTTOM ROW: [detail do dia + recorrentes — full width]
───────────────────────────────────────────────────────────────── */
.sc-cal-desktop-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 440px;
grid-template-rows: auto auto;
gap: 16px;
align-items: start;
}
/* Left col: calendar only */
.sc-cal-left {
grid-column: 1;
grid-row: 1;
display: flex;
flex-direction: column;
gap: 0;
}
/* Right col: upcoming 10 dias — sticky alongside calendar */
.sc-cal-right {
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
gap: 14px;
position: sticky;
top: 64px;
max-height: calc(100vh - 80px);
overflow-y: auto;
}
.sc-cal-right::-webkit-scrollbar { width: 4px; }
.sc-cal-right::-webkit-scrollbar-track { background: transparent; }
.sc-cal-right::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
/* Bottom row: detail + recurrents — spans full width */
.sc-cal-bottom {
grid-column: 1 / -1;
grid-row: 2;
display: flex;
flex-direction: column;
gap: 16px;
}
/* Detail panel — always rendered, min-height so placeholder is visible */
#scCalDetail {
display: block !important;
min-height: 80px;
}
/* Upcoming panel scrollable body */
.sc-cal-upcoming-panel .sc-panel__body {
max-height: calc(100vh - 160px);
overflow-y: auto;
scrollbar-width: thin;
scroll-behavior: smooth;
}
/* Recurrents panel — no max-height, shows all */
.sc-cal-recurrents-panel .sc-panel__body { max-height: none; overflow-y: visible; }
/* Mobile: single column, hide bottom panels, show detail only when .visible */
@media (max-width: 900px) {
.sc-cal-desktop-layout {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.sc-cal-left { grid-column: 1; grid-row: auto; }
.sc-cal-right { grid-column: 1; grid-row: auto; position: static; max-height: none; overflow-y: visible; }
.sc-cal-bottom { grid-column: 1; grid-row: auto; }
#scCalDetail { display: none !important; }
#scCalDetail.visible { display: block !important; }
.sc-cal-upcoming-panel,
.sc-cal-recurrents-panel { display: none; }
}
/* ── Shared grid layout ─────────────────────────────────────────── */
.sc-cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
/* ── Day-of-week header ─────────────────────────────────────────── */
.sc-cal-header-grid {
background: var(--accent);
}
.sc-cal-dow {
text-align: center;
padding: 10px 0;
font-size: .72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .07em;
color: rgba(255,255,255,.85);
}
/* ── Day cells ──────────────────────────────────────────────────── */
.sc-cal-day {
position: relative;
min-height: 90px;
padding: 6px 6px 4px;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
cursor: default;
transition: background .12s;
overflow: hidden;
}
.sc-cal-day:nth-child(7n) { border-right: none; }
.sc-cal-days-grid .sc-cal-day:nth-last-child(-n+7) { border-bottom: none; }
.sc-cal-day--other-month {
background: var(--bg);
opacity: .55;
}
.sc-cal-day--today {
background: var(--accent-lt);
}
.sc-cal-day--today .sc-cal-day-num {
background: var(--accent);
color: #fff !important; /* branco sempre — contraste com círculo verde */
border-radius: 50%;
width: 24px; height: 24px;
display: flex; align-items: center; justify-content: center;
font-weight: 800;
}
/* Quando hoje também está selecionado: mantém círculo verde + número branco */
.sc-cal-day--today.sc-cal-day--selected .sc-cal-day-num {
background: var(--accent);
color: #fff !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.sc-cal-day--has-events { cursor: pointer; }
.sc-cal-day--has-events:hover { background: var(--bg2); }
.sc-cal-day--selected {
background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
box-shadow: inset 0 0 0 2px var(--accent) !important;
border-radius: 6px;
}
.sc-cal-day--selected .sc-cal-day-num {
color: var(--accent);
font-weight: 800;
}
/* Empty days also need pointer cursor when selectable */
.sc-cal-day:not(.sc-cal-day--other-month) { cursor: pointer; }
.sc-cal-day--other-month { cursor: default; }
.sc-cal-day-num {
font-size: .78rem; font-weight: 600; color: var(--text2);
line-height: 1; margin-bottom: 4px;
width: 24px; height: 24px;
display: flex; align-items: center; justify-content: center;
}
/* ── Dot row ────────────────────────────────────────────────────── */
.sc-cal-dots {
display: flex; gap: 3px; flex-wrap: wrap;
margin-bottom: 4px;
}
.sc-cal-day-dot {
width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.sc-cal-day-dot-expense { background: var(--red); }
.sc-cal-day-dot-transfer { background: var(--amber); }
.sc-cal-day-dot-income { background: var(--green); }
/* ── Daily totals inside cell ───────────────────────────────────── */
.sc-cal-day-totals {
display: flex; flex-direction: column; gap: 1px;
}
.sc-cal-day-total-row {
font-size: .65rem; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-cal-day-total-row.debit { color: var(--red); }
.sc-cal-day-total-row.credit { color: var(--green); }
.sc-cal-day-total-row.bal { color: var(--muted); font-weight: 700; border-top: 1px dashed var(--border); padding-top: 1px; margin-top: 1px; }
/* ── Day detail panel ───────────────────────────────────────────── */
.sc-cal-detail {
padding: 16px 20px;
}
.sc-cal-detail-header {
display: flex; align-items: baseline; gap: 10px;
margin-bottom: 12px; padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.sc-cal-detail-date {
font-family: var(--font-serif); font-size: 1.05rem;
font-weight: 500; color: var(--text);
}
.sc-cal-detail-summary {
display: flex; gap: 12px; flex-wrap: wrap;
font-size: .78rem;
}
.sc-cal-detail-summary .debit { color: var(--red); font-weight: 700; }
.sc-cal-detail-summary .credit { color: var(--green); font-weight: 700; }
.sc-cal-detail-summary .bal { color: var(--text2); font-weight: 700; }
.sc-cal-detail-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 0; border-bottom: 1px solid var(--border);
}
.sc-cal-detail-item:last-child { border-bottom: none; }
.sc-cal-detail-type-icon {
width: 30px; height: 30px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: .9rem; flex-shrink: 0;
}
.sc-cal-detail-mid { flex: 1; min-width: 0; }
.sc-cal-detail-desc {
font-size: .85rem; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-cal-detail-meta {
font-size: .72rem; color: var(--muted); margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-cal-detail-amt {
font-size: .95rem; font-weight: 700; flex-shrink: 0;
text-align: right;
}
.sc-cal-detail-amt.debit { color: var(--red); }
.sc-cal-detail-amt.credit { color: var(--green); }
.sc-cal-detail-amt.transfer { color: var(--amber); }
.sc-cal-detail-action {
flex-shrink: 0;
}
/* ── Responsive: mobile ─────────────────────────────────────────── */
@media (max-width: 640px) {
.sc-cal-day {
min-height: 64px;
padding: 4px 3px 3px;
}
.sc-cal-day-num {
font-size: .72rem;
width: 20px; height: 20px;
}
.sc-cal-day--today .sc-cal-day-num {
width: 20px; height: 20px;
color: #fff !important;
}
.sc-cal-day-dot { width: 6px; height: 6px; }
.sc-cal-dots { gap: 2px; margin-bottom: 3px; }
.sc-cal-day-totals { display: none; } /* hide values on tiny screens, show in detail */
.sc-cal-month-label { font-size: .95rem; }
.sc-cal-dow { font-size: .65rem; padding: 8px 0; }
}
@media (max-width: 380px) {
.sc-cal-day { min-height: 52px; }
.sc-cal-day-dot { width: 5px; height: 5px; }
}
/* ── New transaction highlight ──────────────────────────────────────
.tx-row-new: entrance flash + sustained glow for newly saved rows.
Triggered by _goToSavedTransaction after insert.
Duration: 3 s total — 0.4 s pop-in, 2.6 s fade to normal.
─────────────────────────────────────────────────────────────────── */
@keyframes txRowEnter {
0% {
background: color-mix(in srgb, var(--accent) 28%, transparent);
box-shadow: inset 3px 0 0 var(--accent),
0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
transform: translateX(4px);
}
18% {
background: color-mix(in srgb, var(--accent) 22%, transparent);
box-shadow: inset 3px 0 0 var(--accent),
0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
transform: translateX(0);
}
100% {
background: transparent;
box-shadow: inset 3px 0 0 transparent, 0 0 0 0 transparent;
transform: translateX(0);
}
}
tr.tx-row-new {
animation: txRowEnter 3s cubic-bezier(.22,.68,0,1.2) forwards;
position: relative;
z-index: 1;
}
/* Keep the left border visible at rest after animation ends */
tr.tx-row-new td:first-child {
border-left: 3px solid var(--accent) !important;
}
/* ── Price card: Add to grocery list button ─────────────────────── */
.price-card-add-btn {
flex-shrink: 0;
width: 30px; height: 30px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface2);
color: var(--accent);
font-size: .95rem;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all .15s;
margin-left: 2px;
}
.price-card-add-btn:hover {
background: var(--accent-lt);
border-color: var(--accent);
transform: scale(1.08);
}
/* ── Forecast: BRL equivalent line — defined with amount-cell above ─── */
/* ── Dashboard: favorite account cards ──────────────────────────── */
.dash-acc-favs-grid {
display: flex;
flex-direction: column;
gap: 6px;
}
.dash-acc-fav-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 11px;
border-radius: var(--r-sm);
border: 1px solid var(--accent-lt);
background: var(--accent-lt);
cursor: pointer;
transition: background .15s, border-color .15s;
position: relative;
}
.dash-acc-fav-row::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--accent);
border-radius: var(--r-sm) 0 0 var(--r-sm);
}
.dash-acc-fav-row--hover {
background: color-mix(in srgb, var(--accent) 14%, transparent);
border-color: var(--accent);
}
/* ═══════════════════════════════════════════════════════════════════════
SETUP WIZARD
════════════════════════════════════════════════════════════════════════ */
.wz-modal {
background: var(--surface);
border-radius: var(--r-lg);
width: 100%;
max-width: 540px;
max-height: 92dvh;
display: flex;
flex-direction: column;
box-shadow: 0 24px 80px rgba(0,0,0,.35);
overflow: hidden;
}
.wz-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px 12px;
background: linear-gradient(160deg, #0d3d28 0%, #1d6b47 60%, #0e3520 100%); /* Option 2 green */
flex-shrink: 0;
}
.wz-close-btn {
background: rgba(255,255,255,.15); border: none; color: #fff;
width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
font-size: .85rem; display: flex; align-items: center; justify-content: center;
transition: background .15s;
}
.wz-close-btn:hover { background: rgba(255,255,255,.3); }
.wz-progress-wrap { padding: 12px 20px 0; flex-shrink: 0; }
.wz-progress-bar { height: 4px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.wz-progress-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width .4s ease; }
.wz-dots { display: flex; justify-content: center; gap: 8px; }
.wz-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--border); transition: all .25s;
}
.wz-dot--active { background: var(--accent); transform: scale(1.3); }
.wz-dot--done { background: var(--green); }
.wz-title-area { padding: 16px 20px 4px; flex-shrink: 0; }
.wz-title { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.wz-subtitle{ font-size: .83rem; color: var(--muted); margin: 0; }
.wz-body { flex: 1; overflow-y: auto; padding: 12px 20px; }
.wz-error { margin: 0 20px; padding: 8px 12px; background: var(--red-lt); border: 1px solid var(--red); border-radius: var(--r-sm); color: var(--red); font-size: .8rem; font-weight: 600; }
.wz-footer {
display: flex; align-items: center; gap: 8px;
padding: 12px 20px 16px;
border-top: 1px solid var(--border);
flex-shrink: 0;
}
.wz-footer .btn-primary { margin-left: auto; }
.wz-skip-btn { font-size: .78rem; color: var(--muted); }
/* Fields */
.wz-field { margin-bottom: 14px; }
.wz-label { display: block; font-size: .82rem; font-weight: 600; color: var(--text2); margin-bottom: 6px; }
.wz-hint { font-size: .73rem; color: var(--muted); margin-top: 4px; }
.wz-input { width: 100%; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: var(--r-sm); font-size: .88rem; font-family: var(--font-sans); color: var(--text); background: var(--surface); transition: border-color .15s; box-sizing: border-box; }
.wz-input:focus { border-color: var(--accent); outline: none; }
.wz-select { width: 100%; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: var(--r-sm); font-size: .85rem; font-family: var(--font-sans); background: var(--surface); color: var(--text); }
/* Members */
.wz-section-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 8px; }
.wz-member-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; min-height: 40px; }
.wz-empty-list { font-size: .78rem; color: var(--muted); padding: 8px; text-align: center; border: 1px dashed var(--border); border-radius: var(--r-sm); }
.wz-member-chip { display: flex; align-items: center; gap: 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; }
.wz-member-emoji { font-size: 1rem; flex-shrink: 0; }
.wz-member-info { flex: 1; min-width: 0; font-size: .8rem; }
.wz-member-info strong { display: block; color: var(--text); }
.wz-member-info span { color: var(--muted); font-size: .72rem; }
.wz-remove-btn { background: none; border: none; cursor: pointer; color: var(--muted); font-size: .9rem; padding: 2px 4px; border-radius: 4px; transition: color .12s; }
.wz-remove-btn:hover { color: var(--red); }
.wz-add-btn { background: none; border: 1px dashed var(--border); border-radius: 8px; padding: 6px 12px; font-size: .78rem; font-family: var(--font-sans); color: var(--accent); cursor: pointer; width: 100%; transition: background .12s; }
.wz-add-btn:hover { background: var(--accent-lt); }
.wz-member-form { margin-top: 8px; padding: 10px; background: var(--accent-lt); border-radius: 8px; border: 1px solid var(--border); }
/* Invites */
.wz-invite-list { display: flex; flex-direction: column; gap: 10px; }
.wz-invite-row { padding: 10px 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; }
.wz-invite-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.wz-invite-toggle input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.wz-invite-name { font-size: .875rem; font-weight: 600; color: var(--text); flex: 1; }
.wz-invite-rel { font-size: .72rem; color: var(--muted); }
.wz-invite-email { margin-top: 8px; font-size: .82rem; }
/* Expenses */
.wz-expense-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.wz-expense-card {
border: 1.5px solid var(--border); border-radius: 12px;
padding: 12px 10px; text-align: center; cursor: pointer;
transition: all .15s; background: var(--surface2);
}
.wz-expense-card:hover { border-color: var(--accent); background: var(--accent-lt); }
.wz-expense-card--selected { border-color: var(--accent); background: var(--accent-lt); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); }
.wz-expense-emoji { font-size: 1.6rem; margin-bottom: 4px; }
.wz-expense-label { font-size: .72rem; font-weight: 600; color: var(--text2); line-height: 1.3; margin-bottom: 6px; }
.wz-expense-amt { width: 100%; padding: 5px 6px; border: 1px solid var(--accent); border-radius: 6px; font-size: .78rem; text-align: center; background: var(--surface); font-family: var(--font-sans); color: var(--text); }
/* Status list (step 5) */
.wz-status-list { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }
.wz-status-row { font-size: .88rem; color: var(--text2); padding: 10px 14px; background: var(--surface2); border-radius: 8px; border-left: 3px solid var(--border); }
@media (max-width: 540px) {
.wz-modal { max-height: 100dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; align-self: flex-end; }
.wz-expense-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ── Wizard guide cards (steps 5–7) ─────────────────────────────────── */
.wz-guide-card {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 16px;
}
.wz-guide-steps {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 14px;
}
.wz-guide-step {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: .85rem;
color: var(--text2);
line-height: 1.45;
}
.wz-guide-num {
width: 22px; height: 22px;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-size: .72rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
margin-top: 1px;
}
.wz-guide-tip {
background: color-mix(in srgb, var(--amber) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
border-radius: var(--r-sm);
padding: 9px 12px;
font-size: .78rem;
color: var(--amber);
line-height: 1.5;
}
.wz-guide-warn {
background: var(--red-lt);
border: 1px solid var(--red);
border-radius: var(--r-sm);
padding: 8px 12px;
font-size: .78rem;
color: var(--red);
margin-top: 10px;
}
.wz-guide-sections { }
.wz-guide-section-block {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 12px 14px;
}
.wz-guide-section-title {
font-size: .8rem;
font-weight: 700;
color: var(--text);
margin-bottom: 10px;
}
/* Shrink dots on 8-step wizard for mobile */
@media (max-width: 400px) {
.wz-dot { width: 6px; height: 6px; }
.wz-dots { gap: 5px; }
}
/* ── Transaction Detail Modal — mobile-friendly footer ─────────────────── */
.tx-detail-footer {
padding: 10px 16px;
padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.tx-detail-footer-main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
}
.tx-detail-close-btn {
font-size: .82rem;
padding: 7px 14px;
white-space: nowrap;
flex-shrink: 0;
}
.tx-detail-action-btn {
padding: 7px 10px;
font-size: 1rem;
flex-shrink: 0;
min-width: 36px;
display: flex;
align-items: center;
justify-content: center;
}
/* ── FMC Multi-select Chip Picker ─────────────────────────────────────────── */
.fmc-picker {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px 0 4px;
}
.fmc-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 10px;
border: 1.5px solid var(--border);
border-radius: 20px;
background: var(--surface2);
color: var(--text2);
font-size: .8rem;
font-weight: 500;
cursor: pointer;
transition: all .15s;
white-space: nowrap;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.fmc-chip:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-lt);
}
.fmc-chip.selected {
border-color: var(--accent);
background: var(--accent);
color: #fff;
font-weight: 600;
}
.fmc-chip-all {
border-style: dashed;
}
.fmc-chip-all.selected {
border-style: solid;
background: var(--surface2);
color: var(--muted);
border-color: var(--border);
font-weight: 400;
}
.fmc-group-label {
width: 100%;
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
margin-top: 4px;
margin-bottom: -2px;
}
.fmc-picker-empty {
font-size: .82rem;
color: var(--muted);
font-style: italic;
padding: 6px 0;
}
/* Picker container in modal */
.fmc-picker-container {
border: 1px solid var(--border);
border-radius: var(--r-sm, 8px);
padding: 6px 10px 8px;
background: var(--surface);
min-height: 44px;
}
.fmc-picker-hint { font-size:.75rem; color:var(--muted); font-style:italic; padding:2px 4px; }
/* ── Family copy action button ───────────────────────────────────────────── */
.fam-action-copy {
color: var(--accent);
border-color: var(--accent);
grid-column: 1 / -1; /* full width — stands out from destructive actions */
}
.fam-action-copy:hover {
background: var(--accent-lt);
}
/* ── Scheduled card member chips ─────────────────────────────────────────── */
.sc-member-chips {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 4px;
}
.sc-member-chip {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 12px;
background: var(--accent-lt);
color: var(--accent);
border: 1px solid var(--accent);
font-size: .7rem;
font-weight: 600;
white-space: nowrap;
}
/* ═══════════════════════════════════════════════════════════════════
INVESTMENTS MODULE
═══════════════════════════════════════════════════════════════════ */
.inv-summary-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
margin-bottom: 20px;
}
.inv-kpi-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-sm, 8px);
padding: 14px 16px;
}
.inv-kpi-label {
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
margin-bottom: 6px;
}
.inv-kpi-value {
font-size: 1.05rem;
font-weight: 700;
color: var(--text);
font-family: var(--font-serif, monospace);
}
.inv-actions-bar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.inv-portfolio-card {
margin-bottom: 20px;
}
.inv-positions-table {
font-size: .82rem;
overflow-x: auto;
}
.inv-pos-header {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 80px;
gap: 8px;
padding: 8px 12px;
background: var(--surface2);
border-radius: var(--r-sm, 6px);
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--muted);
margin-bottom: 4px;
}
.inv-pos-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 80px;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
align-items: center;
transition: background .1s;
}
.inv-pos-row:hover { background: var(--surface2); }
.inv-pos-row:last-child { border-bottom: none; }
.inv-pos-ticker {
font-weight: 700;
font-size: .9rem;
color: var(--text);
display: block;
}
.inv-pos-desc {
font-size: .72rem;
color: var(--muted);
display: block;
margin-top: 2px;
}
.inv-type-group { margin-bottom: 8px; }
.inv-type-label {
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
padding: 6px 12px 2px;
}
.inv-price-stale { color: var(--amber, #b45309); }
@media (max-width: 640px) {
.inv-pos-header { display: none; }
.inv-pos-row {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 4px;
}
.inv-pos-name { grid-column: 1 / -1; }
}
/* ── Transaction row typography refresh ────────────────────────────────────
Larger description, category (with icon) and payee. Proportions maintained.
─────────────────────────────────────────────────────────────────────────── */
/* Description */
.tx-v2-title {
font-size: .97rem !important;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Category row: icon + name */
.tx-v2-category {
display: flex;
align-items: center;
gap: 4px;
font-size: .82rem !important;
color: var(--text2);
line-height: 1.25;
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tx-v2-cat-icon {
font-size: .82rem;
flex-shrink: 0;
line-height: 1;
}
/* Payee / account meta */
.tx-v2-pay {
font-size: .79rem !important;
color: var(--muted);
}
.tx-v2-meta {
margin-top: 1px;
font-size: .79rem;
}
.tx-v2-acct {
font-size: .79rem;
color: var(--muted);
}
/* Mobile: scale proportionally */
@media (max-width: 640px) {
.tx-v2-title { font-size: .93rem !important; }
.tx-v2-category { font-size: .78rem !important; }
.tx-v2-cat-icon { font-size: .78rem; }
.tx-v2-pay { font-size: .75rem !important; }
.tx-v2-meta { font-size: .75rem; }
}
/* ── Favourite account cards — fintech style ───────────────────────────────
Grid of cards with gradient, large balance, account colour accent.
──────────────────────────────────────────────────────────────────────────── */
.dash-favs-section {
padding: 4px 0 12px;
}
.dash-favs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 12px;
}
.dash-fav-card {
position: relative;
overflow: hidden;
border-radius: 14px;
padding: 16px 18px 18px;
cursor: pointer;
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--card-clr, #2a6049) 90%, #000) 0%,
color-mix(in srgb, var(--card-clr, #2a6049) 72%, #000) 100%
);
color: #fff;
transition: transform .18s ease, box-shadow .18s ease;
box-shadow:
0 4px 16px color-mix(in srgb, var(--card-clr, #2a6049) 35%, transparent),
0 1px 3px rgba(0,0,0,.18);
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.dash-fav-card:hover {
transform: translateY(-2px) scale(1.01);
box-shadow:
0 8px 28px color-mix(in srgb, var(--card-clr, #2a6049) 45%, transparent),
0 2px 6px rgba(0,0,0,.22);
}
.dash-fav-card:active {
transform: translateY(0) scale(.98);
}
/* Decorative shine overlay */
.dash-fav-card__shine {
pointer-events: none;
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(255,255,255,.13) 0%,
rgba(255,255,255,0) 55%
);
border-radius: inherit;
}
/* Decorative large circle in bottom-right */
.dash-fav-card::after {
content: '';
position: absolute;
right: -30px;
bottom: -30px;
width: 110px;
height: 110px;
border-radius: 50%;
background: rgba(255,255,255,.07);
pointer-events: none;
}
.dash-fav-card__top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
/* Icon pill */
.dash-fav-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(255,255,255,.18);
flex-shrink: 0;
}
.dash-fav-card__icon .acc-icon {
color: #fff !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Account type badge */
.dash-fav-card__type {
font-size: .62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
opacity: .75;
background: rgba(255,255,255,.15);
padding: 2px 7px;
border-radius: 20px;
white-space: nowrap;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
}
.dash-fav-card__name {
font-size: .8rem;
font-weight: 600;
opacity: .85;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 4px;
letter-spacing: .01em;
}
.dash-fav-card__balance {
font-size: 1.35rem;
font-weight: 700;
font-family: var(--font-serif, monospace);
font-variant-numeric: tabular-nums;
letter-spacing: -.02em;
line-height: 1.15;
color: #fff;
}
.dash-fav-card__balance.neg {
color: #fca5a5;
}
.dash-fav-brl {
font-size: .7rem;
opacity: .65;
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
/* Confirmed-only balance line on fav cards */
.dash-fav-card__confirmed {
display: flex;
align-items: baseline;
gap: 4px;
font-size: .72rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: rgba(255,255,255,.7);
margin-top: 4px;
padding-top: 4px;
border-top: 1px solid rgba(255,255,255,.12);
}
.dash-fav-card__confirmed.neg {
color: rgba(252,165,165,.8);
}
.dash-fav-card__confirmed-label {
font-size: .6rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
opacity: .65;
white-space: nowrap;
}
/* Mobile: 2-col on small screens, 1-col on very small */
@media (max-width: 480px) {
.dash-favs-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.dash-fav-card {
padding: 13px 14px 15px;
}
.dash-fav-card__balance { font-size: 1.1rem; }
.dash-fav-card__icon { width: 30px; height: 30px; border-radius: 8px; }
}
/* ══════════════════════════════════════════════════════════════════════
PRICES PAGE — Modern grid redesign
══════════════════════════════════════════════════════════════════════ */
/* Grid container */
.px-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
}
/* Card */
.px-card {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 14px;
padding: 14px 15px 12px;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
overflow: hidden;
}
.px-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--px-clr, var(--accent));
border-radius: 14px 14px 0 0;
opacity: .7;
}
.px-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,.09);
border-color: var(--px-clr, var(--accent));
}
.px-card:active { transform: scale(.98); }
/* Top row: avatar + category badge + cart btn */
.px-card-top {
display: flex;
align-items: center;
gap: 7px;
}
.px-avatar {
width: 34px;
height: 34px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: .72rem;
font-weight: 800;
letter-spacing: -.02em;
flex-shrink: 0;
}
.px-cat-badge {
font-size: .65rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
flex: 1;
}
.px-cart-btn {
margin-left: auto;
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface2);
font-size: .85rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all .15s;
color: var(--accent);
}
.px-cart-btn:hover {
background: var(--accent-lt);
border-color: var(--accent);
transform: scale(1.1);
}
/* Item name */
.px-name {
font-size: .92rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: baseline;
gap: 5px;
}
.px-unit {
font-size: .68rem;
font-weight: 500;
color: var(--muted);
background: var(--surface2);
padding: 1px 5px;
border-radius: 4px;
flex-shrink: 0;
}
.px-desc {
font-size: .73rem;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Prices row */
.px-prices {
display: flex;
gap: 0;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
margin-top: 2px;
}
.px-price-col {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 7px 4px 6px;
border-right: 1px solid var(--border);
background: var(--surface2);
}
.px-price-col:last-child { border-right: none; }
.px-price-lbl {
font-size: .6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
margin-bottom: 3px;
display: flex;
align-items: center;
gap: 2px;
white-space: nowrap;
}
.px-price-val {
font-size: .82rem;
font-weight: 700;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.px-price-val.accent { color: var(--accent); }
/* Trend indicators */
.px-trend { font-size: .7rem; font-weight: 700; }
.px-trend.up { color: var(--red); }
.px-trend.dn { color: var(--green); }
.px-trend.eq { color: var(--muted); }
/* Footer progress bar (record count visualisation) */
.px-card-footer { margin-top: 2px; }
.px-progress {
height: 3px;
background: var(--border);
border-radius: 99px;
overflow: hidden;
}
.px-progress-bar {
height: 100%;
border-radius: 99px;
opacity: .5;
transition: width .4s ease;
}
/* Mobile: 2-col */
@media (max-width: 600px) {
.px-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.px-card { padding: 12px 12px 10px; }
.px-avatar { width: 28px; height: 28px; font-size: .65rem; }
.px-name { font-size: .84rem; }
.px-price-val { font-size: .76rem; }
.px-price-lbl { font-size: .55rem; }
}
@media (max-width: 380px) {
.px-grid { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════════════════════════════
SCHEDULED — Upcoming panel redesign (sup-*)
══════════════════════════════════════════════════════════════════════ */
/* Day group wrapper */
/* ══════════════════════════════════════════════════════════════════════════
SCHEDULED UPCOMING — Próximos 10 dias redesign 2026
Layout: card por data com pill de dia + linha de items bem diagramada
══════════════════════════════════════════════════════════════════════════ */
.sup-group {
margin-bottom: 8px;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--border);
background: var(--surface);
box-shadow: 0 1px 4px rgba(0,0,0,.06);
transition: box-shadow .15s;
}
.sup-group:hover { box-shadow: 0 3px 12px rgba(0,0,0,.1); }
/* Day header row — clickable */
.sup-group-hdr {
display: flex;
align-items: center;
justify-content: space-between;
padding: 11px 16px;
cursor: pointer;
user-select: none;
gap: 10px;
background: var(--surface2);
border-bottom: 1px solid transparent;
transition: background .12s;
}
.sup-group-hdr:hover { background: var(--bg2); }
.sup-group-left {
display: flex;
align-items: center;
gap: 12px;
}
/* ── Date pill: calendar square ────────────────────────────────────────── */
.sup-day-pill {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 44px;
width: auto; /* deixa crescer quando necessário */
padding: 5px 8px 4px;
border-radius: 11px;
background: color-mix(in srgb, var(--accent) 8%, var(--surface));
border: 1.5px solid color-mix(in srgb, var(--accent) 22%, var(--border));
line-height: 1;
flex-shrink: 0;
}
.sup-day-pill--today {
background: var(--accent);
border-color: var(--accent);
box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 40%, transparent);
padding: 6px 12px; /* mais padding horizontal para "Hoje" */
}
.sup-day-pill--today span {
color: #fff !important;
font-size: .78rem !important;
font-weight: 800 !important;
white-space: nowrap;
}
.sup-day-pill--tmrw {
background: color-mix(in srgb, var(--accent) 10%, var(--surface));
border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
padding: 6px 10px; /* espaço para "Amanhã" sem estourar */
}
.sup-day-pill--tmrw span {
color: var(--accent) !important;
font-size: .74rem !important;
font-weight: 800 !important;
white-space: nowrap;
}
.sup-day-num {
font-size: 1.05rem;
font-weight: 800;
color: color-mix(in srgb, var(--accent) 75%, var(--text));
display: block;
text-align: center;
line-height: 1.1;
}
.sup-day-mon {
font-size: .58rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--muted);
display: block;
text-align: center;
margin-top: 2px;
}
/* Day label + dow */
.sup-group-dow {
font-size: .88rem;
font-weight: 700;
color: var(--text);
line-height: 1.2;
}
.sup-group-meta {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.sup-day-total {
font-size: .85rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: -.01em;
}
.sup-day-total.pos { color: var(--green); }
.sup-day-total.neg { color: var(--red); }
.sup-day-count {
font-size: .68rem;
font-weight: 700;
color: var(--muted);
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 20px;
padding: 2px 8px;
min-width: 22px;
text-align: center;
}
/* ── Rows container ────────────────────────────────────────────────────── */
.sup-rows {
border-top: 1px solid var(--border);
}
/* ── Individual item ───────────────────────────────────────────────────── */
.sup-item {
display: flex;
align-items: center;
gap: 0;
padding: 10px 16px;
border-bottom: 1px solid var(--border);
transition: background .1s;
position: relative;
}
.sup-item:last-child { border-bottom: none; }
.sup-item--today {
background: color-mix(in srgb, var(--amber) 5%, transparent);
}
.sup-item:hover { background: color-mix(in srgb, var(--accent) 4%, var(--surface2)); }
/* Left colored bar accent on expense/income */
.sup-item::before {
content: '';
position: absolute;
left: 0;
top: 20%;
bottom: 20%;
width: 3px;
border-radius: 0 3px 3px 0;
opacity: 0;
}
.sup-item:has(.sup-amt.neg)::before { background: var(--red); opacity: .5; }
.sup-item:has(.sup-amt.pos)::before { background: var(--green); opacity: .5; }
/* Type icon — colored circle */
.sup-icon {
width: 34px;
height: 34px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: .9rem;
font-weight: 700;
flex-shrink: 0;
margin-right: 12px;
line-height: 1;
}
/* Item body */
.sup-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
padding-right: 10px;
}
.sup-desc {
font-size: .875rem;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
gap: 5px;
}
.sup-acct {
font-size: .7rem;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
gap: 4px;
}
.sup-arrow {
color: var(--muted);
font-size: .68rem;
opacity: .7;
}
.sup-manual-badge {
font-size: .59rem;
font-weight: 700;
color: var(--amber);
background: var(--amber-lt);
border: 1px solid color-mix(in srgb, var(--amber) 28%, transparent);
border-radius: 8px;
padding: 1px 6px;
white-space: nowrap;
flex-shrink: 0;
}
.sup-pending-badge {
font-size: .59rem;
font-weight: 700;
color: #b45309;
background: #fef3c7;
border: 1px solid #fcd34d;
border-radius: 8px;
padding: 1px 6px;
white-space: nowrap;
flex-shrink: 0;
}
/* Right side: amount + action buttons */
.sup-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
flex-shrink: 0;
}
.sup-amt {
font-size: .92rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
white-space: nowrap;
letter-spacing: -.01em;
}
.sup-amt.pos { color: var(--green); }
.sup-amt.neg { color: var(--red); }
.sup-actions {
display: flex;
align-items: center;
gap: 4px;
}
/* Ignore button */
.sup-ignore-btn {
width: 24px;
height: 24px;
border-radius: 7px;
border: 1px solid var(--border);
background: transparent;
color: var(--muted);
font-size: .65rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all .12s;
line-height: 1;
}
.sup-ignore-btn:hover {
background: var(--red-lt, #fee2e2);
border-color: var(--red);
color: var(--red);
}
/* Register button */
.sup-register-btn {
height: 24px;
padding: 0 10px;
border-radius: 7px;
border: none;
background: var(--accent);
color: #fff;
font-size: .72rem;
font-weight: 700;
cursor: pointer;
transition: background .12s, transform .08s;
white-space: nowrap;
display: flex;
align-items: center;
gap: 3px;
box-shadow: 0 1px 4px color-mix(in srgb, var(--accent) 30%, transparent);
}
.sup-register-btn:hover { background: var(--accent2, var(--accent)); filter: brightness(1.08); }
.sup-register-btn:active { transform: scale(.93); }
/* ── Today group: highlighted header ───────────────────────────────────── */
.sup-group:has(.sup-item--today) .sup-group-hdr {
background: color-mix(in srgb, var(--accent) 9%, var(--surface2));
border-bottom: 2px solid var(--accent);
}
.sup-group:has(.sup-item--today) .sup-group-dow { color: var(--accent); }
/* Upcoming panel header accent */
#scUpcomingPanel .sc-panel__header {
background: linear-gradient(135deg,
color-mix(in srgb, var(--accent) 10%, var(--surface2)) 0%,
var(--surface2) 100%);
border-left: 3px solid var(--accent);
}
#scUpcomingPanel .sc-panel__title { color: var(--accent); }
#scUpcomingPanel .sc-panel__badge {
background: var(--accent-lt);
color: var(--accent);
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
/* ── Mobile tweaks ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
.sup-group-hdr { padding: 9px 12px; }
.sup-item { padding: 9px 12px; }
.sup-desc { font-size: .82rem; }
.sup-amt { font-size: .85rem; }
.sup-icon { width: 30px; height: 30px; font-size: .82rem; margin-right: 10px; }
.sup-day-pill { width: 38px; min-width: 38px; }
.sup-day-num { font-size: .95rem; }
}
/* ── Mobile: improved scheduled layout ────────────────────────────────── */
@media (max-width: 800px) {
/* Compact page header — stack to avoid horizontal overflow */
.sc-page-header {
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
width: 100%;
max-width: 100%;
overflow: hidden;
box-sizing: border-box;
}
.sc-page-header__left {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
}
.sc-page-header__right {
flex-shrink: 0;
margin-left: 0;
}
.sc-view-toggle {
width: 100%;
max-width: 100%;
box-sizing: border-box;
gap: 2px;
}
.sc-view-btn { padding: 5px 8px; font-size: .75rem; }
.sc-view-lbl { display: none; } /* icons only on mobile */
/* Mobile KPI bar — more compact, green accent on upcoming */
.sc-mobile-kpis { gap: 6px; margin-bottom: 10px; }
.sc-mkpi {
padding: 7px 8px;
border-radius: 10px;
}
.sc-mkpi-val { font-size: .82rem; }
.sc-mkpi-lbl { font-size: .58rem; }
/* Upcoming panel on mobile: green card with accent left border */
#scUpcomingPanel {
background: color-mix(in srgb, var(--accent) 4%, var(--surface));
border: 1.5px solid color-mix(in srgb, var(--accent) 30%, var(--border));
border-radius: 14px;
overflow: hidden;
margin-bottom: 16px;
}
#scUpcomingPanel .sc-panel__header {
padding: 10px 14px 8px;
border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
background: color-mix(in srgb, var(--accent) 10%, var(--surface2));
}
#scUpcomingPanel .sc-panel__body { overflow: visible; }
/* sup-group inside mobile: no extra border (panel already has one) */
.sc-panel #scUpcomingPanel .sup-group {
border-left: none;
border-right: none;
border-radius: 0;
margin-bottom: 0;
border-bottom: 1px solid color-mix(in srgb, var(--accent) 15%, var(--border));
}
.sc-panel #scUpcomingPanel .sup-group:last-child { border-bottom: none; }
.sc-panel #scUpcomingPanel .sup-group-hdr {
background: transparent;
padding: 8px 14px;
}
.sc-panel #scUpcomingPanel .sup-item { padding: 8px 14px; }
/* Item today highlight: green tint */
.sup-item--today {
background: color-mix(in srgb, var(--accent) 7%, transparent) !important;
border-left: 2px solid var(--accent);
}
/* Register button: bigger tap target on mobile */
.sup-register-btn {
height: 28px;
padding: 0 12px;
font-size: .74rem;
border-radius: 8px;
}
.sup-ignore-btn {
width: 26px;
height: 26px;
border-radius: 7px;
font-size: .7rem;
}
/* Recurrents section on mobile: cleaner header */
.sc-mobile-recurrents-label {
padding: 14px 0 6px;
font-size: .68rem;
letter-spacing: .08em;
}
}
/* ══════════════════════════════════════════════════════════════════════
CATEGORIES — Modern redesign (cat-group / cat-sub-*)
══════════════════════════════════════════════════════════════════════ */
/* Wrapper per parent category */
.cat-group {
margin-bottom: 10px;
border-radius: 12px;
overflow: hidden;
border: 1.5px solid var(--border);
background: var(--surface);
transition: box-shadow .15s;
}
.cat-group:hover {
box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
/* Coloured accent bar on the left of each group */
.cat-group::before {
content: '';
display: block;
height: 3px;
background: var(--cat-clr, var(--accent));
opacity: .6;
}
/* Parent header row */
.cat-group-hdr {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px 10px;
background: var(--surface);
cursor: default;
position: relative;
transition: background .12s;
}
.cat-group-hdr:hover { background: var(--surface2); }
.cat-group-hdr:hover .cat-inline-actions { opacity: 1; }
/* Parent icon — coloured circle */
.cat-group-icon {
width: 32px;
height: 32px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: .95rem;
flex-shrink: 0;
background: color-mix(in srgb, var(--cat-clr, var(--accent)) 14%, transparent);
border: 1.5px solid color-mix(in srgb, var(--cat-clr, var(--accent)) 30%, transparent);
}
/* Parent name */
.cat-group-name {
font-size: .92rem;
font-weight: 700;
color: var(--text);
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: text;
}
/* Meta pills row */
.cat-group-meta {
display: flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
}
.cat-sub-pill {
font-size: .64rem;
font-weight: 700;
background: color-mix(in srgb, var(--cat-clr, var(--accent)) 12%, transparent);
color: var(--cat-clr, var(--accent));
border: 1px solid color-mix(in srgb, var(--cat-clr, var(--accent)) 25%, transparent);
border-radius: 20px;
padding: 1px 7px;
white-space: nowrap;
}
.cat-tx-pill {
font-size: .64rem;
font-weight: 600;
background: var(--blue-lt, #e8f0fb);
color: var(--blue, #1e5ba8);
border-radius: 20px;
padding: 2px 7px;
cursor: pointer;
white-space: nowrap;
}
/* Subcategories container */
.cat-subs {
border-top: 1px solid var(--border);
background: var(--surface2);
}
/* Individual subcategory row */
.cat-sub-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px 8px 20px;
border-bottom: 1px solid var(--border);
transition: background .1s;
position: relative;
cursor: default;
}
.cat-sub-row:last-child { border-bottom: none; }
.cat-sub-row:hover { background: var(--bg2); }
.cat-sub-row:hover .cat-inline-actions { opacity: 1; }
/* Connector line from parent to sub */
.cat-sub-connector {
width: 16px;
height: 16px;
flex-shrink: 0;
border-left: 2px solid var(--border2);
border-bottom: 2px solid var(--border2);
border-radius: 0 0 0 4px;
margin-top: -8px;
align-self: center;
}
/* Sub icon — smaller, softer */
.cat-sub-icon {
width: 26px;
height: 26px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: .78rem;
flex-shrink: 0;
}
/* Sub name */
.cat-sub-name {
font-size: .85rem;
font-weight: 500;
color: var(--text2);
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: text;
}
/* Mobile */
@media (max-width: 480px) {
.cat-group-hdr { padding: 9px 12px 8px; gap: 8px; }
.cat-group-icon { width: 28px; height: 28px; font-size: .85rem; }
.cat-group-name { font-size: .86rem; }
.cat-sub-row { padding: 7px 12px 7px 16px; }
.cat-sub-name { font-size: .8rem; }
}
/* ══════════════════════════════════════════════════════════════════════
REPORTS PAGE — Fintech redesign
══════════════════════════════════════════════════════════════════════ */
/* ── Page header ── */
.rpt-page-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
/* ── View tabs ── */
.rpt-view-tabs {
display: flex;
gap: 3px;
background: var(--surface2);
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 3px;
}
.rpt-view-tab {
display: flex;
align-items: center;
gap: 5px;
padding: 7px 14px;
border-radius: 7px;
border: none;
background: transparent;
color: var(--muted);
font-size: .8rem;
font-weight: 600;
cursor: pointer;
transition: all .15s;
font-family: var(--font-sans);
white-space: nowrap;
}
.rpt-view-tab:hover {
color: var(--text);
background: var(--surface);
}
.rpt-view-tab.active {
background: var(--accent);
color: #fff;
box-shadow: 0 2px 8px rgba(42,96,73,.35);
}
/* ── Filter toggle button ── */
.rpt-filter-wrap { position: relative; }
.rpt-filter-toggle {
display: flex;
align-items: center;
gap: 7px;
padding: 8px 14px;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--r-sm);
font-size: .8rem;
font-weight: 600;
color: var(--text2);
cursor: pointer;
transition: border-color .12s, color .12s;
width: 100%;
}
.rpt-filter-toggle:hover {
border-color: var(--accent);
color: var(--accent);
}
/* ── Export toolbar ── */
.rpt-toolbar {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--r-sm);
padding: 8px 14px;
margin-bottom: 16px;
}
.rpt-export-group {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.rpt-export-btn {
display: flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
border-radius: 7px;
border: 1.5px solid var(--border);
background: var(--surface2);
color: var(--text2);
font-size: .77rem;
font-weight: 600;
cursor: pointer;
transition: all .13s;
font-family: var(--font-sans);
white-space: nowrap;
}
.rpt-export-btn:hover {
background: var(--accent-lt);
border-color: var(--accent);
color: var(--accent);
transform: translateY(-1px);
}
.rpt-export-btn:active {
transform: translateY(0);
}
/* ── KPI cards ── */
.rpt-kpi {
position: relative;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 12px;
padding: 14px 16px 12px;
overflow: hidden;
transition: box-shadow .15s;
}
.rpt-kpi::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--accent);
border-radius: 12px 12px 0 0;
}
.rpt-kpi--inc::before { background: var(--green); }
.rpt-kpi--exp::before { background: var(--red); }
.rpt-kpi--bal::before { background: var(--accent); }
.rpt-kpi--bal.pos::before { background: var(--green); }
.rpt-kpi--bal.neg::before { background: var(--red); }
.rpt-kpi-label {
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--muted);
margin-bottom: 6px;
}
.rpt-kpi-value {
font-size: 1.15rem;
font-weight: 700;
font-family: var(--font-serif);
font-variant-numeric: tabular-nums;
color: var(--text);
line-height: 1.2;
}
.rpt-kpi--inc .rpt-kpi-value { color: var(--green); }
.rpt-kpi--exp .rpt-kpi-value { color: var(--red); }
.rpt-kpi--bal.pos .rpt-kpi-value { color: var(--green); }
.rpt-kpi--bal.neg .rpt-kpi-value { color: var(--red); }
/* Reuse grid from existing report-kpi-grid */
#reportKpis {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
margin-bottom: 16px;
}
/* ── Chart cards ── */
#reportRegularView .card {
border-radius: 14px;
border: 1.5px solid var(--border);
}
#reportRegularView .card-header {
padding: 14px 18px 10px;
}
#reportRegularView .card-title {
font-size: .85rem;
font-weight: 700;
letter-spacing: .01em;
}
/* ── Mobile ── */
@media (max-width: 600px) {
.rpt-view-tab { padding: 6px 10px; font-size: .74rem; }
.rpt-kpi-value { font-size: 1rem; }
.rpt-export-btn { padding: 5px 9px; font-size: .72rem; }
}
/* ══════════════════════════════════════════════════════════════════════
LOGIN PAGE — Logo animations
══════════════════════════════════════════════════════════════════════ */
/* Entrance: drop in + fade */
@keyframes loginLogoIn {
0% { opacity: 0; transform: scale(.6) translateY(-20px); filter: blur(8px); }
60% { opacity: 1; transform: scale(1.06) translateY(0); filter: blur(0); }
80% { transform: scale(.97); }
100% { transform: scale(1); }
}
/* Subtle breathing pulse while idle on login screen */
@keyframes loginLogoPulse {
0%,100% { filter: drop-shadow(0 0 0px rgba(42,180,100,0)); transform: scale(1); }
50% { filter: drop-shadow(0 0 18px rgba(42,180,100,.5)); transform: scale(1.03); }
}
/* Exit: zoom out + blur when login succeeds */
@keyframes loginLogoExit {
0% { opacity: 1; transform: scale(1); filter: blur(0); }
100% { opacity: 0; transform: scale(1.6); filter: blur(12px); }
}
.login-logo-anim {
transform-origin: center center;
}
.login-logo-anim.exiting {
animation: none !important;
}
#loginScreen > div {
animation: none !important;
}
/* ════════ WINDOWS LOGIN SAFE MODE ════════ */
html.platform-windows .auth-screen,
html.platform-windows #authScreen {
background: #16301f !important;
min-height: 100vh;
min-height: 100dvh;
padding: 20px;
overflow: auto;
isolation: isolate;
}
html.platform-windows .auth-card {
background: #ffffff !important;
border: 1px solid rgba(22,48,31,.12);
border-radius: 18px;
box-shadow: 0 8px 24px rgba(0,0,0,.14) !important;
max-width: 420px;
width: 100%;
contain: layout paint;
}
html.platform-windows .auth-logo,
html.platform-windows .auth-title,
html.platform-windows .auth-sub,
html.platform-windows .auth-field,
html.platform-windows .auth-btn,
html.platform-windows .auth-change-pw,
html.platform-windows .auth-error {
transform: none !important;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
animation: none !important;
transition: none !important;
will-change: auto !important;
backface-visibility: hidden;
}
html.platform-windows .auth-logo img,
html.platform-windows #authLogoImg {
content-visibility: auto;
contain: paint;
filter: none !important;
image-rendering: auto;
}
html.platform-windows .auth-title,
html.platform-windows .auth-sub,
html.platform-windows .auth-field label,
html.platform-windows .auth-field input,
html.platform-windows .auth-btn,
html.platform-windows .auth-change-pw,
html.platform-windows .auth-error {
font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
}
html.platform-windows .auth-field input {
background: #ffffff !important;
border: 1px solid #d7ddd9 !important;
box-shadow: none !important;
}
html.platform-windows .auth-field input:focus {
border-color: #2a6049 !important;
box-shadow: 0 0 0 2px rgba(42,96,73,.10) !important;
}
html.platform-windows .auth-btn:hover,
html.platform-windows .auth-btn:active {
background: #2a6049 !important;
}
html.platform-windows .auth-card,
html.platform-windows .auth-card * {
text-shadow: none !important;
}
@media (prefers-reduced-motion: reduce) {
.auth-screen, .auth-screen *, #authScreen, #authScreen * {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
}
/* HARD STOP FOR WINDOWS LOGIN RENDER FLICKER */
html.platform-windows #loginScreen,
html.ft-platform-windows #loginScreen,
body.platform-windows #loginScreen,
body.ft-platform-windows #loginScreen,
#loginScreen.platform-windows,
#loginScreen.ft-platform-windows {
background: #16301f !important;
background-image: none !important;
isolation: isolate;
}
html.platform-windows #loginScreen *,
html.ft-platform-windows #loginScreen *,
body.platform-windows #loginScreen *,
body.ft-platform-windows #loginScreen *,
#loginScreen.platform-windows *,
#loginScreen.ft-platform-windows * {
animation: none !important;
transition: none !important;
transform: none !important;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
will-change: auto !important;
}
html.platform-windows #loginScreen > div,
html.ft-platform-windows #loginScreen > div,
body.platform-windows #loginScreen > div,
body.ft-platform-windows #loginScreen > div,
#loginScreen.platform-windows > div,
#loginScreen.ft-platform-windows > div {
box-shadow: 0 8px 24px rgba(0,0,0,.16) !important;
contain: layout paint;
}
html.platform-windows #loginScreen input:focus,
html.ft-platform-windows #loginScreen input:focus,
body.platform-windows #loginScreen input:focus,
body.ft-platform-windows #loginScreen input:focus,
#loginScreen.platform-windows input:focus,
#loginScreen.ft-platform-windows input:focus {
outline: 2px solid rgba(42,96,73,.18) !important;
outline-offset: 0 !important;
box-shadow: none !important;
}
/* WINDOWS STABILITY PATCH */
html.platform-windows,
html.ft-platform-windows,
body.platform-windows,
body.ft-platform-windows {
scroll-behavior: auto !important;
}
html.platform-windows #loginScreen,
html.ft-platform-windows #loginScreen,
body.platform-windows #loginScreen,
body.ft-platform-windows #loginScreen,
#loginScreen.platform-windows,
#loginScreen.ft-platform-windows {
background: #16301f !important;
background-image: none !important;
}
html.platform-windows #loginScreen .login-card,
html.ft-platform-windows #loginScreen .login-card,
body.platform-windows #loginScreen .login-card,
body.ft-platform-windows #loginScreen .login-card,
#loginScreen.platform-windows .login-card,
#loginScreen.ft-platform-windows .login-card {
border: 1px solid rgba(22,48,31,.12) !important;
border-radius: 18px !important;
box-shadow: 0 8px 20px rgba(0,0,0,.16) !important;
contain: layout paint style;
}
html.platform-windows #loginScreen .login-input,
html.ft-platform-windows #loginScreen .login-input,
body.platform-windows #loginScreen .login-input,
body.ft-platform-windows #loginScreen .login-input,
#loginScreen.platform-windows .login-input,
#loginScreen.ft-platform-windows .login-input {
background: #fff !important;
border: 1px solid #d7ddd9 !important;
box-shadow: none !important;
caret-color: #16301f !important;
}
html.platform-windows #loginScreen .login-input:focus,
html.ft-platform-windows #loginScreen .login-input:focus,
body.platform-windows #loginScreen .login-input:focus,
body.ft-platform-windows #loginScreen .login-input:focus,
#loginScreen.platform-windows .login-input:focus,
#loginScreen.ft-platform-windows .login-input:focus {
border-color: #2a6049 !important;
outline: 2px solid rgba(42,96,73,.16) !important;
outline-offset: 0 !important;
box-shadow: none !important;
}
html.platform-windows #loginScreen .login-btn,
html.ft-platform-windows #loginScreen .login-btn,
body.platform-windows #loginScreen .login-btn,
body.ft-platform-windows #loginScreen .login-btn,
#loginScreen.platform-windows .login-btn,
#loginScreen.ft-platform-windows .login-btn {
background: #2a6049 !important;
background-image: none !important;
}
html.platform-windows .modal-overlay,
html.ft-platform-windows .modal-overlay,
body.platform-windows .modal-overlay,
body.ft-platform-windows .modal-overlay,
html.platform-windows .sidebar-overlay,
html.ft-platform-windows .sidebar-overlay,
body.platform-windows .sidebar-overlay,
body.ft-platform-windows .sidebar-overlay,
html.platform-windows #wizardOverlay,
html.ft-platform-windows #wizardOverlay,
body.platform-windows #wizardOverlay,
body.ft-platform-windows #wizardOverlay {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html.platform-windows .config-btn,
html.ft-platform-windows .config-btn,
body.platform-windows .config-btn,
body.ft-platform-windows .config-btn,
html.platform-windows .btn,
html.ft-platform-windows .btn,
body.platform-windows .btn,
body.ft-platform-windows .btn,
html.platform-windows .btn-icon,
html.ft-platform-windows .btn-icon,
body.platform-windows .btn-icon,
body.ft-platform-windows .btn-icon,
html.platform-windows .tab,
html.ft-platform-windows .tab,
body.platform-windows .tab,
body.ft-platform-windows .tab,
html.platform-windows .view-btn,
html.ft-platform-windows .view-btn,
body.platform-windows .view-btn,
body.ft-platform-windows .view-btn,
html.platform-windows .icon-tab,
html.ft-platform-windows .icon-tab,
body.platform-windows .icon-tab,
body.ft-platform-windows .icon-tab,
html.platform-windows .icon-option,
html.ft-platform-windows .icon-option,
body.platform-windows .icon-option,
body.ft-platform-windows .icon-option,
html.platform-windows .nav-item,
html.ft-platform-windows .nav-item,
body.platform-windows .nav-item,
body.ft-platform-windows .nav-item,
html.platform-windows .modal-close,
html.ft-platform-windows .modal-close,
body.platform-windows .modal-close,
body.ft-platform-windows .modal-close {
transition-property: background-color, border-color, color, opacity !important;
transition-duration: .15s !important;
transition-timing-function: ease !important;
}
/* ── Forecast: saldo por linha ────────────────────────────────── */
.forecast-run-bal { display:block; text-align:right; margin-top:3px; font-size:.71rem; line-height:1.15; white-space:nowrap; color:var(--muted); font-variant-numeric:tabular-nums; }
.forecast-run-bal.amount-neg { color:var(--red,#dc2626); font-weight:600; }
.forecast-run-bal.amount-pos { color:var(--green,#16a34a); }
/* ── Dashboard stat-cards clicáveis ───────────────────────────── */
.stat-card[style*="cursor:pointer"] { transition:transform .12s,box-shadow .12s; }
.stat-card[style*="cursor:pointer"]:hover { transform:translateY(-2px); box-shadow:0 4px 18px rgba(0,0,0,.10); }
/* ── Highlight: novo item criado ──────────────────────────────── */
@keyframes itemNewPulse { 0%{background:rgba(42,96,73,.22);} 60%{background:rgba(42,96,73,.10);} 100%{background:transparent;} }
.item-new-hl { animation:itemNewPulse 2s ease-out forwards; }
/* ── Scheduled: badge pendente no upcoming ────────────────────── */
.sup-pending-badge { display:inline-flex; align-items:center; gap:3px; font-size:.65rem; font-weight:700; padding:1px 6px; border-radius:10px; margin-left:5px; vertical-align:middle; background:rgba(251,191,36,.18); color:var(--amber,#b45309); border:1px solid rgba(251,191,36,.4); }
/* ════════════════════════════════════════════════════════
Dashboard: linha inferior (categorias favoritas + transações)
════════════════════════════════════════════════════════ */
.dash-bottom-row {
display: grid;
grid-template-columns: 340px 1fr;
gap: 14px;
align-items: start;
}
.dash-fav-col { min-width: 0; }
.dash-tx-col { min-width: 0; }
@media (max-width: 1024px) {
.dash-bottom-row { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════════
Dashboard: Categorias Favoritas — redesign profissional
════════════════════════════════════════════════════════════ */
.dfav-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
/* Cabeçalho do card */
.dfav-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 13px 16px 10px;
border-bottom: 1px solid var(--border);
gap: 8px;
}
.dfav-title {
font-size: .85rem;
font-weight: 700;
letter-spacing: .01em;
color: var(--text);
display: block;
}
.dfav-subtitle {
font-size: .7rem;
color: var(--muted);
margin-top: 1px;
display: block;
text-transform: capitalize;
}
.dfav-manage {
font-size: .72rem;
color: var(--accent);
background: var(--accent-lt, #e8f2ee);
border: 1px solid rgba(42,96,73,.2);
border-radius: 20px;
padding: 3px 10px;
cursor: pointer;
white-space: nowrap;
transition: all .15s;
font-weight: 500;
flex-shrink: 0;
}
.dfav-manage:hover { background: var(--accent); color: #fff; }
/* Estado vazio */
.dfav-empty {
padding: 24px 16px;
text-align: center;
color: var(--text2);
font-size: .83rem;
line-height: 1.5;
}
/* Seção (Despesas / Receitas) */
.dfav-section { }
.dfav-section-hdr {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 16px 6px;
background: var(--surface2);
border-bottom: 1px solid var(--border);
margin-left: 0;
}
.dfav-section-label {
font-size: .67rem;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
flex: 1;
}
.dfav-section-total {
font-size: .8rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.dfav-section-pct {
font-size: .68rem;
color: var(--muted);
background: var(--bg2);
border-radius: 10px;
padding: 1px 6px;
white-space: nowrap;
}
.dfav-divider { height: 1px; background: var(--border); margin: 4px 0; }
/* Linha de categoria */
.dfav-row {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 8px 16px;
cursor: pointer;
transition: background .1s;
border-bottom: 1px solid var(--border);
position: relative;
}
.dfav-row:last-child { border-bottom: none; }
.dfav-row:hover { background: var(--bg2); }
.dfav-row:active { background: var(--accent-lt, #e8f2ee); }
/* Linha de contexto (pai não-favorito) */
.dfav-row--ctx {
display: flex;
align-items: center;
gap: 9px;
padding: 5px 16px;
border-bottom: 1px solid var(--border);
background: var(--surface2);
cursor: default;
opacity: .72;
}
.dfav-name--ctx {
flex: 1;
font-size: .78rem;
font-weight: 600;
color: var(--text2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dfav-val--muted {
font-size: .74rem;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
/* Subcat indentada */
.dfav-row--child {
padding-left: 32px;
background: color-mix(in srgb, var(--surface2) 40%, var(--surface));
}
.dfav-row--child:hover { background: var(--bg2); }
/* Conector vertical de hierarquia */
.dfav-conn {
position: absolute;
left: 17px;
top: 0;
bottom: 0;
width: 1px;
background: var(--border);
pointer-events: none;
}
.dfav-conn::after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 8px;
height: 1px;
background: var(--border);
}
.dfav-conn--last { bottom: 50%; }
/* Ícone */
.dfav-icon { font-size: 1rem; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.dfav-icon--sm { font-size: .88rem; }
/* Corpo da linha */
.dfav-body { flex: 1; min-width: 0; }
.dfav-row-top {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 4px;
}
.dfav-name {
flex: 1;
font-size: .83rem;
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.dfav-name--child { font-weight: 400; font-size: .8rem; color: var(--text2); }
.dfav-val {
font-size: .83rem;
font-weight: 700;
white-space: nowrap;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
/* Barra de progresso */
.dfav-bar-row {
display: flex;
align-items: center;
gap: 6px;
}
.dfav-bar-bg {
flex: 1;
height: 4px;
background: var(--border);
border-radius: 3px;
overflow: hidden;
}
.dfav-bar-fill {
height: 100%;
border-radius: 3px;
transition: width .5s cubic-bezier(.4,0,.2,1);
min-width: 2px;
}
.dfav-pct {
font-size: .67rem;
font-weight: 600;
white-space: nowrap;
font-variant-numeric: tabular-nums;
min-width: 36px;
text-align: right;
}
.dfav-body-wrap { }
/* ── Layout dashboard: lado a lado no desktop ────────────────── */
.dash-bottom-row {
display: grid;
grid-template-columns: 340px 1fr;
gap: 14px;
align-items: start;
}
.dash-fav-col { min-width: 0; }
.dash-tx-col { min-width: 0; }
@media (max-width: 1100px) {
.dash-bottom-row { grid-template-columns: 300px 1fr; }
}
@media (max-width: 900px) {
.dash-bottom-row { grid-template-columns: 1fr; }
}
/* ── Toggle switches do modal de personalização ──────────────── */
.dash-custom-toggle {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface2);
cursor: pointer;
transition: background .12s;
user-select: none;
}
.dash-custom-toggle:hover { background: var(--bg2); }
.dash-custom-toggle-icon { font-size: 1.15rem; }
.dash-custom-toggle-label { flex: 1; font-size: .85rem; font-weight: 500; }
.dash-custom-toggle-sub { font-size: .74rem; color: var(--muted); margin-top: 1px; }
.dash-toggle-switch {
width: 38px; height: 22px; border-radius: 11px;
background: var(--border); border: none; cursor: pointer;
position: relative; transition: background .2s; flex-shrink: 0; outline: none;
}
.dash-toggle-switch.on { background: var(--accent); }
.dash-toggle-switch::after {
content: ''; position: absolute; top: 3px; left: 3px;
width: 16px; height: 16px; border-radius: 50%;
background: #fff; transition: transform .2s;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.dash-toggle-switch.on::after { transform: translateX(16px); }
/* ── Highlight: novo item criado ─────────────────────────────── */
@keyframes itemNewPulse {
0% { background: rgba(42,96,73,.22); }
60% { background: rgba(42,96,73,.10); }
100% { background: transparent; }
}
.item-new-hl { animation: itemNewPulse 2s ease-out forwards; }
/* ── Scheduled: badge pendente ───────────────────────────────── */
.sup-pending-badge {
display: inline-flex; align-items: center; gap: 3px;
font-size: .65rem; font-weight: 700; padding: 1px 6px;
border-radius: 10px; margin-left: 5px; vertical-align: middle;
background: rgba(251,191,36,.18); color: var(--amber,#b45309);
border: 1px solid rgba(251,191,36,.4);
}
/* ── Forecast: saldo por linha ───────────────────────────────── */
.forecast-run-bal {
display: block; text-align: right; margin-top: 3px; font-size: .71rem; line-height: 1.15;
white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums;
}
.forecast-run-bal.amount-neg { color: var(--red,#dc2626); font-weight: 600; }
.forecast-run-bal.amount-pos { color: var(--green,#16a34a); }
.forecast-balance-mobile { display: none !important; }
/* ═══════════════════════════════════════════════════════════════════
WAVE 2 — DESKTOP UX: Transactions + Forecast
Applies only on ≥ 1024px. Mobile layout is completely untouched.
═══════════════════════════════════════════════════════════════════ */
/* ── #31 Transactions list — desktop refinement ─────────────────── */
@media (min-width: 1024px) {
/* Larger, more readable rows */
.tx-table tbody td { padding: 11px 14px; font-size: .9rem; }
.tx-table thead th { padding: 9px 14px; font-size: .78rem; }
/* Description / title line bigger */
.tx-v2-title { font-size: .93rem !important; }
.tx-v2-category { font-size: .78rem !important; }
.tx-v2-meta { font-size: .76rem !important; }
/* Category chip and payee/account in meta line — larger on desktop */
.tx-cat-chip { font-size: .72rem !important; max-width: 120px !important; }
.tx-v2-acct,
.tx-v2-pay { font-size: .76rem !important; }
/* Amount column: more breathing room */
.tx-v2-amount { font-size: .95rem !important; }
/* Date cell */
.tx-v2-date { font-size: .78rem !important; padding-top: 12px !important; }
/* Status badge */
.tx-status-badge { font-size: .7rem !important; padding: 2px 8px !important; }
/* Slightly more generous row height via hover area */
.tx-table tbody tr { transition: background .1s; }
.tx-table tbody tr:hover { background: var(--surface2); }
/* Filter bar: slightly larger selects */
.tx-chip-select { font-size: .82rem !important; padding: 5px 10px !important; }
#txSearch { font-size: .82rem !important; }
}
/* ── #32 Forecast list — desktop refinement ─────────────────────── */
@media (min-width: 1024px) {
/* Row padding & font size */
.forecast-tx-row td { padding: 9px 12px !important; }
.forecast-title { font-size: .92rem !important; }
.forecast-category { font-size: .82rem !important; }
.forecast-payee { font-size: .79rem !important; }
/* Date column wider and cleaner */
.forecast-date-cell { width: 24px !important; }
.forecast-date-main { font-size: .8rem !important; }
.forecast-date-flag,
.forecast-date-today { font-size: .7rem !important; }
/* Amount column */
.forecast-amount-main { font-size: .9rem !important; }
.forecast-amount-brl { font-size: .74rem !important; }
.forecast-run-bal { font-size: .76rem !important; }
.forecast-amount-cell { width: 110px !important; }
/* Account section header */
.forecast-account-header { padding: 12px 16px !important; }
/* Table header */
.forecast-table-wrap table thead th { font-size: .76rem !important; padding: 8px 12px !important; }
}
/* ── #11 Prices: group-by toggle buttons ────────────────────────── */
.px-group-btn {
padding: 4px 10px;
font-size: .74rem;
font-weight: 500;
border: none;
background: var(--surface);
color: var(--muted);
cursor: pointer;
transition: background .12s, color .12s;
}
.px-group-btn.active {
background: var(--accent);
color: #fff;
font-weight: 600;
}
.px-group-btn:hover:not(.active) {
background: var(--bg2);
color: var(--text2);
}
/* ── #11 Prices: group section headers ──────────────────────────── */
.px-group-section { margin-bottom: 18px; }
.px-group-header {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 4px 8px;
border-bottom: 2px solid var(--border);
margin-bottom: 10px;
}
.px-group-dot {
width: 10px; height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.px-group-label {
font-size: .82rem;
font-weight: 700;
color: var(--text2);
flex: 1;
}
.px-group-count {
font-size: .72rem;
color: var(--muted);
}
/* ── #9 Transactions: category filter active indicator ──────────── */
#txCatFilterWrap.is-active .tx-chip-select {
border-color: var(--accent);
color: var(--accent);
font-weight: 600;
}
/* ── Resizable table columns (desktop ≥ 768px) ──────────────────────────── */
@media (min-width: 768px) {
.resizable-table { table-layout: fixed; }
.resizable-table th { position: relative; user-select: none; }
.col-resize-handle {
position: absolute; right: -1px; top: 0;
width: 8px; height: 100%;
cursor: col-resize; z-index: 3;
background: transparent; border-right: 2px solid transparent;
transition: border-color .15s;
}
.col-resize-handle:hover, .col-resize-handle.dragging {
border-right-color: var(--accent);
}
}
/* Reconciled row */
.tx-reconciled td:not(.tx-v2-act) { opacity: .72; }
/* ── Modo Reconciliação ──────────────────────────────────────── */
.reconcile-banner-inner {
display: flex;
align-items: center;
gap: 14px;
background: linear-gradient(135deg, #0f2d1a 0%, #1a4a28 100%);
border: 1.5px solid var(--green, #16a34a);
border-radius: 12px;
padding: 12px 16px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.reconcile-banner-left {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 180px;
}
.reconcile-banner-icon { font-size: 1.5rem; flex-shrink: 0; }
.reconcile-banner-title {
font-weight: 700;
font-size: .88rem;
color: var(--green, #4ade80);
letter-spacing: .01em;
}
.reconcile-banner-sub {
font-size: .72rem;
color: var(--muted);
margin-top: 1px;
}
.reconcile-banner-stats {
display: flex;
gap: 10px;
align-items: center;
flex-shrink: 0;
}
.reconcile-stat {
font-size: .78rem;
color: var(--text-secondary, #aaa);
background: rgba(255,255,255,.07);
border-radius: 6px;
padding: 3px 9px;
}
.reconcile-sum {
font-weight: 700;
color: var(--green, #4ade80);
}
.reconcile-banner-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
/* Checkbox cell */
.tx-v2-chk {
width: 36px;
text-align: center;
vertical-align: middle;
padding: 0 4px !important;
}
.reconcile-chk-label {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
width: 100%;
height: 100%;
padding: 6px 0;
}
.reconcile-chk {
width: 16px;
height: 16px;
accent-color: var(--green, #16a34a);
cursor: pointer;
}
.reconcile-chk:disabled { opacity: .4; cursor: not-allowed; }
/* Row highlight quando marcada no modo */
tr.reconcile-checked {
background: rgba(22, 163, 74, .10) !important;
}
tr.reconcile-checked td { opacity: 1 !important; }
.tx-reconcile-badge {
display:inline-block;font-size:.6rem;font-weight:700;
color:var(--green,#16a34a);border:1px solid currentColor;
border-radius:3px;padding:0 4px;line-height:1.5;vertical-align:middle;
margin-left:4px;letter-spacing:.04em;
}
.tx-reconcile-btn {
background:none;border:1.5px solid var(--border);border-radius:6px;
padding:3px 7px;font-size:.7rem;cursor:pointer;color:var(--muted);
font-family:var(--font-sans);transition:all .15s;white-space:nowrap;
}
.tx-reconcile-btn:hover { border-color:var(--green,#16a34a);color:var(--green,#16a34a); }
.tx-reconcile-btn.reconciled {
background:var(--green-lt,#dcfce7);border-color:var(--green,#16a34a);
color:var(--green,#16a34a);font-weight:600;
}
/* Dashboard card reorder */
.dash-custom-toggle { cursor:grab; }
.dash-custom-toggle:active { cursor:grabbing; }
.dash-custom-toggle.drag-over { outline:2px dashed var(--accent); border-radius:8px; }
.dash-reorder-btns { display:flex;flex-direction:column;gap:2px;margin-left:4px;flex-shrink:0; }
.dash-reorder-btn {
background:none;border:none;color:var(--muted);cursor:pointer;
font-size:.7rem;padding:0 3px;line-height:1;
}
.dash-reorder-btn:hover { color:var(--accent); }
/* ── Multi-account selector for Forecast ───────────────────────────────── */
.fc-acct-picker {
position: relative;
display: inline-block;
font-size: .8rem;
}
.fc-acct-btn {
display: flex; align-items: center; gap: 6px;
padding: 5px 10px; border: 1px solid var(--border);
border-radius: var(--r-sm); background: var(--surface);
color: var(--text2); cursor: pointer; font-size: .8rem;
font-family: var(--font-sans); white-space: nowrap;
min-width: 140px; max-width: 220px;
transition: border-color .15s;
}
.fc-acct-btn:hover { border-color: var(--accent); }
.fc-acct-btn .fc-acct-caret { margin-left: auto; opacity: .5; font-size: .65rem; }
.fc-acct-dropdown {
position: absolute; top: calc(100% + 4px); left: 0;
min-width: 220px; max-width: 280px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); box-shadow: var(--shadow);
z-index: 200; display: none;
max-height: 280px; overflow-y: auto;
}
.fc-acct-dropdown.open { display: block; }
.fc-acct-opt {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px; cursor: pointer; font-size: .82rem;
transition: background .1s;
}
.fc-acct-opt:hover { background: var(--surface2); }
.fc-acct-opt input[type=checkbox] {
width: 14px; height: 14px; flex-shrink: 0;
accent-color: var(--accent); cursor: pointer;
}
.fc-acct-opt-dot {
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.fc-acct-sep {
font-size: .68rem; font-weight: 700; color: var(--muted);
text-transform: uppercase; letter-spacing: .06em;
padding: 6px 12px 2px;
}
/* ── Category chart type toggle (sober) ─────────────────────────────────── */
.cat-chart-type-toggle {
display: flex;
border: 1px solid var(--border);
border-radius: var(--r-sm);
overflow: hidden;
flex-shrink: 0;
}
.cat-ctt-btn {
padding: 3px 10px;
border: none;
background: var(--surface);
color: var(--muted);
cursor: pointer;
font-size: .72rem;
font-weight: 500;
letter-spacing: .02em;
transition: background .15s, color .15s;
white-space: nowrap;
}
.cat-ctt-btn + .cat-ctt-btn {
border-left: 1px solid var(--border);
}
.cat-ctt-btn.active {
background: var(--surface2);
color: var(--text);
font-weight: 600;
}
.cat-ctt-btn:hover:not(.active) {
background: var(--surface2);
color: var(--text2);
}
/* ── Forecast card header — mobile-safe layout ──────────────────────────── */
.fc-forecast-header {
gap: 8px;
flex-wrap: wrap;
align-items: flex-start;
}
.fc-forecast-controls {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
}
.fc-acct-btn--sm {
min-width: 0 !important;
max-width: 160px !important;
font-size: .75rem !important;
padding: 3px 8px !important;
}
.fc-acct-picker {
min-width: 0;
max-width: 100%;
}
.fc-acct-btn {
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.fc-acct-dropdown {
min-width: 200px;
max-width: min(280px, calc(100vw - 32px));
right: auto;
left: 0;
}
.fc-forecast-check {
display: flex;
align-items: center;
gap: 5px;
font-size: .75rem;
color: var(--text2);
cursor: pointer;
white-space: nowrap;
}
/* Prevent chart canvas overflow on mobile */
#catChartWrap canvas,
.forecast-chart-wrap canvas {
max-width: 100% !important;
display: block;
}
@media (max-width: 480px) {
.fc-acct-btn--sm {
max-width: 130px !important;
}
.fc-forecast-controls {
width: 100%;
}
}
/* ═══════════════════════════════════════════════════════════════════
AI INSIGHTS — Estilos do módulo de análise e chat com IA
Tema escuro profissional com distinção clara: app data vs IA vs sugestões
═══════════════════════════════════════════════════════════════════ */
/* ── Badges de origem ───────────────────────────────────────────── */
.ai-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: .68rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 20px;
letter-spacing: .03em;
}
.ai-badge-data { background: #1d4ed8; color: #fff; border: 1px solid #1d4ed8; }
.ai-badge-ai { background: #7c3aed; color: #fff; border: 1px solid #7c3aed; }
.ai-badge-tip { background: #059669; color: #fff; border: 1px solid #059669; }
.ai-badge-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ai-advisory-note {
font-size: .68rem;
color: var(--amber, #f59e0b);
background: #451a0315;
border: 1px solid #f59e0b22;
border-radius: 12px;
padding: 2px 8px;
margin-left: 6px;
}
/* ── Page tabs (Análise / Chat) ─────────────────────────────────── */
.ai-tabs {
display: flex;
gap: 0;
border-bottom: 2px solid var(--border, #2a3a2e);
margin-bottom: 0;
}
.ai-tab-btn {
flex: 1;
padding: 10px 0;
background: none;
border: none;
border-bottom: 3px solid transparent;
font-size: .88rem;
font-weight: 600;
color: var(--muted, #9ca3af);
cursor: pointer;
transition: color .15s, border-color .15s;
margin-bottom: -2px;
}
.ai-tab-btn.active {
color: var(--accent, #22c55e);
border-bottom-color: var(--accent, #22c55e);
}
/* ── Toolbar de filtros ─────────────────────────────────────────── */
.ai-toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 12px 16px;
background: var(--surface, #1a2e1e);
border-bottom: 1px solid var(--border, #2a3a2e);
}
.ai-toolbar select,
.ai-toolbar input[type="date"] {
flex: 1 1 140px;
max-width: 200px;
font-size: .8rem;
padding: 6px 10px;
border-radius: var(--r-sm, 8px);
background: var(--surface2, #243228);
border: 1px solid var(--border, #2a3a2e);
color: var(--text, #e5e7eb);
}
.ai-toolbar-actions {
display: flex;
gap: 6px;
align-items: center;
width: 100%;
}
/* ── States ─────────────────────────────────────────────────────── */
.ai-disabled-state,
.ai-empty-state,
.ai-error-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 48px 24px;
gap: 12px;
color: var(--muted, #9ca3af);
}
.ai-disabled-icon { font-size: 3rem; }
.ai-loading {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 48px 24px;
color: var(--muted);
text-align: center;
}
.ai-loading-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--border, #2a3a2e);
border-top-color: var(--accent, #22c55e);
border-radius: 50%;
animation: ai-spin 0.8s linear infinite;
}
.ai-loading-sub { font-size: .75rem; color: var(--muted2, #6b7280); }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-error-icon { font-size: 2rem; }
.ai-error-msg { font-size: .82rem; color: var(--red, #ef4444); }
/* ── Sections ───────────────────────────────────────────────────── */
.ai-section {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: var(--r, 12px);
padding: 16px;
margin-bottom: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.ai-section-header {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: .75rem;
font-weight: 700;
color: var(--text, #1f2937);
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 14px;
}
/* ── KPI row ────────────────────────────────────────────────────── */
.ai-kpi-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.ai-kpi {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: var(--r-sm, 8px);
padding: 12px 10px;
text-align: center;
}
.ai-kpi-green { background: #f0fdf4; border-color: #86efac; }
.ai-kpi-red { background: #fff5f5; border-color: #fca5a5; }
.ai-kpi-label { display: block; font-size: .68rem; color: #6b7280; margin-bottom: 4px; font-weight: 600; }
.ai-kpi-value { display: block; font-size: .92rem; font-weight: 700; color: #111827; }
.ai-kpi-green .ai-kpi-value { color: #15803d; }
.ai-kpi-red .ai-kpi-value { color: #dc2626; }
/* ── Summary & overview pills ──────────────────────────────────── */
.ai-summary-text {
font-size: .88rem;
color: #374151;
line-height: 1.6;
margin: 0 0 12px;
}
.ai-overview-pills {
display: flex;
flex-direction: column;
gap: 6px;
}
.ai-overview-pill {
font-size: .8rem;
padding: 8px 12px;
border-radius: var(--r-sm);
border: 1px solid transparent;
line-height: 1.4;
}
.ai-pill-green { background: #dcfce7; border-color: #86efac; color: #15803d; }
.ai-pill-red { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.ai-pill-blue { background: #dbeafe; border-color: #93c5fd; color: #1d4ed8; }
/* ── Alerts ─────────────────────────────────────────────────────── */
.ai-alert {
font-size: .82rem;
padding: 10px 12px;
border-radius: var(--r-sm);
margin-bottom: 8px;
border: 1px solid transparent;
line-height: 1.5;
}
.ai-alert-warning { background: #fffbeb; border-color: #fbbf24; color: #92400e; }
.ai-alert-info { background: #eff6ff; border-color: #93c5fd; color: #1e40af; }
.ai-alert-ok { background: #f0fdf4; border-color: #86efac; color: #166534; }
/* ── Insight cards ──────────────────────────────────────────────── */
.ai-insight-card {
padding: 10px 12px;
border-radius: var(--r-sm);
margin-bottom: 8px;
border-left: 4px solid #e2e8f0;
background: #f8fafc;
font-size: .82rem;
line-height: 1.5;
}
.ai-severity-high { border-left-color: var(--red, #ef4444); }
.ai-severity-medium { border-left-color: var(--amber, #f59e0b); }
.ai-severity-low { border-left-color: var(--accent, #22c55e); }
.ai-insight-title { font-weight: 700; color: #111827; margin-bottom: 4px; }
.ai-insight-desc { color: #4b5563; }
/* ── Bar chart list ─────────────────────────────────────────────── */
.ai-bar-list { display: flex; flex-direction: column; gap: 8px; }
.ai-bar-item { }
.ai-bar-label { display: flex; justify-content: space-between; font-size: .78rem; color: #374151; margin-bottom: 3px; font-weight: 500; }
.ai-bar-track { height: 5px; background: var(--surface2); border-radius: 99px; overflow: hidden; }
.ai-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #86efac); border-radius: 99px; transition: width .4s ease; }
/* ── Category insights ──────────────────────────────────────────── */
.ai-insights-list { display: flex; flex-direction: column; gap: 6px; }
.ai-cat-insight {
font-size: .79rem;
color: #374151;
padding: 8px 10px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: var(--r-sm);
line-height: 1.5;
}
.ai-action-tip {
display: block;
margin-top: 4px;
color: var(--accent);
font-style: italic;
font-size: .75rem;
}
/* ── Payee list ─────────────────────────────────────────────────── */
.ai-payee-list { display: flex; flex-direction: column; gap: 4px; }
.ai-payee-row { display: flex; align-items: center; gap: 8px; font-size: .81rem; padding: 6px 8px; border-radius: var(--r-sm); background: #f8fafc; border: 1px solid #f1f5f9; }
.ai-payee-rank { width: 20px; text-align: center; font-weight: 700; color: #2563eb; font-size: .75rem; }
.ai-payee-name { flex: 1; color: #374151; }
.ai-payee-amt { font-weight: 600; color: #111827; font-size: .82rem; }
/* ── Member row ─────────────────────────────────────────────────── */
.ai-member-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; font-size: .82rem; border-bottom: 1px solid var(--border); }
.ai-member-row:last-child { border-bottom: none; }
.ai-member-name { color: #374151; }
.ai-member-amt { font-weight: 700; color: #111827; }
/* ── Trend table ────────────────────────────────────────────────── */
.ai-trend-table { font-size: .78rem; }
.ai-trend-header, .ai-trend-row {
display: grid;
grid-template-columns: 80px 1fr 1fr 1fr;
gap: 4px;
padding: 6px 4px;
}
.ai-trend-header { color: #6b7280; font-weight: 700; border-bottom: 2px solid #e2e8f0; margin-bottom: 4px; }
.ai-trend-row { color: #374151; border-bottom: 1px solid #f1f5f9; }
.ai-trend-row:last-child { border-bottom: none; }
.ai-trend-in { color: var(--green, #22c55e); }
.ai-trend-out { color: var(--red, #ef4444); }
/* ── Savings ────────────────────────────────────────────────────── */
.ai-savings-card {
padding: 12px;
background: #f0fdf4;
border: 1px solid #86efac;
border-radius: var(--r-sm);
margin-bottom: 8px;
font-size: .82rem;
}
.ai-savings-title { font-weight: 700; color: #14532d; margin-bottom: 4px; }
.ai-savings-desc { color: #166534; line-height: 1.5; }
.ai-savings-est { margin-top: 6px; color: #15803d; font-weight: 600; font-size: .78rem; }
/* ── Recommendations ────────────────────────────────────────────── */
.ai-rec-card {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 10px 12px;
border-radius: var(--r-sm);
margin-bottom: 8px;
background: #f8fafc;
border: 1px solid #e2e8f0;
font-size: .82rem;
}
.ai-rec-high { border-left: 4px solid #ef4444; background: #fff5f5; border-color: #fecaca; }
.ai-rec-medium { border-left: 4px solid #f59e0b; background: #fffdf0; border-color: #fde68a; }
.ai-rec-low { border-left: 4px solid #22c55e; background: #f0fdf4; border-color: #bbf7d0; }
.ai-rec-prio { font-size: 1rem; flex-shrink: 0; }
.ai-rec-title { font-weight: 700; color: #111827; margin-bottom: 3px; }
.ai-rec-desc { color: #374151; line-height: 1.5; }
/* ── Classification suggestions ─────────────────────────────────── */
.ai-class-card {
padding: 10px 12px;
background: var(--surface2);
border: 1px solid #f59e0b22;
border-radius: var(--r-sm);
margin-bottom: 8px;
font-size: .82rem;
}
.ai-class-desc { font-weight: 600; color: var(--text); margin-bottom: 6px; }
.ai-class-details { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ai-class-tag { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 2px 8px; font-size: .7rem; color: var(--text2); }
.ai-class-conf { font-size: .7rem; color: var(--accent); font-weight: 600; }
.ai-class-exp { font-size: .75rem; color: var(--muted); font-style: italic; }
.ai-disclaimer { font-size: .72rem; color: var(--muted); margin-top: 8px; font-style: italic; }
/* ── Chat ───────────────────────────────────────────────────────── */
.ai-chat-wrap {
display: flex;
flex-direction: column;
height: calc(100vh - 200px);
min-height: 400px;
}
.ai-chat-feed {
flex: 1;
overflow-y: auto;
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.ai-chat-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 32px 16px;
text-align: center;
color: var(--muted);
font-size: .85rem;
}
.ai-chat-suggestions {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.ai-chat-suggest {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 20px;
padding: 6px 14px;
font-size: .75rem;
color: var(--text2);
cursor: pointer;
transition: background .15s, color .15s;
}
.ai-chat-suggest:hover {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.ai-chat-msg { display: flex; }
.ai-chat-user { justify-content: flex-end; }
.ai-chat-assistant { justify-content: flex-start; }
.ai-chat-bubble {
max-width: 85%;
padding: 10px 13px;
border-radius: 16px;
font-size: .84rem;
line-height: 1.55;
}
.ai-chat-user .ai-chat-bubble {
background: var(--accent, #22c55e);
color: #fff;
border-bottom-right-radius: 4px;
}
.ai-chat-assistant .ai-chat-bubble {
background: var(--surface2, #243228);
border: 1px solid var(--border);
color: var(--text2);
border-bottom-left-radius: 4px;
}
.ai-chat-error .ai-chat-bubble {
background: #4a000022;
border-color: #ef444444;
}
.ai-chat-origin {
display: block;
font-size: .67rem;
font-weight: 700;
color: var(--accent);
margin-bottom: 4px;
letter-spacing: .04em;
}
.ai-chat-text ul { margin: 4px 0 4px 16px; padding: 0; }
.ai-chat-text li { margin-bottom: 2px; }
.ai-typing-dots {
display: flex;
gap: 4px;
padding: 4px 0;
}
.ai-typing-dots span {
width: 6px; height: 6px;
background: var(--accent);
border-radius: 50%;
animation: ai-typing 1.2s infinite;
}
.ai-typing-dots span:nth-child(2) { animation-delay: .2s; }
.ai-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes ai-typing { 0%, 80%, 100% { opacity: .3; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
.ai-chat-input-bar {
display: flex;
gap: 8px;
padding: 10px 16px;
border-top: 1px solid var(--border);
background: var(--surface);
}
.ai-chat-input-bar textarea {
flex: 1;
resize: none;
border-radius: var(--r-sm);
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text);
font-size: .85rem;
padding: 8px 12px;
min-height: 40px;
max-height: 120px;
font-family: inherit;
}
.ai-chat-input-bar textarea::placeholder { color: var(--muted); }
.ai-chat-send-btn {
align-self: flex-end;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--accent);
border: none;
color: #fff;
font-size: 1.1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: opacity .15s;
flex-shrink: 0;
}
.ai-chat-send-btn:hover { opacity: .85; }
@media (max-width: 480px) {
.ai-kpi-row { grid-template-columns: 1fr 1fr; }
.ai-kpi-row .ai-kpi:last-child { grid-column: 1 / -1; }
.ai-trend-header, .ai-trend-row { grid-template-columns: 65px 1fr 1fr 1fr; font-size: .72rem; }
.ai-toolbar select, .ai-toolbar input[type="date"] { flex: 1 1 120px; }
}
/* ═══════════════════════════════════════════════════════════════════
I18N — Seletor de idioma + Admin de traduções
═══════════════════════════════════════════════════════════════════ */
/* ── Seletor de idioma ───────────────────────────────────────────── */
.i18n-lang-selector {
appearance: none;
-webkit-appearance: none;
background: var(--surface2, #243228) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
border: 1px solid var(--border, #2a3a2e);
border-radius: var(--r-sm, 8px);
color: var(--text, #e5e7eb);
font-size: .85rem;
padding: 8px 32px 8px 12px;
cursor: pointer;
min-width: 150px;
transition: border-color .15s;
}
.i18n-lang-selector:hover,
.i18n-lang-selector:focus {
border-color: var(--accent, #22c55e);
outline: none;
}
/* Login page lang selector (fundo claro) */
.login-lang-selector .i18n-lang-selector {
background-color: #f9fafb;
color: #374151;
border-color: #e5e7eb;
}
/* ── Admin de traduções ───────────────────────────────────────────── */
.i18n-toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid var(--border);
margin-bottom: 12px;
}
.i18n-toolbar-left,
.i18n-toolbar-right {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.i18n-search {
padding: 7px 12px;
border-radius: var(--r-sm);
border: 1px solid var(--border);
background: var(--surface2);
color: var(--text);
font-size: .82rem;
min-width: 200px;
}
.i18n-search:focus { border-color: var(--accent); outline: none; }
.i18n-lang-filter {
padding: 7px 10px;
border-radius: var(--r-sm);
border: 1px solid var(--border);
background: var(--surface2);
color: var(--text);
font-size: .8rem;
}
.i18n-count {
font-size: .75rem;
color: var(--muted);
white-space: nowrap;
}
/* Table */
.i18n-table-wrap {
overflow-x: auto;
max-height: 60vh;
overflow-y: auto;
border: 1px solid var(--border);
border-radius: var(--r, 12px);
}
.i18n-table {
width: 100%;
border-collapse: collapse;
font-size: .82rem;
}
.i18n-table thead th {
background: var(--surface2);
padding: 8px 12px;
text-align: left;
font-size: .72rem;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .05em;
position: sticky;
top: 0;
z-index: 1;
border-bottom: 1px solid var(--border);
}
.i18n-table tbody tr {
border-bottom: 1px solid var(--border);
transition: background .1s;
}
.i18n-table tbody tr:hover { background: var(--surface2, #243228); }
.i18n-table tbody tr:last-child { border-bottom: none; }
.i18n-table td { padding: 6px 10px; vertical-align: middle; }
.i18n-key-cell { font-family: monospace; }
.i18n-key-tag {
font-size: .75rem;
background: var(--surface2);
padding: 2px 7px;
border-radius: 4px;
color: var(--text2);
white-space: nowrap;
}
.i18n-lang-badge {
display: inline-block;
font-size: .7rem;
font-weight: 700;
background: var(--accent-lt, #dcfce7);
color: var(--accent, #22c55e);
padding: 2px 6px;
border-radius: 10px;
text-transform: uppercase;
}
.i18n-text-input {
width: 100%;
padding: 5px 8px;
border-radius: 6px;
border: 1px solid transparent;
background: transparent;
color: var(--text);
font-size: .82rem;
font-family: inherit;
resize: none;
overflow: hidden;
min-height: 28px;
transition: border-color .15s, background .15s;
}
.i18n-text-input:hover,
.i18n-text-input:focus {
border-color: var(--border);
background: var(--surface2);
outline: none;
}
.i18n-key-input,
.i18n-lang-input {
padding: 4px 8px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--surface2);
color: var(--text);
font-size: .78rem;
font-family: monospace;
width: 100%;
}
.i18n-del-btn {
background: none;
border: none;
color: var(--muted);
cursor: pointer;
font-size: .8rem;
padding: 3px 6px;
border-radius: 4px;
transition: color .15s, background .15s;
}
.i18n-del-btn:hover { color: var(--red, #ef4444); background: #ef444415; }
/* Dirty / new row highlights */
.i18n-row-dirty { background: #451a0310 !important; }
.i18n-row-new { background: #1a3a2a22 !important; }
.i18n-row-dirty .i18n-text-input { border-color: #f59e0b44; }
.i18n-row-new .i18n-lang-badge { background: #1a3a2a; color: var(--accent); }
/* Settings row for language */
.cfg-lang-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
}
.cfg-lang-row .cfg-row-info { flex: 1; }
@media (max-width: 600px) {
.i18n-toolbar { flex-direction: column; align-items: stretch; }
.i18n-toolbar-left, .i18n-toolbar-right { flex-direction: column; }
.i18n-search { min-width: 100%; }
.i18n-table-wrap { max-height: 50vh; }
}
/* ═══════════════════════════════════════════════════════════════════
I18N — Topbar language picker
═══════════════════════════════════════════════════════════════════ */
.i18n-topbar-picker { position: relative; }
.i18n-topbar-btn {
font-size: .72rem !important;
font-weight: 800 !important;
letter-spacing: .04em;
padding: 0 7px !important;
min-width: 34px;
color: var(--text2);
border-radius: var(--r-sm, 8px);
}
.i18n-topbar-btn:hover { background: var(--surface2); color: var(--accent); }
.i18n-topbar-dropdown {
position: absolute;
top: calc(100% + 6px);
right: 0;
background: var(--surface, #1a2e1e);
border: 1px solid var(--border, #2a3a2e);
border-radius: var(--r, 12px);
box-shadow: 0 8px 24px rgba(0,0,0,.35);
min-width: 160px;
z-index: 2000;
padding: 4px;
animation: i18n-dd-in .12s ease;
}
@keyframes i18n-dd-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.i18n-dd-item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 12px;
border: none;
background: none;
color: var(--text2);
font-size: .83rem;
font-family: inherit;
cursor: pointer;
border-radius: var(--r-sm, 8px);
text-align: left;
transition: background .12s, color .12s;
}
.i18n-dd-item:hover { background: var(--surface2); color: var(--text); }
.i18n-dd-item.active { color: var(--accent); font-weight: 700; }
.i18n-dd-item.active::after { content: '✓'; margin-left: auto; font-size: .75rem; }
/* ── Profile language button strip ─────────────────────────── */
.i18n-lang-btn {
flex: 1;
padding: 7px 4px;
border: 1.5px solid var(--border);
border-radius: var(--r-sm, 8px);
background: var(--surface2);
color: var(--text2);
font-size: .78rem;
font-weight: 600;
cursor: pointer;
transition: all .15s;
font-family: inherit;
}
.i18n-lang-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-lt); }
.i18n-lang-btn.active { border-color: var(--accent); background: var(--accent); color: #fff; }
/* ── Login screen language strip ───────────────────────────── */
.login-lang-strip {
display: flex;
gap: 6px;
margin-bottom: 18px;
justify-content: center;
}
.login-lang-strip button {
padding: 5px 12px;
border: 1.5px solid #e5e7eb;
border-radius: 20px;
background: transparent;
font-size: .75rem;
font-weight: 600;
cursor: pointer;
color: #6b7280;
transition: all .15s;
font-family: inherit;
}
.login-lang-strip button:hover { border-color: #2a6049; color: #2a6049; }
.login-lang-strip button.active { border-color: #2a6049; background: #2a6049; color: #fff; }
/* ═══════════════════════════════════════════════════════════════════
TRANSLATIONS ADMIN — tr-* classes used by translations_admin.js
═══════════════════════════════════════════════════════════════════ */
/* ── Toolbar ───────────────────────────────────────────────── */
.tr-toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 12px 0 10px;
align-items: center;
}
.tr-search {
flex: 1 1 200px;
min-width: 160px;
padding: 7px 12px;
border-radius: var(--r-sm, 8px);
background: var(--surface2, #243228);
border: 1px solid var(--border, #2a3a2e);
color: var(--text);
font-size: .82rem;
font-family: inherit;
}
.tr-search:focus { outline: none; border-color: var(--accent); }
.tr-select {
flex: 0 1 160px;
padding: 7px 10px;
border-radius: var(--r-sm, 8px);
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text);
font-size: .82rem;
}
/* ── Stats bar ─────────────────────────────────────────────── */
.tr-stats {
font-size: .75rem;
color: var(--muted);
padding: 4px 0 10px;
border-bottom: 1px solid var(--border);
margin-bottom: 10px;
}
/* ── Table wrapper ─────────────────────────────────────────── */
.tr-table-wrap {
overflow-x: auto;
overflow-y: auto;
max-height: 55vh;
border: 1px solid var(--border);
border-radius: var(--r, 12px);
}
/* ── Table ─────────────────────────────────────────────────── */
.tr-table {
width: 100%;
border-collapse: collapse;
font-size: .78rem;
min-width: 700px;
}
.tr-table thead th {
position: sticky;
top: 0;
background: var(--surface, #1a2e1e);
padding: 8px 10px;
text-align: left;
font-weight: 700;
color: var(--text2);
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .05em;
border-bottom: 1px solid var(--border);
white-space: nowrap;
z-index: 2;
}
.tr-row {
cursor: pointer;
border-bottom: 1px solid var(--border);
transition: background .1s;
}
.tr-row:hover { background: var(--surface2, #243228); }
.tr-row-missing { border-left: 3px solid var(--amber, #f59e0b); }
.tr-row:last-child { border-bottom: none; }
.tr-key-cell {
padding: 7px 10px;
font-family: monospace;
font-size: .75rem;
color: var(--text);
white-space: nowrap;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
}
.tr-key-cell code {
background: var(--surface2);
padding: 1px 5px;
border-radius: 4px;
font-size: .72rem;
}
.tr-sec-cell { padding: 7px 10px; }
.tr-text-cell {
padding: 7px 10px;
color: var(--text2);
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tr-cell-empty { color: var(--muted); font-style: italic; }
.tr-sec-badge {
display: inline-block;
font-size: .65rem;
font-weight: 700;
padding: 2px 7px;
border-radius: 20px;
background: var(--surface2);
color: var(--text2);
white-space: nowrap;
text-transform: uppercase;
letter-spacing: .04em;
}
.tr-missing-dot {
color: var(--amber, #f59e0b);
font-size: .55rem;
margin-left: 4px;
vertical-align: super;
}
.tr-edit-btn {
background: none;
border: none;
cursor: pointer;
font-size: .9rem;
padding: 4px 6px;
border-radius: 6px;
opacity: .6;
transition: opacity .15s, background .15s;
}
.tr-edit-btn:hover { opacity: 1; background: var(--surface2); }
.tr-empty, .tr-error, .tr-more {
padding: 24px;
text-align: center;
color: var(--muted);
font-size: .82rem;
}
.tr-error { color: var(--red, #ef4444); }
.tr-more { border-top: 1px solid var(--border); font-size: .72rem; }
/* ── Edit modal ────────────────────────────────────────────── */
.tr-edit-modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.55);
z-index: 9500;
align-items: center;
justify-content: center;
padding: 16px;
backdrop-filter: blur(2px);
}
.tr-edit-card {
background: var(--surface, #1a2e1e);
border: 1px solid var(--border);
border-radius: var(--r, 12px);
width: 100%;
max-width: 560px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0,0,0,.45);
animation: tr-modal-in .15s ease;
}
@keyframes tr-modal-in {
from { opacity: 0; transform: scale(.96) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.tr-edit-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px 12px;
border-bottom: 1px solid var(--border);
}
.tr-edit-body { padding: 14px 16px; }
.tr-edit-footer {
display: flex;
gap: 8px;
justify-content: flex-end;
padding: 12px 16px;
border-top: 1px solid var(--border);
}
@media (max-width: 480px) {
.tr-toolbar { flex-direction: column; align-items: stretch; }
.tr-search, .tr-select { width: 100%; flex: none; }
.tr-table-wrap { max-height: 45vh; }
.tr-edit-card { max-height: 95vh; }
}
/* ═══════════════════════════════════════════════════════════════════
USER MENU DROPDOWN — fixed positioning, mobile-safe
Positioned dynamically via JS (toggleUserMenu), never clips viewport
═══════════════════════════════════════════════════════════════════ */
#userMenuDropdown {
/* position:fixed + top/left set by JS */
animation: user-menu-in .14s cubic-bezier(.2,.8,.4,1);
transform-origin: top right;
}
@keyframes user-menu-in {
from { opacity: 0; transform: scale(.93) translateY(-6px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* ═══════════════════════════════════════════════════════════════════
TOPBAR LANGUAGE BADGE — green active-language indicator
Sits at bottom-right of the globe topbar-icon-btn
═══════════════════════════════════════════════════════════════════ */
.topbar-lang-badge {
position: absolute;
bottom: -3px;
right: -3px;
min-width: 16px;
height: 16px;
padding: 0 3px;
border-radius: 8px;
background: var(--accent, #22c55e);
color: #fff;
font-size: .58rem;
font-weight: 800;
letter-spacing: .04em;
line-height: 16px;
text-align: center;
border: 1.5px solid var(--surface, #fff);
pointer-events: none;
font-family: inherit;
}
/* Keep font-size override from topbar-icon-btn from hiding the badge text */
.topbar-icon-btn .topbar-lang-badge {
font-size: .58rem !important;
}
/* ═══════════════════════════════════════════════════════════════════
HELP — Central de Ajuda
Layout: sidebar + content area, mobile-first, totalmente responsivo
═══════════════════════════════════════════════════════════════════ */
/* ── Shell ─────────────────────────────────────────────────────── */
.help-shell {
display: flex;
height: calc(100vh - var(--topbar-h, 56px));
overflow: hidden;
}
/* ── Sidebar nav ───────────────────────────────────────────────── */
.help-nav {
width: 260px;
flex-shrink: 0;
border-right: 1px solid var(--border);
background: var(--surface);
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
}
.help-nav-header {
padding: 16px 16px 10px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.help-nav-title {
font-size: .82rem;
font-weight: 700;
color: var(--text2);
text-transform: uppercase;
letter-spacing: .06em;
}
.help-nav-sections { padding: 8px 6px; }
.help-nav-section-btn {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 8px 10px;
border: none;
background: none;
cursor: pointer;
border-radius: var(--r-sm, 8px);
font-size: .83rem;
font-weight: 600;
color: var(--text2);
text-align: left;
transition: background .12s, color .12s;
font-family: inherit;
}
.help-nav-section-btn:hover { background: var(--surface2); color: var(--text); }
.help-nav-section-btn.active { color: var(--text); background: var(--surface2); }
.help-nav-icon {
width: 26px; height: 26px;
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
font-size: .95rem;
flex-shrink: 0;
}
.help-nav-label { flex: 1; }
.help-nav-arr {
font-size: .9rem;
color: var(--muted);
transition: transform .15s;
flex-shrink: 0;
}
.help-nav-articles {
padding: 2px 0 4px 42px;
display: flex;
flex-direction: column;
gap: 1px;
}
.help-nav-article {
display: block;
width: 100%;
padding: 6px 10px;
border: none;
background: none;
cursor: pointer;
border-radius: 6px;
font-size: .78rem;
font-family: inherit;
color: var(--text2);
text-align: left;
line-height: 1.4;
transition: background .12s, color .12s;
}
.help-nav-article:hover { background: var(--surface2); color: var(--text); }
.help-nav-article.active {
background: var(--accent-lt, #052e1640);
color: var(--accent);
font-weight: 600;
}
/* ── Search ────────────────────────────────────────────────────── */
.help-search-wrap {
padding: 10px 10px 6px;
flex-shrink: 0;
position: relative;
}
.help-search {
width: 100%;
padding: 7px 12px;
border-radius: var(--r-sm);
border: 1px solid var(--border);
background: var(--surface2);
color: var(--text);
font-size: .8rem;
font-family: inherit;
box-sizing: border-box;
}
.help-search:focus { outline: none; border-color: var(--accent); }
.help-search-results {
position: absolute;
top: 100%;
left: 10px; right: 10px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-sm);
box-shadow: 0 8px 24px rgba(0,0,0,.25);
z-index: 500;
overflow: hidden;
}
.help-search-hit {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 9px 12px;
border: none;
background: none;
cursor: pointer;
text-align: left;
font-family: inherit;
border-bottom: 1px solid var(--border);
transition: background .1s;
}
.help-search-hit:last-child { border-bottom: none; }
.help-search-hit:hover { background: var(--surface2); }
.help-search-hit-sec { font-size: 1rem; flex-shrink: 0; }
.help-search-hit-title { flex: 1; font-size: .8rem; font-weight: 600; color: var(--text); }
.help-search-hit-sec-name { font-size: .7rem; color: var(--muted); flex-shrink: 0; }
.help-search-empty { padding: 14px; font-size: .8rem; color: var(--muted); text-align: center; }
/* ── Content area ──────────────────────────────────────────────── */
.help-content {
flex: 1;
overflow-y: auto;
background: var(--bg, #0f2318);
}
/* ── Home: section grid ────────────────────────────────────────── */
.help-home { padding: 24px 20px; }
.help-home-header { text-align: center; margin-bottom: 24px; }
.help-home-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--text);
margin: 0 0 6px;
}
.help-home-sub { font-size: .85rem; color: var(--muted); margin: 0; }
.help-section-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
.help-section-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 16px 14px;
border-radius: var(--r, 12px);
border: 1px solid var(--border);
background: var(--surface);
cursor: pointer;
text-align: left;
transition: border-color .15s, background .15s, transform .12s;
font-family: inherit;
border-left: 3px solid var(--help-color, var(--accent));
}
.help-section-card:hover {
background: var(--surface2);
transform: translateY(-2px);
border-color: var(--help-color, var(--accent));
}
.help-section-card-icon { font-size: 1.5rem; line-height: 1; }
.help-section-card-title { font-size: .83rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.help-section-card-count { font-size: .68rem; color: var(--muted); }
/* ── Article ───────────────────────────────────────────────────── */
.help-back-btn {
display: none; /* shown only mobile */
align-items: center;
gap: 6px;
background: none;
border: none;
cursor: pointer;
color: var(--accent);
font-size: .82rem;
font-weight: 600;
padding: 12px 20px 0;
font-family: inherit;
}
.help-article-wrap { padding: 20px 24px 60px; max-width: 720px; }
.help-breadcrumb {
display: flex;
align-items: center;
gap: 6px;
font-size: .72rem;
color: var(--muted);
margin-bottom: 10px;
}
.help-breadcrumb-sec { font-weight: 600; }
.help-breadcrumb-sep { opacity: .5; }
.help-article-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text);
margin: 0 0 20px;
line-height: 1.3;
}
/* ── Article body content ──────────────────────────────────────── */
.help-article-body {
font-size: .88rem;
line-height: 1.7;
color: var(--text2);
}
.help-article-body h4 {
font-size: .88rem;
font-weight: 700;
color: var(--text);
margin: 20px 0 8px;
padding-bottom: 4px;
border-bottom: 1px solid var(--border);
}
.help-article-body ul, .help-article-body ol {
padding-left: 20px;
margin: 8px 0 12px;
}
.help-article-body li { margin-bottom: 5px; }
.help-article-body ul ul { margin: 4px 0 4px; }
.help-article-body strong { color: var(--text); font-weight: 700; }
.help-article-body em { color: var(--accent); font-style: normal; }
.help-tip {
background: #1a3a2a;
border: 1px solid #22c55e33;
border-left: 3px solid var(--accent, #22c55e);
border-radius: var(--r-sm);
padding: 10px 14px;
margin: 14px 0;
font-size: .82rem;
color: var(--text2);
line-height: 1.6;
}
.help-warning {
background: #451a0322;
border: 1px solid #f59e0b44;
border-left: 3px solid var(--amber, #f59e0b);
border-radius: var(--r-sm);
padding: 10px 14px;
margin: 14px 0;
font-size: .82rem;
color: var(--text2);
line-height: 1.6;
}
.help-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 8px;
margin: 10px 0 14px;
}
.help-mini-card {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 10px 12px;
font-size: .78rem;
color: var(--text2);
line-height: 1.5;
}
.help-mini-card strong { display: block; color: var(--text); margin-bottom: 3px; }
/* ── Help action buttons ───────────────────────────────────────── */
.help-action-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 12px;
background: none;
border: 1.5px solid var(--accent);
color: var(--accent);
border-radius: 7px;
font-size: .75rem;
font-weight: 700;
cursor: pointer;
font-family: inherit;
transition: background .12s, color .12s;
margin-top: 4px;
white-space: nowrap;
}
.help-action-btn:hover { background: var(--accent); color: #fff; }
/* ── Help action grid (quick actions) ──────────────────────────── */
.help-action-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 10px;
margin: 12px 0;
}
.help-action-card {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
transition: border-color .15s, box-shadow .15s;
}
.help-action-card:hover {
border-color: var(--accent);
box-shadow: 0 2px 12px rgba(0,0,0,.1);
}
.help-action-icon { font-size: 1.6rem; }
.help-action-label { font-size: .74rem; font-weight: 600; color: var(--text); }
/* ── Prev / Next navigation ────────────────────────────────────── */
.help-article-nav {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 36px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.help-prev-next {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 9px 14px;
font-size: .78rem;
font-weight: 600;
color: var(--text2);
cursor: pointer;
font-family: inherit;
transition: background .12s, color .12s, border-color .12s;
max-width: 45%;
text-align: left;
line-height: 1.4;
}
.help-prev-next:hover {
background: var(--surface2);
color: var(--accent);
border-color: var(--accent);
}
.help-next { text-align: right; margin-left: auto; }
/* ── Mobile responsive ─────────────────────────────────────────── */
@media (max-width: 700px) {
/* Shell stacks vertically, no fixed height */
.help-shell {
flex-direction: column;
height: auto;
overflow: visible;
}
/* Nav becomes a collapsible top bar */
.help-nav {
width: 100%;
border-right: none;
border-bottom: 1px solid var(--border);
max-height: 52px; /* collapsed: shows only header */
overflow: hidden;
flex-shrink: 0;
transition: max-height .3s cubic-bezier(.4,0,.2,1);
}
.help-nav.expanded { max-height: 70vh; overflow-y: auto; }
/* Nav header acts as toggle */
.help-nav-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
cursor: pointer;
user-select: none;
}
.help-nav-header::after {
content: '☰';
font-size: .9rem;
color: var(--muted);
}
.help-nav.expanded .help-nav-header::after { content: '✕'; }
/* Search always below header, shown after expand */
.help-search-wrap { padding: 8px 12px 6px; }
.help-search-results {
position: fixed;
top: auto;
left: 8px; right: 8px;
z-index: 600;
}
/* Content scrolls naturally */
.help-content { overflow: visible; }
.help-back-btn { display: flex; }
/* Article — comfortable reading */
.help-article-wrap {
padding: 16px 18px 80px;
}
.help-article-title {
font-size: 1.15rem;
margin-bottom: 16px;
}
.help-article-body {
font-size: .93rem; /* larger for mobile reading */
line-height: 1.75;
}
.help-article-body h4 {
font-size: .93rem;
margin: 18px 0 8px;
}
.help-article-body li { margin-bottom: 7px; }
/* Tips and warnings — easier to read */
.help-tip, .help-warning {
font-size: .88rem;
padding: 12px 14px;
}
/* Mini cards — 1 column for easy reading */
.help-card-grid {
grid-template-columns: 1fr;
gap: 8px;
}
.help-mini-card {
font-size: .84rem;
padding: 12px 14px;
}
/* Prev/next nav — full width buttons */
.help-article-nav {
flex-direction: column;
gap: 8px;
}
.help-prev-next {
max-width: 100%;
padding: 12px 16px;
font-size: .82rem;
}
.help-next { text-align: left; margin-left: 0; }
/* Breadcrumb — keep it compact */
.help-breadcrumb { flex-wrap: wrap; gap: 4px; }
/* Home section grid */
.help-home { padding: 14px; }
.help-section-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.help-section-card { padding: 12px 10px; }
.help-section-card-icon { font-size: 1.3rem; }
}
@media (max-width: 480px) {
.help-section-grid { grid-template-columns: 1fr 1fr; }
.help-article-body { font-size: .9rem; }
.help-article-wrap { padding: 14px 14px 80px; }
}
/* ═══════════════════════════════════════════════════════════════════
BOTTOM NAV — collapsed state UX improvements
Tap anywhere on the visible handle strip to expand (no drag needed)
═══════════════════════════════════════════════════════════════════ */
/* Entire nav is clickable when collapsed — signal with pointer cursor */
.bottom-nav.is-collapsed {
cursor: pointer;
}
/* Toggle button itself stays default cursor */
.bottom-nav.is-collapsed .bottom-nav-toggle {
cursor: pointer;
}
/* Subtle entrance pulse on the handle when freshly collapsed */
@keyframes bn-handle-pulse {
0% { box-shadow: 0 0 0 0 rgba(255,255,255,.20); }
60% { box-shadow: 0 0 0 8px rgba(255,255,255,.00); }
100% { box-shadow: 0 0 0 0 rgba(255,255,255,.00); }
}
.bottom-nav.is-collapsed .bottom-nav-toggle {
animation: bn-handle-pulse .7s ease .1s 2;
}
/* ═══════════════════════════════════════════════════════════════════
RELATÓRIO — Tabela de transações: colunas otimizadas
Data compacta · Descrição elástica · Valor fixo à direita
═══════════════════════════════════════════════════════════════════ */
/* Column widths via colgroup */
.rpt-tx-table { table-layout: fixed; width: 100%; }
.rpt-col-date { width: 105px; } /* date column — enough for dd/mm/yyyy */
.rpt-col-desc { width: auto; } /* takes all remaining space */
.rpt-col-acct { width: 110px; }
.rpt-col-cat { width: 110px; }
.rpt-col-pay { width: 110px; }
.rpt-col-amt { width: 106px; }
/* Cell styles */
.rpt-td-date {
white-space: nowrap;
font-size: .78rem;
color: var(--muted);
vertical-align: middle;
padding: 7px 8px;
}
.rpt-td-desc {
vertical-align: middle;
padding: 7px 8px;
}
.rpt-desc-cell {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .84rem;
}
.rpt-td-acct {
font-size: .78rem;
color: var(--text2);
vertical-align: middle;
padding: 7px 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rpt-td-cat {
vertical-align: middle;
padding: 7px 8px;
}
.rpt-td-pay {
font-size: .78rem;
color: var(--muted);
vertical-align: middle;
padding: 7px 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rpt-td-amt {
white-space: nowrap;
font-weight: 600;
font-size: .84rem;
text-align: right;
vertical-align: middle;
padding: 7px 8px;
font-family: var(--font-serif, inherit);
}
/* ── Mobile: tabela de transações ocupa 100% sem scroll horizontal ── */
@media (max-width: 640px) {
/* Wrapper sem overflow-x para não criar scroll lateral */
.rpt-tx-table { table-layout: auto !important; width: 100% !important; }
/* Esconde colunas Conta e Beneficiário (col + th + td) */
.rpt-col-acct, .rpt-col-pay { display: none !important; }
.rpt-td-acct, .rpt-td-pay { display: none !important; }
thead .rpt-td-acct, thead .rpt-td-pay { display: none !important; }
/* Categoria compacta */
.rpt-col-cat { width: 76px; }
.rpt-td-cat { width: 76px; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Valor alinhado à direita com largura fixa */
.rpt-col-amt { width: 86px; }
.rpt-td-amt { width: 86px; }
/* Data mais compacta */
.rpt-col-date { width: 78px; }
.rpt-td-date { width: 78px; font-size: .74rem; padding: 6px 4px 6px 8px; }
/* Descrição ocupa todo o espaço restante */
.rpt-td-desc { padding: 6px 4px; }
.rpt-desc-cell { font-size: .8rem; }
/* Padding menor nas células */
.rpt-td-amt { padding: 6px 8px 6px 4px; font-size: .8rem; }
.rpt-td-cat { padding: 6px 4px; }
}
/* Telas muito pequenas: esconde Categoria também */
@media (max-width: 420px) {
.rpt-col-cat, .rpt-td-cat { display: none !important; }
thead .rpt-td-cat { display: none !important; }
.rpt-col-amt { width: 84px; }
.rpt-td-amt { width: 84px; font-size: .79rem; }
.rpt-col-date { width: 76px; }
.rpt-td-date { width: 76px; font-size: .72rem; }
}
/* ═══════════════════════════════════════════════════════════════════
AI INSIGHTS — Member cards with category/payee breakdown
═══════════════════════════════════════════════════════════════════ */
.ai-member-cards { display: flex; flex-direction: column; gap: 8px; }
.ai-member-card {
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
background: #f8fafc;
}
.ai-member-card-header {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
cursor: pointer;
user-select: none;
transition: background .12s;
}
.ai-member-card-header:hover { background: #f1f5f9; }
.ai-member-card-avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent, #16a34a), #059669);
color: #fff;
font-weight: 700;
font-size: .95rem;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.ai-member-card-info { flex: 1; min-width: 0; }
.ai-member-card-name { font-weight: 700; font-size: .88rem; color: #111827; }
.ai-member-card-sub { font-size: .75rem; color: var(--muted, #6b7280); margin-top: 1px; display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.ai-member-card-chevron { font-size: .7rem; color: #9ca3af; flex-shrink: 0; transition: transform .2s; }
.ai-member-card-body {
padding: 0 14px 12px;
border-top: 1px solid #e2e8f0;
}
.ai-mem-section-label {
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: #6b7280;
margin: 10px 0 6px;
}
/* Category bars per member */
.ai-mem-cats { display: flex; flex-direction: column; gap: 6px; }
.ai-mem-cat-item { }
.ai-mem-cat-label {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: .78rem;
color: #374151;
margin-bottom: 3px;
}
.ai-mem-cat-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.ai-mem-cat-val { white-space: nowrap; font-weight: 600; }
/* Payee list per member */
.ai-mem-pays { display: flex; flex-direction: column; gap: 3px; }
.ai-mem-pay-item {
display: flex; align-items: center; gap: 8px;
font-size: .78rem; padding: 4px 6px;
border-radius: 6px; background: #fff; border: 1px solid #f1f5f9;
}
.ai-mem-pay-rank { width: 16px; text-align: center; font-weight: 700; color: #2563eb; font-size: .72rem; flex-shrink: 0; }
.ai-mem-pay-name { flex: 1; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-mem-pay-amt { font-weight: 600; color: #111827; white-space: nowrap; }
/* AI insight per member */
.ai-mem-ai-insight {
display: flex; align-items: flex-start; gap: 8px;
margin-top: 10px; padding: 8px 10px;
background: #eff6ff; border: 1px solid #bfdbfe;
border-radius: 8px; font-size: .79rem; color: #1e40af; line-height: 1.5;
}
/* ═══════════════════════════════════════════════════════════════════
REPORTS — Category chart toggle buttons
═══════════════════════════════════════════════════════════════════ */
.rpt-cat-toggle {
display: flex;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
background: var(--surface2);
}
.rpt-cat-btn {
background: none;
border: none;
padding: 5px 12px;
font-size: .78rem;
font-weight: 500;
color: var(--muted);
cursor: pointer;
font-family: inherit;
transition: background .12s, color .12s;
white-space: nowrap;
}
.rpt-cat-btn:hover { background: var(--border); color: var(--text); }
.rpt-cat-btn.active {
background: var(--accent);
color: #fff;
font-weight: 600;
}
/* ── Contextual help button ─────────────────────────────────────── */
.help-ctx-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
border-radius: 50%;
border: 1.5px solid var(--border2);
background: var(--surface2);
color: var(--muted);
font-size: .7rem;
font-weight: 700;
cursor: pointer;
font-family: inherit;
line-height: 1;
transition: background .12s, color .12s, border-color .12s;
flex-shrink: 0;
vertical-align: middle;
margin-left: 4px;
}
.help-ctx-btn:hover {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
/* ── Forecast: category inline with description ─────────────────── */
.forecast-cat-inline {
display: inline-block;
font-size: .68rem;
font-weight: 600;
padding: 1px 5px;
border-radius: 4px;
background: color-mix(in srgb, currentColor 12%, transparent);
margin-left: 6px;
vertical-align: middle;
white-space: nowrap;
max-width: 90px;
overflow: hidden;
text-overflow: ellipsis;
}
/* ═══════════════════════════════════════════════════════════════════════════
HELP HOME — Rich landing page (.hh-*)
═══════════════════════════════════════════════════════════════════════════ */
/* ── Root scroll container ────────────────────────────────────────────── */
.hh-root {
padding-bottom: 40px;
max-width: 860px;
margin: 0 auto;
}
/* ── Hero ──────────────────────────────────────────────────────────────── */
.hh-hero {
position: relative;
overflow: hidden;
border-radius: 0 0 var(--r-lg) var(--r-lg);
padding: 40px 32px 32px;
margin-bottom: 32px;
background: linear-gradient(145deg, #0d2318 0%, #1a3d28 55%, #0e2b1c 100%);
color: #fff;
}
.hh-hero-bg {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(circle at 80% 20%, rgba(42,96,73,.55) 0%, transparent 55%),
radial-gradient(circle at 10% 80%, rgba(30,91,168,.22) 0%, transparent 45%);
}
.hh-hero-content { position: relative; z-index: 1; }
.hh-hero-logo {
font-size: 2.8rem; line-height: 1; margin-bottom: 14px;
filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
}
.hh-hero-title {
font-size: clamp(1.3rem, 4vw, 1.85rem);
font-weight: 800;
color: #fff;
margin: 0 0 10px;
line-height: 1.2;
letter-spacing: -.02em;
}
.hh-hero-sub {
font-size: clamp(.82rem, 2vw, .93rem);
color: rgba(255,255,255,.72);
line-height: 1.65;
margin: 0 0 22px;
max-width: 560px;
}
.hh-hero-cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
border-radius: 10px;
border: none;
background: #2a6049;
color: #fff;
font-size: .85rem;
font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: background .15s, transform .12s, box-shadow .15s;
box-shadow: 0 4px 14px rgba(42,96,73,.5);
}
.hh-hero-cta:hover {
background: #3d7a5e;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(42,96,73,.55);
}
/* Hero stats row */
.hh-hero-stats {
position: relative; z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,.12);
}
.hh-stat {
display: flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.1);
border-radius: 8px;
padding: 5px 10px;
backdrop-filter: blur(6px);
}
.hh-stat-icon { font-size: 1rem; }
.hh-stat-num {
font-size: .85rem; font-weight: 700; color: #fff;
}
.hh-stat-label {
font-size: .72rem; color: rgba(255,255,255,.6);
}
/* ── Section wrapper ─────────────────────────────────────────────────── */
.hh-section {
padding: 0 24px;
margin-bottom: 32px;
}
.hh-section-title {
font-size: .72rem;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .08em;
margin: 0 0 14px;
}
/* ── Feature cards ──────────────────────────────────────────────────── */
.hh-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.hh-feature-card {
display: flex;
align-items: flex-start;
gap: 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 14px;
transition: border-color .15s, box-shadow .15s;
}
.hh-feature-card:hover {
border-color: var(--border2);
box-shadow: var(--shadow-sm);
}
.hh-feature-icon {
width: 38px; height: 38px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
}
.hh-feature-body { min-width: 0; }
.hh-feature-title {
display: block;
font-size: .82rem;
font-weight: 700;
color: var(--text);
margin-bottom: 3px;
}
.hh-feature-desc {
font-size: .76rem;
color: var(--muted);
line-height: 1.55;
margin: 0;
}
/* ── Quick access links ─────────────────────────────────────────────── */
.hh-quick-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
}
.hh-quick-btn {
display: flex;
align-items: center;
gap: 9px;
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--r-sm);
padding: 10px 12px;
cursor: pointer;
font-family: inherit;
text-align: left;
transition: background .12s, border-color .12s, transform .1s;
}
.hh-quick-btn:hover {
background: var(--accent-lt);
border-color: var(--accent);
transform: translateX(2px);
}
.hh-quick-icon { font-size: 1.05rem; flex-shrink: 0; }
.hh-quick-label {
flex: 1;
font-size: .79rem;
font-weight: 600;
color: var(--text);
line-height: 1.3;
}
.hh-quick-arr {
font-size: .85rem;
color: var(--accent);
flex-shrink: 0;
transition: transform .12s;
}
.hh-quick-btn:hover .hh-quick-arr { transform: translateX(3px); }
/* ── Topic cards grid ───────────────────────────────────────────────── */
.hh-topics {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 10px;
}
.hh-topic-card {
display: flex;
flex-direction: column;
gap: 8px;
background: var(--surface);
border: 1px solid var(--border);
border-top: 3px solid var(--tc, var(--accent));
border-radius: var(--r);
padding: 14px 14px 12px;
cursor: pointer;
font-family: inherit;
text-align: left;
transition: border-color .15s, box-shadow .15s, transform .12s;
}
.hh-topic-card:hover {
box-shadow: var(--shadow);
transform: translateY(-2px);
border-color: var(--tc, var(--accent));
}
.hh-topic-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.hh-topic-icon { font-size: 1.4rem; }
.hh-topic-badge {
font-size: .65rem;
font-weight: 700;
color: var(--tc, var(--accent));
background: color-mix(in srgb, var(--tc, var(--accent)) 12%, transparent);
padding: 2px 7px;
border-radius: 20px;
}
.hh-topic-title {
font-size: .84rem;
font-weight: 700;
color: var(--text);
line-height: 1.25;
}
.hh-topic-articles { display: flex; flex-direction: column; gap: 2px; }
.hh-topic-art {
font-size: .71rem;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.5;
}
.hh-topic-more {
color: var(--tc, var(--accent));
font-weight: 600;
}
/* ── Tip of the day banner ──────────────────────────────────────────── */
.hh-tip-banner {
display: flex;
align-items: flex-start;
gap: 14px;
background: linear-gradient(120deg, var(--amber-lt) 0%, #fffbeb 100%);
border: 1px solid #f59e0b44;
border-left: 4px solid var(--amber);
border-radius: var(--r);
padding: 16px 18px;
}
.hh-tip-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 1px; }
.hh-tip-body { flex: 1; min-width: 0; }
.hh-tip-label {
font-size: .68rem;
font-weight: 700;
color: var(--amber);
text-transform: uppercase;
letter-spacing: .07em;
margin-bottom: 5px;
}
.hh-tip-text {
font-size: .82rem;
color: var(--text2);
line-height: 1.6;
margin: 0;
}
.hh-tip-btn {
flex-shrink: 0;
align-self: center;
background: var(--amber);
color: #fff;
border: none;
border-radius: 8px;
padding: 7px 13px;
font-size: .76rem;
font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: background .12s;
white-space: nowrap;
}
.hh-tip-btn:hover { background: #92400e; }
/* ── Footer ─────────────────────────────────────────────────────────── */
.hh-footer {
padding: 0 24px;
text-align: center;
font-size: .72rem;
color: var(--muted2);
}
/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.hh-hero { padding: 28px 20px 24px; border-radius: 0; margin-bottom: 24px; }
.hh-hero-title { font-size: 1.25rem; }
.hh-features { grid-template-columns: 1fr; }
.hh-quick-grid { grid-template-columns: 1fr; }
.hh-topics { grid-template-columns: 1fr 1fr; }
.hh-section { padding: 0 16px; }
.hh-tip-banner { flex-direction: column; gap: 10px; }
.hh-tip-btn { align-self: flex-start; }
.hh-hero-stats { gap: 6px; }
.hh-stat { padding: 4px 8px; }
.hh-stat-label { display: none; }
}
@media (max-width: 400px) {
.hh-topics { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════════════════
HELP HOME v2 — Immersive landing (.hh2-*)
═══════════════════════════════════════════════════════════════════════════ */
@keyframes hh2FadeUp {
from { opacity:0; transform:translateY(14px); }
to { opacity:1; transform:translateY(0); }
}
@keyframes hh2PulseRing {
0% { transform:scale(1); opacity:.6; }
70% { transform:scale(2.2); opacity:0; }
100% { transform:scale(1); opacity:0; }
}
/* ── Root ──────────────────────────────────────────────────────────────── */
.hh2-root {
padding-bottom: 48px;
animation: hh2FadeUp .35s ease both;
}
/* ── HERO ──────────────────────────────────────────────────────────────── */
.hh2-hero {
position: relative;
overflow: hidden;
background: linear-gradient(150deg, #091d10 0%, #0d2318 40%, #142b1e 70%, #0a1f13 100%);
padding: 44px 32px 36px;
margin-bottom: 36px;
border-radius: 0 0 20px 20px;
}
.hh2-hero-deco {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 70% 60% at 90% 10%, rgba(42,96,73,.45) 0%, transparent 65%),
radial-gradient(ellipse 50% 40% at 5% 85%, rgba(30,91,168,.18) 0%, transparent 60%),
radial-gradient(ellipse 30% 30% at 50% 50%, rgba(42,96,73,.08) 0%, transparent 70%);
}
.hh2-hero-inner { position: relative; z-index: 1; }
.hh2-hero-badge {
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.14);
border-radius: 20px;
padding: 4px 12px;
font-size: .7rem;
font-weight: 700;
color: rgba(255,255,255,.75);
letter-spacing: .04em;
text-transform: uppercase;
margin-bottom: 16px;
backdrop-filter: blur(8px);
}
.hh2-hero-badge-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 6px #4ade80;
animation: hh2PulseRing 2.2s ease infinite;
display: inline-block;
flex-shrink: 0;
}
.hh2-hero-title {
font-size: clamp(1.45rem, 4.5vw, 2rem);
font-weight: 800;
color: #fff;
margin: 0 0 12px;
line-height: 1.18;
letter-spacing: -.025em;
max-width: 520px;
}
.hh2-hero-sub {
font-size: clamp(.8rem, 2vw, .9rem);
color: rgba(255,255,255,.65);
line-height: 1.7;
margin: 0 0 26px;
max-width: 500px;
}
.hh2-hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hh2-cta-primary {
display: inline-flex; align-items: center; gap: 8px;
padding: 11px 22px;
background: var(--accent);
color: #fff;
border: none; border-radius: 10px;
font-size: .85rem; font-weight: 700; font-family: inherit;
cursor: pointer;
box-shadow: 0 4px 18px rgba(42,96,73,.55);
transition: background .15s, transform .12s, box-shadow .15s;
}
.hh2-cta-primary:hover {
background: var(--accent2);
transform: translateY(-2px);
box-shadow: 0 7px 24px rgba(42,96,73,.6);
}
.hh2-cta-ghost {
background: none; border: 1px solid rgba(255,255,255,.22);
color: rgba(255,255,255,.7);
padding: 10px 18px; border-radius: 10px;
font-size: .82rem; font-weight: 600; font-family: inherit;
cursor: pointer;
transition: border-color .12s, color .12s, background .12s;
}
.hh2-cta-ghost:hover {
border-color: rgba(255,255,255,.45);
color: #fff;
background: rgba(255,255,255,.06);
}
/* Module pills row */
.hh2-hero-modules {
position: relative; z-index: 1;
display: flex; flex-wrap: wrap; gap: 7px;
margin-top: 28px;
padding-top: 22px;
border-top: 1px solid rgba(255,255,255,.1);
}
.hh2-module-pill {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.12);
border-radius: 20px;
padding: 5px 12px;
font-size: .74rem; font-weight: 600; font-family: inherit;
color: rgba(255,255,255,.78);
cursor: pointer;
transition: background .12s, border-color .12s, color .12s;
backdrop-filter: blur(6px);
}
.hh2-module-pill:hover {
background: rgba(255,255,255,.14);
border-color: color-mix(in srgb, var(--mc) 60%, rgba(255,255,255,.3));
color: #fff;
}
/* ── Section wrapper ─────────────────────────────────────────────────── */
.hh2-section { padding: 0 24px; margin-bottom: 36px; }
.hh2-section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.hh2-section-title {
font-size: .68rem; font-weight: 800; color: var(--muted);
text-transform: uppercase; letter-spacing: .1em;
white-space: nowrap; margin: 0;
}
.hh2-section-line { flex: 1; height: 1px; background: var(--border); }
/* ── Why cards ──────────────────────────────────────────────────────── */
.hh2-why-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.hh2-why-card {
background: var(--wbg, var(--surface));
border: 1px solid color-mix(in srgb, var(--wc) 20%, var(--border));
border-radius: var(--r);
padding: 16px;
animation: hh2FadeUp .4s ease both;
transition: transform .14s, box-shadow .14s;
}
.hh2-why-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.hh2-why-icon { font-size: 1.6rem; margin-bottom: 8px; line-height: 1; }
.hh2-why-title {
font-size: .82rem; font-weight: 700;
color: var(--wc, var(--text));
margin-bottom: 5px; line-height: 1.25;
}
.hh2-why-text { font-size: .75rem; color: var(--text2); line-height: 1.6; margin: 0; }
/* ── Journey ────────────────────────────────────────────────────────── */
.hh2-journey { display: flex; flex-direction: column; gap: 0; }
.hh2-journey-step {
position: relative;
display: flex; align-items: flex-start; gap: 14px;
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--jc, var(--accent));
border-radius: var(--r);
padding: 14px 14px 14px 14px;
cursor: pointer; font-family: inherit; text-align: left;
transition: background .12s, border-color .12s, transform .1s;
margin-bottom: 8px;
animation: hh2FadeUp .4s ease both;
}
.hh2-journey-step:hover {
background: var(--bg2);
transform: translateX(3px);
border-color: var(--jc, var(--accent));
}
.hh2-journey-step-num {
position: absolute; top: -8px; left: 12px;
width: 18px; height: 18px;
border-radius: 50%;
color: #fff; font-size: .65rem; font-weight: 800;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; line-height: 1;
}
.hh2-journey-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.hh2-journey-body { flex: 1; min-width: 0; }
.hh2-journey-title { font-size: .83rem; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.hh2-journey-desc { font-size: .74rem; color: var(--muted); line-height: 1.55; }
.hh2-journey-arr { font-size: 1.2rem; color: var(--jc); flex-shrink: 0; transition: transform .12s; align-self: center; }
.hh2-journey-step:hover .hh2-journey-arr { transform: translateX(4px); }
/* ── Docs grid ──────────────────────────────────────────────────────── */
.hh2-docs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
}
.hh2-doc-card {
display: flex; flex-direction: column; gap: 7px;
background: var(--surface);
border: 1px solid var(--border);
border-top: 3px solid var(--dc, var(--accent));
border-radius: var(--r); padding: 14px;
cursor: pointer; font-family: inherit; text-align: left;
transition: box-shadow .14s, transform .12s, border-color .12s;
position: relative; overflow: hidden;
}
.hh2-doc-card::before {
content: '';
position: absolute; inset: 0;
background: color-mix(in srgb, var(--dc) 4%, transparent);
opacity: 0; transition: opacity .15s;
}
.hh2-doc-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.hh2-doc-card:hover::before { opacity: 1; }
.hh2-doc-card-top { display: flex; align-items: center; justify-content: space-between; }
.hh2-doc-icon { font-size: 1.4rem; }
.hh2-doc-badge {
font-size: .62rem; font-weight: 700;
color: var(--dc, var(--accent));
background: color-mix(in srgb, var(--dc) 12%, transparent);
padding: 2px 7px; border-radius: 20px;
}
.hh2-doc-title { font-size: .82rem; font-weight: 700; color: var(--text); line-height: 1.25; }
.hh2-doc-arts { display: flex; flex-direction: column; gap: 3px; }
.hh2-doc-art {
display: flex; align-items: center; gap: 6px;
font-size: .7rem; color: var(--muted); line-height: 1.45;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hh2-doc-art-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.hh2-doc-art-more { color: var(--dc, var(--accent)); font-weight: 600; }
.hh2-doc-arrow {
font-size: .9rem; font-weight: 700; margin-top: auto;
transition: transform .12s;
}
.hh2-doc-card:hover .hh2-doc-arrow { transform: translateX(3px); }
/* ── Tip card ───────────────────────────────────────────────────────── */
.hh2-tip-card {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
background: linear-gradient(120deg, #fffbeb 0%, #fefce8 50%, #fff7ed 100%);
border: 1px solid #fbbf2440;
border-left: 4px solid var(--amber);
border-radius: var(--r);
padding: 20px 22px;
}
.hh2-tip-left { display: flex; align-items: flex-start; gap: 14px; flex: 1; min-width: 0; }
.hh2-tip-icon-wrap {
position: relative;
font-size: 1.6rem; flex-shrink: 0; line-height: 1;
}
.hh2-tip-pulse {
position: absolute; inset: -4px;
border-radius: 50%;
border: 2px solid var(--amber);
animation: hh2PulseRing 3s ease infinite;
}
.hh2-tip-label {
font-size: .65rem; font-weight: 800; color: var(--amber);
text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px;
}
.hh2-tip-text {
font-size: .83rem; color: var(--text2); line-height: 1.65;
margin: 0; transition: opacity .16s, transform .16s;
}
.hh2-tip-right {
display: flex; flex-direction: column;
align-items: flex-end; gap: 12px; flex-shrink: 0;
}
.hh2-tip-dots { display: flex; gap: 5px; }
.hh2-tip-dot {
width: 7px; height: 7px; border-radius: 50%;
border: none; background: #fcd34d50; cursor: pointer;
transition: background .15s, transform .12s;
padding: 0;
}
.hh2-tip-dot.active { background: var(--amber); transform: scale(1.2); }
.hh2-tip-more {
background: var(--amber); color: #fff; border: none;
border-radius: 8px; padding: 7px 14px;
font-size: .74rem; font-weight: 700; font-family: inherit;
cursor: pointer; transition: background .12s, transform .1s; white-space: nowrap;
}
.hh2-tip-more:hover { background: #b45309; transform: translateY(-1px); }
/* ── Language strip ─────────────────────────────────────────────────── */
.hh2-lang-strip {
display: flex; align-items: center; justify-content: space-between;
gap: 20px; flex-wrap: wrap;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 18px 22px;
}
.hh2-lang-copy { flex: 1; min-width: 160px; }
.hh2-lang-title { font-size: .82rem; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.hh2-lang-sub { font-size: .74rem; color: var(--muted); line-height: 1.5; }
.hh2-lang-pills { display: flex; gap: 7px; flex-wrap: wrap; }
.hh2-lang-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 13px;
background: var(--bg2); border: 1px solid var(--border);
border-radius: 20px; font-size: .78rem; font-weight: 600;
font-family: inherit; color: var(--text2); cursor: pointer;
transition: background .12s, border-color .12s, color .12s, transform .1s;
}
.hh2-lang-pill:hover { background: var(--accent-lt); border-color: var(--accent); color: var(--accent); }
.hh2-lang-pill.active {
background: var(--accent); border-color: var(--accent);
color: #fff; transform: scale(1.04);
}
.hh2-lang-flag { font-size: 1rem; }
/* ── Footer ─────────────────────────────────────────────────────────── */
.hh2-footer {
padding: 0 24px;
text-align: center;
padding-top: 10px;
border-top: 1px solid var(--border);
margin: 0 24px;
}
.hh2-footer-logo { font-size: .9rem; font-weight: 700; color: var(--text2); margin-bottom: 3px; }
.hh2-footer-tagline { font-size: .73rem; color: var(--muted); }
/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.hh2-root { padding-bottom: 32px; }
.hh2-hero {
padding: 28px 18px 24px;
margin-bottom: 24px;
border-radius: 0 0 16px 16px;
}
.hh2-hero-title { font-size: 1.3rem; margin-bottom: 10px; }
.hh2-hero-sub { font-size: .82rem; margin-bottom: 20px; }
.hh2-hero-badge { font-size: .65rem; padding: 3px 10px; margin-bottom: 12px; }
.hh2-cta-primary { padding: 10px 18px; font-size: .82rem; }
.hh2-cta-ghost { padding: 9px 14px; font-size: .78rem; }
.hh2-hero-modules { margin-top: 20px; padding-top: 16px; gap: 6px; }
.hh2-module-pill { font-size: .7rem; padding: 4px 10px; }
.hh2-section { padding: 0 14px; margin-bottom: 26px; }
.hh2-section-title { font-size: .62rem; }
/* Why cards: 1 column on small screens */
.hh2-why-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.hh2-why-card { padding: 12px 12px; }
.hh2-why-icon { font-size: 1.3rem; margin-bottom: 6px; }
.hh2-why-title { font-size: .78rem; }
.hh2-why-text { font-size: .72rem; }
/* Journey — compact */
.hh2-journey-step { padding: 12px 10px 12px 12px; gap: 10px; }
.hh2-journey-icon { font-size: 1.2rem; }
.hh2-journey-title { font-size: .8rem; }
.hh2-journey-desc { font-size: .71rem; }
/* Docs: 1 column */
.hh2-docs-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.hh2-doc-card { padding: 12px; gap: 5px; }
.hh2-doc-icon { font-size: 1.2rem; }
.hh2-doc-title { font-size: .78rem; }
.hh2-doc-art { font-size: .67rem; }
/* Tip card */
.hh2-tip-card { padding: 16px; flex-direction: column; gap: 12px; }
.hh2-tip-icon-wrap { font-size: 1.3rem; }
.hh2-tip-text { font-size: .82rem; }
.hh2-tip-right {
flex-direction: row; align-items: center;
width: 100%; justify-content: space-between;
}
/* Lang strip */
.hh2-lang-strip { flex-direction: column; gap: 12px; padding: 14px 16px; }
.hh2-lang-pill { padding: 6px 11px; font-size: .75rem; }
.hh2-footer { margin: 0 14px; padding-top: 8px; }
}
@media (max-width: 400px) {
.hh2-why-grid { grid-template-columns: 1fr; }
.hh2-docs-grid { grid-template-columns: 1fr; }
.hh2-hero-actions { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* ── Dashboard category chart — controls bar ───────────────────────────── */
.dash-cat-controls {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
flex-wrap: wrap;
}
.dash-cat-toggle {
display: flex;
border: 1px solid var(--border);
border-radius: 7px;
overflow: hidden;
flex-shrink: 0;
}
.dash-cat-btn {
padding: 4px 11px;
border: none;
background: var(--surface);
color: var(--muted);
font-size: .74rem;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: background .13s, color .13s;
white-space: nowrap;
line-height: 1.5;
}
.dash-cat-btn + .dash-cat-btn {
border-left: 1px solid var(--border);
}
.dash-cat-btn.active {
background: var(--accent);
color: #fff;
font-weight: 600;
}
.dash-cat-btn:hover:not(.active) {
background: var(--bg2);
color: var(--text2);
}
.dash-cat-back {
background: none;
border: 1px solid var(--border);
border-radius: 6px;
color: var(--muted);
font-size: .74rem;
font-family: inherit;
cursor: pointer;
padding: 4px 9px;
transition: color .12s, border-color .12s;
}
.dash-cat-back:hover { color: var(--text); border-color: var(--border2); }
/* ═══════════════════════════════════════════════════════════════════════════
DEBTS MODULE (.dbt-*)
═══════════════════════════════════════════════════════════════════════════ */
/* ── KPI strip ─────────────────────────────────────────────────────────── */
.dbt-kpi-strip {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 10px;
}
.dbt-kpi {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 3px;
}
.dbt-kpi-label {
font-size: .68rem;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .05em;
}
.dbt-kpi-value {
font-size: 1.05rem;
font-weight: 700;
color: var(--text);
}
/* ── Debt card ─────────────────────────────────────────────────────────── */
.dbt-card {
transition: box-shadow .14s, transform .12s;
}
.dbt-card:hover {
box-shadow: 0 6px 20px rgba(0,0,0,.08);
transform: translateY(-1px);
}
.dbt-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
gap: 12px;
}
.dbt-card-name {
font-size: .9rem;
font-weight: 700;
color: var(--text);
margin-bottom: 2px;
}
.dbt-card-creditor {
font-size: .75rem;
color: var(--muted);
}
.dbt-card-balance {
font-size: 1rem;
font-weight: 700;
color: var(--red);
margin-bottom: 3px;
text-align: right;
}
.dbt-badge {
display: inline-block;
font-size: .65rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: .04em;
}
/* ── Progress bar ──────────────────────────────────────────────────────── */
.dbt-progress-bar {
height: 4px;
background: var(--border);
border-radius: 2px;
margin-bottom: 8px;
overflow: hidden;
}
.dbt-progress-fill {
height: 100%;
background: var(--accent);
border-radius: 2px;
transition: width .3s ease;
}
.dbt-card-meta {
display: flex;
gap: 12px;
font-size: .72rem;
color: var(--muted);
flex-wrap: wrap;
}
/* ── Detail view ───────────────────────────────────────────────────────── */
.dbt-detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.dbt-detail-name {
font-size: 1.15rem;
font-weight: 800;
color: var(--text);
margin: 0 0 4px;
}
.dbt-detail-creditor {
display: flex;
align-items: center;
gap: 8px;
font-size: .82rem;
color: var(--text2);
margin-bottom: 4px;
}
.dbt-detail-label {
font-size: .72rem;
color: var(--muted);
min-width: 60px;
}
.dbt-meta-row {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid var(--border);
font-size: .8rem;
color: var(--text2);
}
.dbt-meta-row span { min-width: 100px; color: var(--muted); flex-shrink: 0; }
/* ── Ledger ────────────────────────────────────────────────────────────── */
.dbt-ledger {
max-height: 420px;
overflow-y: auto;
border: 1px solid var(--border);
border-radius: var(--r-sm);
}
.dbt-ledger-entry {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
transition: background .1s;
}
.dbt-ledger-entry:last-child { border-bottom: none; }
.dbt-ledger-entry:hover { background: var(--surface2); }
.dbt-ledger-left { min-width: 0; flex: 1; }
.dbt-ledger-type {
font-size: .78rem;
font-weight: 600;
color: var(--text);
margin-bottom: 2px;
}
.dbt-ledger-date { font-size: .7rem; color: var(--muted); }
.dbt-ledger-desc {
font-size: .72rem;
color: var(--text2);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Amortization banner in tx modal ──────────────────────────────────── */
.dbt-amort-banner {
background: linear-gradient(120deg, #fef3c7 0%, #fffbeb 100%);
border: 1px solid #f59e0b44;
border-left: 4px solid var(--amber);
border-radius: var(--r-sm);
padding: 12px 14px;
margin: 12px 0;
}
.dbt-amort-inner {
display: flex;
align-items: flex-start;
gap: 12px;
}
.dbt-amort-icon { font-size: 1.4rem; flex-shrink: 0; }
.dbt-amort-body { flex: 1; }
.dbt-amort-title {
font-size: .8rem;
font-weight: 700;
color: var(--amber);
margin-bottom: 2px;
}
.dbt-amort-sub { font-size: .77rem; color: var(--text2); }
.dbt-amort-banner-ok {
font-size: .8rem;
font-weight: 600;
color: var(--green);
padding: 6px 0;
}
/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.dbt-detail-grid { grid-template-columns: 1fr; }
.dbt-kpi-strip { grid-template-columns: 1fr 1fr; }
}
/* ═══════════════════════════════════════════════════════════════════════════
FAMILY MANAGEMENT MODAL — Modern minimal redesign (.mfm-*)
═══════════════════════════════════════════════════════════════════════════ */
/* ── Sheet container ────────────────────────────────────────────────────── */
.mfm-sheet {
background: var(--surface);
border-radius: 20px 20px 0 0;
width: 100%;
max-width: 540px;
margin: auto auto 0;
display: flex;
flex-direction: column;
max-height: 90vh;
overflow: hidden;
box-shadow: 0 -4px 40px rgba(0,0,0,.18);
}
@media (min-width: 600px) {
.mfm-sheet {
border-radius: 20px;
margin: auto;
}
}
/* ── Header ─────────────────────────────────────────────────────────────── */
.mfm-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 20px 16px;
flex-shrink: 0;
border-bottom: 1px solid var(--border);
}
.mfm-header-left { display: flex; align-items: center; gap: 12px; }
.mfm-family-icon {
width: 38px; height: 38px;
border-radius: 10px;
background: var(--accent-lt);
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
}
.mfm-header-title {
font-size: .95rem;
font-weight: 700;
color: var(--text);
line-height: 1.2;
}
.mfm-header-sub {
font-size: .72rem;
color: var(--muted);
margin-top: 1px;
}
/* ── Family tabs (multi-family) ──────────────────────────────────────────── */
.mfm-family-tabs {
display: flex;
overflow-x: auto;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
padding: 0 16px;
gap: 2px;
}
/* ── Scrollable body ─────────────────────────────────────────────────────── */
.mfm-body {
flex: 1;
overflow-y: auto;
padding: 8px 0 20px;
}
/* ── Section ─────────────────────────────────────────────────────────────── */
.mfm-section {
padding: 16px 20px 0;
}
.mfm-section + .mfm-section {
border-top: 1px solid var(--border);
margin-top: 16px;
padding-top: 16px;
}
.mfm-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.mfm-section-label {
font-size: .65rem;
font-weight: 800;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .1em;
margin-bottom: 12px;
display: block;
}
.mfm-section-header .mfm-section-label { margin-bottom: 0; }
/* ── Add member button ────────────────────────────────────────────────────── */
.mfm-add-btn {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: .74rem;
font-weight: 600;
color: var(--accent);
background: var(--accent-lt);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
border-radius: 20px;
padding: 4px 10px;
cursor: pointer;
font-family: inherit;
transition: background .12s, color .12s;
}
.mfm-add-btn:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
/* ── Modules grid ─────────────────────────────────────────────────────────── */
.mfm-modules-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 8px;
}
.mfm-module-card {
display: flex;
flex-direction: column;
gap: 5px;
padding: 12px;
border-radius: var(--r);
border: 1.5px solid var(--border);
background: var(--surface2);
cursor: pointer;
text-align: left;
font-family: inherit;
transition: border-color .14s, background .14s, transform .1s;
}
.mfm-module-card:hover { transform: translateY(-1px); border-color: var(--border2); }
.mfm-module-card.on {
border-color: var(--accent);
background: var(--accent-lt);
}
.mfm-module-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
}
.mfm-module-emoji { font-size: 1.1rem; line-height: 1; }
.mfm-module-pill {
font-size: .58rem;
font-weight: 700;
padding: 2px 6px;
border-radius: 10px;
background: var(--border);
color: var(--muted);
text-transform: uppercase;
letter-spacing: .03em;
white-space: nowrap;
}
.mfm-module-pill.on {
background: color-mix(in srgb, var(--accent) 15%, transparent);
color: var(--accent);
}
.mfm-module-label {
font-size: .78rem;
font-weight: 700;
color: var(--text);
line-height: 1.2;
}
.mfm-module-desc {
font-size: .68rem;
color: var(--muted);
line-height: 1.3;
}
/* ── Members list ─────────────────────────────────────────────────────────── */
.mfm-members-list {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 240px;
overflow-y: auto;
}
.mfm-member-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: var(--bg2);
border-radius: 10px;
border: 1px solid var(--border);
transition: border-color .12s;
}
.mfm-member-row:hover { border-color: var(--border2); }
.mfm-member-avatar { flex-shrink: 0; }
.mfm-member-info { flex: 1; min-width: 0; }
.mfm-member-name {
font-size: .82rem;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mfm-member-email {
font-size: .7rem;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mfm-role-select {
font-size: .74rem;
padding: 4px 6px;
border-radius: 7px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
width: 100px;
flex-shrink: 0;
font-family: inherit;
}
.mfm-remove-btn {
background: none;
border: none;
cursor: pointer;
color: var(--muted);
font-size: .85rem;
padding: 4px 6px;
border-radius: 6px;
transition: color .12s, background .12s;
flex-shrink: 0;
}
.mfm-remove-btn:hover { color: var(--red); background: var(--red-lt); }
/* ── Add member panel ─────────────────────────────────────────────────────── */
.mfm-add-panel {
margin-top: 12px;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 14px;
}
.mfm-add-tabs {
display: flex;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
margin-bottom: 12px;
}
.mfm-add-tab {
flex: 1;
padding: 7px 12px;
border: none;
background: var(--surface2);
color: var(--muted);
font-size: .76rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background .12s, color .12s;
}
.mfm-add-tab + .mfm-add-tab { border-left: 1px solid var(--border); }
.mfm-add-tab.active {
background: var(--accent);
color: #fff;
}
.mfm-add-pane { display: flex; flex-direction: column; gap: 8px; }
.mfm-add-row { display: flex; gap: 8px; align-items: center; }
.mfm-msg {
font-size: .76rem;
margin-top: 8px;
padding: 7px 11px;
border-radius: var(--r-sm);
}
/* ═══════════════════════════════════════════════════════════════════════════
REPORT BUDGET TAB (.rbt-*)
═══════════════════════════════════════════════════════════════════════════ */
.rbt-kpi-strip {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.rbt-kpi {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 10px 14px;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 110px;
}
.rbt-kpi-label {
font-size: .64rem;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .06em;
}
.rbt-kpi-val {
font-size: 1rem;
font-weight: 700;
color: var(--text);
}
.rbt-type-toggle {
display: flex;
border: 1px solid var(--border);
border-radius: var(--r-sm);
overflow: hidden;
}
.rbt-type-btn {
padding: 5px 14px;
border: none;
background: var(--surface);
color: var(--muted);
font-size: .78rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background .12s, color .12s;
}
.rbt-type-btn + .rbt-type-btn { border-left: 1px solid var(--border); }
.rbt-type-btn.active { background: var(--accent); color: #fff; }
.rbt-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
}
.rbt-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 14px 16px;
transition: box-shadow .14s;
}
.rbt-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); }
.rbt-card.rbt-over {
border-color: color-mix(in srgb, var(--red) 40%, var(--border));
background: color-mix(in srgb, var(--red) 3%, var(--surface));
}
.rbt-card.rbt-near {
border-color: color-mix(in srgb, var(--amber) 40%, var(--border));
}
.rbt-card-top {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.rbt-cat-badge {
width: 34px; height: 34px;
border-radius: 9px;
display: flex; align-items: center; justify-content: center;
font-size: 1.05rem;
flex-shrink: 0;
}
.rbt-card-info { flex: 1; min-width: 0; }
.rbt-cat-name {
font-size: .83rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rbt-amounts {
font-size: .73rem;
color: var(--muted);
margin-top: 1px;
}
.rbt-sep { margin: 0 3px; }
.rbt-pct {
font-size: .88rem;
font-weight: 800;
flex-shrink: 0;
}
.rbt-bar-track {
height: 5px;
background: var(--border);
border-radius: 3px;
overflow: hidden;
margin-bottom: 7px;
}
.rbt-bar-fill {
height: 100%;
border-radius: 3px;
transition: width .4s ease;
}
.rbt-avail {
font-size: .72rem;
color: var(--muted);
}
/* ── cat chart detail — full-height tx list ────────────────────────────── */
#catChartDetail {
animation: none;
}
/* ═══════════════════════════════════════════════════════════════════════════
SCHEDULED CATEGORIES VIEW (.sc-cats-*)
═══════════════════════════════════════════════════════════════════════════ */
/* ── Type filter toggle ────────────────────────────────────────────────── */
.sc-cats-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-cats-type-toggle {
display: flex;
border: 1px solid var(--border);
border-radius: var(--r-sm);
overflow: hidden;
}
.sc-cats-type-btn {
padding: 6px 14px;
border: none;
background: var(--surface);
color: var(--muted);
font-size: .78rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background .12s, color .12s;
}
.sc-cats-type-btn + .sc-cats-type-btn { border-left: 1px solid var(--border); }
.sc-cats-type-btn.active { background: var(--accent); color: #fff; }
/* ── KPI strip ─────────────────────────────────────────────────────────── */
.sc-cats-kpis {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.sc-cats-kpi {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 10px 14px;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 100px;
}
.sc-cats-kpi-lbl {
font-size: .64rem;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .06em;
}
.sc-cats-kpi-val {
font-size: .98rem;
font-weight: 700;
color: var(--text);
}
/* ── Category cards ────────────────────────────────────────────────────── */
.sc-cats-card { cursor: default; }
.sc-cats-card-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.sc-cats-dot {
width: 10px; height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.sc-cats-card-info { flex: 1; min-width: 0; }
.sc-cats-card-name {
display: block;
font-size: .85rem;
font-weight: 700;
color: var(--text);
}
.sc-cats-card-count {
font-size: .7rem;
color: var(--muted);
}
.sc-cats-card-right { text-align: right; flex-shrink: 0; }
.sc-cats-card-total {
display: block;
font-size: .9rem;
font-weight: 700;
color: var(--text);
}
.sc-cats-card-pct {
font-size: .7rem;
color: var(--muted);
}
/* ── Progress bar ──────────────────────────────────────────────────────── */
.sc-cats-bar-track {
height: 4px;
background: var(--border);
border-radius: 2px;
margin-bottom: 10px;
overflow: hidden;
}
.sc-cats-bar-fill {
height: 100%;
border-radius: 2px;
transition: width .35s ease;
}
/* ── Item rows ─────────────────────────────────────────────────────────── */
.sc-cats-item-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 0;
border-top: 1px solid var(--border);
cursor: pointer;
transition: background .1s;
border-radius: 3px;
}
.sc-cats-item-row:hover { background: var(--bg2); }
.sc-cats-item-desc {
font-size: .78rem;
color: var(--text2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
flex: 1;
}
.sc-cats-item-amt {
font-size: .78rem;
font-weight: 600;
color: var(--text);
flex-shrink: 0;
margin-left: 10px;
}
.sc-cats-item-more {
font-size: .72rem;
color: var(--accent);
font-weight: 600;
padding-top: 5px;
border-top: 1px solid var(--border);
}
/* ═══════════════════════════════════════════════════════════════════════════
AI FORECAST SECTION (.ai-forecast-* .ai-proj-* .ai-budget-insight)
═══════════════════════════════════════════════════════════════════════════ */
.ai-section-forecast {
border-left: 3px solid var(--accent);
background: color-mix(in srgb, var(--accent) 3%, var(--surface));
}
.ai-risk-badge {
font-size: .65rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 10px;
margin-left: 8px;
text-transform: uppercase;
letter-spacing: .04em;
}
.ai-forecast-outlook {
font-size: .85rem;
color: var(--text2);
line-height: 1.65;
margin: 0 0 14px;
font-style: italic;
}
.ai-forecast-rcm {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 12px 14px;
margin-bottom: 14px;
}
.ai-forecast-rcm-title {
font-size: .68rem;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 10px;
}
.ai-subsection-title {
font-size: .72rem;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .06em;
margin: 14px 0 8px;
}
.ai-proj-table { margin-top: 6px; }
/* Risks */
.ai-forecast-risks,
.ai-forecast-opps {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 4px;
}
.ai-forecast-risk-item,
.ai-forecast-opp-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 12px;
border-radius: var(--r-sm);
border: 1px solid var(--border);
background: var(--surface2);
}
.ai-forecast-risk-item { border-color: color-mix(in srgb, var(--amber) 25%, var(--border)); }
.ai-forecast-opp-item { border-color: color-mix(in srgb, var(--accent) 20%, var(--border)); }
.ai-forecast-risk-icon,
.ai-forecast-opp-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.ai-forecast-risk-title,
.ai-forecast-opp-title { font-size: .8rem; font-weight: 600; color: var(--text); }
.ai-forecast-risk-mit,
.ai-forecast-opp-act { font-size: .74rem; color: var(--muted); margin-top: 2px; }
/* Budget insights */
.ai-budget-insight {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 0;
border-bottom: 1px solid var(--border);
}
.ai-budget-insight:last-child { border-bottom: none; }
.ai-budget-insight-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.ai-budget-insight-text {
font-size: .78rem;
color: var(--text2);
margin: 3px 0 0;
line-height: 1.5;
}
/* ═══════════════════════════════════════════════════════════════════════════
AI INSIGHTS — Cinematic redesign (.air-*)
═══════════════════════════════════════════════════════════════════════════ */
@keyframes airFadeUp {
from { opacity:0; transform:translateY(18px); }
to { opacity:1; transform:translateY(0); }
}
@keyframes airBarIn {
from { width:0 !important; }
}
@keyframes airArcIn {
from { stroke-dashoffset: 239; }
}
@keyframes airPulse {
0%,100% { opacity:1; }
50% { opacity:.5; }
}
@keyframes airGlow {
0%,100% { opacity:.6; }
50% { opacity:1; }
}
/* ── Root container ─────────────────────────────────────────────────────── */
.air-root {
display: flex;
flex-direction: column;
gap: 14px;
animation: airFadeUp .35s ease both;
}
/* ── Hero card ──────────────────────────────────────────────────────────── */
.air-hero {
position: relative;
overflow: hidden;
border-radius: 18px;
background: linear-gradient(150deg, #071710 0%, #0c2218 45%, #091b12 100%);
padding: 22px 20px 20px;
color: #fff;
box-shadow: 0 4px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.air-hero-glow {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 55% 45% at 90% 10%, rgba(34,197,94,.22) 0%, transparent 65%),
radial-gradient(ellipse 35% 55% at 8% 88%, rgba(16,185,129,.12) 0%, transparent 60%),
radial-gradient(ellipse 70% 30% at 50% 120%, rgba(59,130,246,.08) 0%, transparent 70%);
animation: airGlow 5s ease-in-out infinite;
}
.air-hero-content {
position: relative; z-index: 1;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.air-score-wrap {
display: flex; flex-direction: column; align-items: center;
gap: 6px; flex-shrink: 0;
}
.air-score-svg { filter: drop-shadow(0 0 14px rgba(34,197,94,.4)); }
.air-score-arc { animation: airArcIn 0s; transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1); }
.air-score-label {
font-size: .65rem; font-weight: 800; letter-spacing: .06em;
text-transform: uppercase; opacity: .9;
}
.air-hero-kpis {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
flex: 1;
min-width: 200px;
}
.air-hero-kpi {
background: rgba(255,255,255,.065);
border: 1px solid rgba(255,255,255,.1);
border-radius: 12px;
padding: 10px 13px;
backdrop-filter: blur(8px);
transition: background .15s;
}
.air-hero-kpi:hover { background: rgba(255,255,255,.1); }
.air-hero-kpi-lbl {
display: block;
font-size: .6rem;
font-weight: 700;
color: rgba(255,255,255,.45);
text-transform: uppercase;
letter-spacing: .07em;
margin-bottom: 4px;
}
.air-hero-kpi-val {
display: block;
font-size: .92rem;
font-weight: 800;
color: #fff;
font-variant-numeric: tabular-nums;
letter-spacing: -.01em;
}
.air-green { color: #4ade80 !important; }
.air-red { color: #f87171 !important; }
.air-trend-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .7rem;
font-weight: 700;
padding: 5px 13px;
border-radius: 20px;
border: 1px solid;
backdrop-filter: blur(6px);
align-self: flex-end;
margin-left: auto;
letter-spacing: .02em;
}
/* ── AI voice card ──────────────────────────────────────────────────────── */
.air-voice-card {
display: flex;
gap: 14px;
background: linear-gradient(135deg, #0f172a 0%, #1a1040 100%);
border: 1px solid rgba(139,92,246,.35);
border-radius: 16px;
padding: 18px 20px;
color: #fff;
box-shadow: 0 4px 28px rgba(139,92,246,.18), inset 0 1px 0 rgba(255,255,255,.05);
position: relative;
overflow: hidden;
}
.air-voice-card::before {
content: '';
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 60% 80% at 95% 5%, rgba(139,92,246,.18) 0%, transparent 65%);
}
.air-voice-icon {
font-size: 1.9rem;
flex-shrink: 0;
animation: airPulse 3.5s ease-in-out infinite;
filter: drop-shadow(0 0 10px rgba(139,92,246,.7));
position: relative;
z-index: 1;
margin-top: 2px;
}
.air-voice-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.air-voice-label {
font-size: .6rem;
font-weight: 800;
color: #a78bfa;
text-transform: uppercase;
letter-spacing: .1em;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.air-voice-label::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(167,139,250,.3), transparent);
}
.air-voice-text {
font-size: .85rem;
color: rgba(255,255,255,.88);
line-height: 1.75;
margin: 0 0 14px;
}
.air-pills-row { display: flex; flex-wrap: wrap; gap: 7px; }
.air-pill {
font-size: .71rem;
padding: 5px 12px;
border-radius: 20px;
font-weight: 500;
line-height: 1.4;
letter-spacing: .01em;
}
.air-pill-g { background: rgba(34,197,94,.14); color:#4ade80; border:1px solid rgba(34,197,94,.25); }
.air-pill-r { background: rgba(248,113,113,.14); color:#fca5a5; border:1px solid rgba(248,113,113,.25); }
.air-pill-b { background: rgba(96,165,250,.14); color:#93c5fd; border:1px solid rgba(96,165,250,.25); }
/* ── Alerts strip ───────────────────────────────────────────────────────── */
.air-alerts-strip {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.air-alert-pill {
display: inline-flex;
align-items: flex-start;
gap: 7px;
padding: 8px 14px;
border-radius: 10px;
font-size: .78rem;
font-weight: 500;
border: 1px solid;
line-height: 1.45;
max-width: 100%;
}
.air-alert-w { background:#fffbeb; border-color:#fcd34d; color:#78350f; }
.air-alert-i { background:#eff6ff; border-color:#93c5fd; color:#1e3a8a; }
.air-alert-ok { background:#f0fdf4; border-color:#86efac; color:#14532d; }
/* ── Forecast card ──────────────────────────────────────────────────────── */
.air-forecast {
background: var(--fcbg, #052e16);
border: 1px solid color-mix(in srgb, var(--fc, #22c55e) 40%, transparent);
border-radius: 16px;
padding: 20px;
color: #fff;
position: relative;
overflow: hidden;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.air-forecast::before {
content: '';
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 80% 60% at 100% 0%,
color-mix(in srgb, var(--fc) 18%, transparent) 0%, transparent 70%);
}
.air-forecast-head {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 18px;
position: relative;
}
.air-forecast-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 2px; }
.air-forecast-title {
font-size: .9rem;
font-weight: 800;
color: #fff;
margin-bottom: 5px;
letter-spacing: -.01em;
}
.air-forecast-outlook {
font-size: .79rem;
color: rgba(255,255,255,.72);
line-height: 1.65;
margin: 0;
}
.air-risk-chip {
margin-left: auto;
flex-shrink: 0;
font-size: .63rem;
font-weight: 800;
padding: 5px 11px;
border-radius: 20px;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.18);
text-transform: uppercase;
letter-spacing: .04em;
white-space: nowrap;
}
.air-rcm-strip {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
background: rgba(255,255,255,.055);
border: 1px solid rgba(255,255,255,.1);
border-radius: 12px;
padding: 12px;
margin-bottom: 16px;
}
.air-rcm-kpi { min-width: 0; }
.air-rcm-kpi span {
display: block; font-size: .6rem;
color: rgba(255,255,255,.45); text-transform: uppercase;
letter-spacing: .06em; margin-bottom: 4px; font-weight: 600;
}
.air-rcm-kpi strong { font-size: .88rem; font-weight: 800; }
.air-proj-table {
border: 1px solid rgba(255,255,255,.1);
border-radius: 12px;
overflow: hidden;
margin-bottom: 16px;
}
.air-proj-header {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr 1fr auto;
padding: 9px 14px;
background: rgba(255,255,255,.07);
color: rgba(255,255,255,.45);
font-size: .6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
}
.air-proj-row {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr 1fr auto;
padding: 10px 14px;
border-top: 1px solid rgba(255,255,255,.07);
align-items: center;
transition: background .1s;
cursor: pointer;
user-select: none;
}
.air-proj-row:hover { background: rgba(255,255,255,.06); }
.air-proj-row-has-once { border-left: 3px solid #f59e0b; padding-left: 11px; }
.air-proj-month {
color: rgba(255,255,255,.75); font-weight: 600;
display: flex; align-items: center; gap: 5px; font-size: .8rem;
}
.air-proj-once-badge {
font-size: .58rem; background: rgba(245,158,11,.28); color: #fcd34d;
border-radius: 4px; padding: 1px 5px; font-weight: 700; white-space: nowrap;
}
.air-proj-val { font-weight: 600; font-size: .8rem; }
.air-proj-net { font-weight: 800; font-size: .82rem; }
.air-proj-chevron { color: rgba(255,255,255,.3); font-size: .7rem; text-align: right; }
/* Painel de detalhe expansível por mês */
.air-proj-detail {
background: rgba(0,0,0,.25);
border-top: 1px dashed rgba(255,255,255,.08);
}
.air-proj-detail-inner { padding: 12px 14px; display: flex; flex-direction: column; gap: 14px; }
.air-proj-det-section {}
.air-proj-det-title {
font-size: .65rem; font-weight: 700; color: rgba(255,255,255,.45);
text-transform: uppercase; letter-spacing: .07em; margin-bottom: 7px;
}
.air-proj-det-row {
display: flex; align-items: center; gap: 6px;
padding: 3px 0; font-size: .77rem; color: rgba(255,255,255,.75);
}
.air-proj-det-icon { flex-shrink: 0; width: 16px; text-align: center; }
.air-proj-det-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.air-proj-det-label em { color: rgba(255,255,255,.4); font-style: normal; }
.air-proj-det-freq {
font-size: .66rem; background: rgba(255,255,255,.1); border-radius: 3px;
padding: 1px 4px; color: rgba(255,255,255,.45); white-space: nowrap;
}
.air-proj-det-bar-wrap {
width: 60px; height: 4px; background: rgba(255,255,255,.12);
border-radius: 2px; overflow: hidden; flex-shrink: 0;
}
.air-proj-det-bar { height: 100%; border-radius: 2px; }
.air-proj-det-pct { min-width: 28px; text-align: right; font-size: .7rem; color: rgba(255,255,255,.4); }
.air-proj-det-amt { min-width: 80px; text-align: right; font-weight: 600; white-space: nowrap; }
.air-proj-det-empty { font-size: .75rem; color: rgba(255,255,255,.3); padding: 4px 0; }
/* Eventos únicos relevantes */
.air-once-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 4px; }
.air-once-item {
display: flex; align-items: center; gap: 8px; font-size: .77rem;
padding: 5px 10px; background: rgba(245,158,11,.1);
border-radius: 6px; border: 1px solid rgba(245,158,11,.2);
}
.air-once-month { color: #fbbf24; font-weight: 700; min-width: 58px; }
.air-once-desc { flex: 1; color: rgba(255,255,255,.8); }
.air-once-impact { font-size: .65rem; font-weight: 700; border-radius: 4px; padding: 1px 5px; }
.air-once-alto { background: rgba(239,68,68,.25); color: #fca5a5; }
.air-once-médio { background: rgba(245,158,11,.25); color: #fcd34d; }
.air-once-baixo { background: rgba(34,197,94,.2); color: #86efac; }
/* Sazonalidade */
.air-season-insight {
font-size: .78rem; color: rgba(255,255,255,.7); line-height: 1.6;
background: rgba(255,255,255,.04); border-radius: 6px;
padding: 8px 12px; margin-bottom: 4px;
border-left: 2px solid rgba(96,165,250,.5);
}
.air-forecast-section-title {
font-size: .65rem;
font-weight: 800;
color: rgba(255,255,255,.45);
text-transform: uppercase;
letter-spacing: .08em;
margin: 14px 0 8px;
}
.air-risks-list, .air-opps-list { display: flex; flex-direction: column; gap: 7px; }
.air-risk-item, .air-opp-item {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: .78rem;
color: rgba(255,255,255,.8);
line-height: 1.5;
}
.air-risk-bullet { color: #fbbf24; flex-shrink: 0; font-size: .9rem; margin-top: 1px; }
.air-opp-bullet { color: #4ade80; flex-shrink: 0; font-size: .9rem; margin-top: 1px; }
.air-risk-mit, .air-opp-act { color: rgba(255,255,255,.5); }
/* ── Generic section ────────────────────────────────────────────────────── */
.air-section {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 18px 20px;
animation: airFadeUp .35s ease both;
transition: box-shadow .15s;
}
.air-section:hover { box-shadow: 0 2px 16px rgba(0,0,0,.07); }
.air-section-advisory { opacity: .88; }
.air-section-title {
font-size: .68rem;
font-weight: 800;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .09em;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 7px;
}
.air-section-title::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
/* ── Actions grid ───────────────────────────────────────────────────────── */
.air-actions-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.air-action-card {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 14px;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--surface2);
animation: airFadeUp .35s ease both;
transition: transform .12s, box-shadow .12s, border-color .12s;
}
.air-action-card:hover {
transform: translateY(-2px);
box-shadow: 0 5px 18px rgba(0,0,0,.1);
border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}
.air-action-saving {
border-color: color-mix(in srgb, #22c55e 28%, var(--border));
background: color-mix(in srgb, #22c55e 4%, var(--surface));
}
.air-action-high {
border-color: color-mix(in srgb, #ef4444 28%, var(--border));
background: color-mix(in srgb, #ef4444 3%, var(--surface));
}
.air-action-icon { font-size: 1.15rem; flex-shrink: 0; margin-top: 1px; }
.air-action-body { min-width: 0; }
.air-action-title { font-size: .8rem; font-weight: 700; color: var(--text); margin-bottom: 3px; line-height: 1.3; }
.air-action-desc { font-size: .72rem; color: var(--text2); line-height: 1.55; }
.air-action-est { font-size: .7rem; color: var(--accent); font-weight: 700; margin-top: 6px; }
/* ── Category bars ──────────────────────────────────────────────────────── */
.air-cat-bars { display: flex; flex-direction: column; gap: 12px; }
.air-cat-row { animation: airFadeUp .35s ease both; }
.air-cat-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.air-cat-name { font-size: .82rem; font-weight: 600; color: var(--text); }
.air-cat-amt { font-size: .76rem; color: var(--text2); font-weight: 600; }
.air-cat-amt small { font-size: .68rem; color: var(--muted); font-weight: 400; margin-left: 3px; }
.air-cat-track {
height: 7px;
background: var(--border);
border-radius: 4px;
overflow: hidden;
}
.air-cat-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, #3b82f6) 100%);
border-radius: 4px;
animation: airBarIn .8s cubic-bezier(.4,0,.2,1) both;
}
.air-cat-insight {
font-size: .7rem;
color: var(--muted);
margin-top: 5px;
font-style: italic;
line-height: 1.45;
}
/* ── Budget list ────────────────────────────────────────────────────────── */
.air-budget-list { display: flex; flex-direction: column; gap: 8px; }
.air-budget-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border-radius: var(--r-sm);
border-left: 3px solid;
background: var(--bg2);
}
.air-budget-icon { font-size: .95rem; flex-shrink: 0; margin-top: 2px; }
.air-budget-insight { font-size: .75rem; color: var(--text2); margin: 3px 0 0; line-height: 1.5; }
/* ── Credit Card Projection ─────────────────────────────────────────────── */
.air-cc-proj-section { border-left: 3px solid #6366f1; }
.air-cc-proj-header { margin-bottom: 10px; }
.air-cc-proj-status {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
padding: 8px 12px; border-radius: var(--r-sm);
background: color-mix(in srgb, var(--scolor) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--scolor) 30%, transparent);
font-size: .82rem; font-weight: 600; color: var(--scolor);
margin-bottom: 8px;
}
.air-cc-proj-total-label { font-weight: 400; color: var(--text2); }
.air-cc-proj-total-label strong { color: var(--text1); }
.air-cc-proj-pct { font-size: .75rem; background: var(--surface2); color: var(--muted); padding: 2px 8px; border-radius: 20px; }
.air-cc-proj-summary, .air-cc-proj-sustain { font-size: .82rem; color: var(--text2); margin: 4px 0 0; line-height: 1.5; }
.air-cc-proj-cards { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.air-cc-proj-card {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 10px 14px;
}
.air-cc-proj-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.air-cc-proj-card-name { font-weight: 600; font-size: .85rem; color: var(--text1); }
.air-cc-proj-card-total { font-weight: 700; font-size: .9rem; color: #6366f1; }
.air-cc-proj-card-total small { font-size: .7rem; font-weight: 400; color: var(--muted); margin-left: 2px; }
.air-cc-proj-detail { font-size: .78rem; color: var(--text2); margin: 2px 0 0; line-height: 1.4; }
.air-cc-proj-once { font-size: .75rem; color: #f59e0b; margin: 3px 0 0; }
.air-cc-proj-alert { font-size: .75rem; color: #ef4444; background: #fef2f2; border-radius: 4px; padding: 4px 8px; margin-top: 5px; }
.air-cc-proj-recs { margin: 8px 0 0; padding-left: 18px; }
.air-cc-proj-rec { font-size: .8rem; color: var(--text2); margin-bottom: 4px; line-height: 1.4; }
/* ── Members ────────────────────────────────────────────────────────────── */
.air-member-list { display: flex; flex-direction: column; gap: 8px; }
.air-member-card2 {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
transition: border-color .15s, box-shadow .15s;
}
.air-member-card2:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); box-shadow: 0 2px 12px rgba(0,0,0,.07); }
.air-member2-header {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 16px;
cursor: pointer;
transition: background .12s;
}
.air-member2-header:hover { background: color-mix(in srgb, var(--accent) 4%, var(--surface2)); }
.air-avatar2 {
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 60%, #3b82f6) 100%);
color: #fff;
font-weight: 800;
font-size: .88rem;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
}
.air-member2-info { flex: 1; min-width: 0; }
.air-member2-name { display: block; font-size: .85rem; font-weight: 700; color: var(--text); }
.air-member2-sub { font-size: .7rem; color: var(--muted); margin-top: 1px; }
.air-member2-chev { color: var(--muted); font-size: .75rem; transition: transform .2s; flex-shrink: 0; }
.air-member2-body {
padding: 0 16px 16px;
border-top: 1px solid var(--border);
}
.air-mem-cats2 { display: flex; flex-direction: column; gap: 9px; padding-top: 12px; }
.air-mem-cat2 {}
.air-mem-cat2-top { display:flex; justify-content:space-between; font-size:.76rem; margin-bottom:5px; font-weight:500; }
.air-mem-insight {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 12px;
padding: 10px 13px;
background: color-mix(in srgb, #7c3aed 7%, var(--surface));
border: 1px solid color-mix(in srgb, #7c3aed 18%, transparent);
border-radius: 10px;
font-size: .76rem;
color: var(--text2);
line-height: 1.55;
}
/* ── Trend table ────────────────────────────────────────────────────────── */
.air-trend-table2 {
font-size: .79rem;
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.air-trend-header2 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
padding: 9px 14px;
background: var(--surface2);
border-bottom: 1px solid var(--border);
color: var(--muted);
font-size: .63rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
}
.air-trend-row2 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
align-items: center;
transition: background .1s;
}
.air-trend-row2:last-child { border-bottom: none; }
.air-trend-row2:hover { background: var(--surface2); }
.air-trend-month { font-weight: 600; color: var(--text2); }
/* ── Payee list ─────────────────────────────────────────────────────────── */
.air-payee-list { display: flex; flex-direction: column; gap: 0; }
.air-payee-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 4px;
border-bottom: 1px solid var(--border);
animation: airFadeUp .3s ease both;
transition: background .12s;
border-radius: 8px;
}
.air-payee-item:last-child { border-bottom: none; }
.air-payee-item:hover { background: var(--surface2); }
.air-payee-rank {
width: 22px; height: 22px;
border-radius: 50%;
background: var(--surface2);
border: 1.5px solid var(--border);
font-size: .62rem;
font-weight: 800;
color: var(--muted);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.air-payee-item:nth-child(1) .air-payee-rank { background: #fef3c7; border-color: #fbbf24; color: #92400e; }
.air-payee-item:nth-child(2) .air-payee-rank { background: #f1f5f9; border-color: #94a3b8; color: #475569; }
.air-payee-item:nth-child(3) .air-payee-rank { background: #fef9f0; border-color: #f59e0b; color: #b45309; }
.air-payee-name {
flex: 1; font-size: .82rem; color: var(--text);
font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.air-payee-amt {
font-size: .82rem; font-weight: 800; color: var(--text);
font-variant-numeric: tabular-nums; white-space: nowrap;
color: var(--red);
}
/* ── Classification list ────────────────────────────────────────────────── */
.air-class-list { display: flex; flex-direction: column; gap: 8px; }
.air-class-item {
padding: 10px 12px;
background: var(--bg2);
border-radius: var(--r-sm);
border: 1px solid var(--border);
}
.air-class-desc { font-size: .78rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.air-class-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.air-class-tag {
font-size: .68rem;
padding: 2px 8px;
border-radius: 6px;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text2);
}
.air-class-conf { font-size: .68rem; color: var(--muted); margin-left: auto; }
/* ── Footer ─────────────────────────────────────────────────────────────── */
.air-footer {
text-align: center;
font-size: .68rem;
color: var(--muted);
padding: 10px 0 28px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.air-footer::before,
.air-footer::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
max-width: 60px;
}
/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
.air-actions-grid { grid-template-columns: 1fr; }
.air-hero-content { gap: 14px; }
.air-hero-kpis { grid-template-columns: 1fr 1fr; gap: 6px; }
.air-proj-table, .air-proj-header, .air-proj-row { font-size: .69rem; }
.air-section { padding: 14px 16px; }
.air-voice-card { padding: 14px 15px; gap: 11px; }
.air-trend-table2 .air-trend-header2,
.air-trend-table2 .air-trend-row2 { padding: 8px 10px; font-size: .72rem; }
}
/* ═══════════════════════════════════════════════════════════════════════════
FAMILY MANAGEMENT v2 — (.mfm2-*)
═══════════════════════════════════════════════════════════════════════════ */
@keyframes mfm2FadeIn {
from { opacity:0; transform:translateY(10px); }
to { opacity:1; transform:translateY(0); }
}
/* ── Sheet ──────────────────────────────────────────────────────────────── */
.mfm2-sheet {
background: var(--surface);
border-radius: 20px 20px 0 0;
width: 100%;
max-width: 560px;
margin: auto auto 0;
display: flex;
flex-direction: column;
max-height: 92vh;
overflow: hidden;
box-shadow: 0 -8px 40px rgba(0,0,0,.2);
animation: mfm2FadeIn .25s ease both;
}
@media (min-width: 600px) {
.mfm2-sheet { border-radius: 20px; margin: auto; }
}
/* ── Hero header ────────────────────────────────────────────────────────── */
.mfm2-hero {
position: relative;
overflow: hidden;
background: linear-gradient(145deg, #091d10 0%, #0d2318 60%, #0a1f13 100%);
padding: 20px 20px 0;
flex-shrink: 0;
}
.mfm2-hero-glow {
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 70% 80% at 85% -10%, rgba(42,96,73,.55) 0%, transparent 65%);
}
.mfm2-hero-inner {
position: relative; z-index: 1;
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 18px;
}
.mfm2-hero-icon {
width: 42px; height: 42px;
border-radius: 12px;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem;
flex-shrink: 0;
}
.mfm2-hero-info { flex: 1; min-width: 0; }
.mfm2-hero-name {
font-size: 1rem;
font-weight: 800;
color: #fff;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mfm2-hero-sub { font-size: .72rem; color: rgba(255,255,255,.5); margin-top: 2px; }
.mfm2-close-btn {
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.14);
color: rgba(255,255,255,.65);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .12s, color .12s;
flex-shrink: 0;
}
.mfm2-close-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
/* Family tabs strip (multi-family) */
.mfm2-family-tabs {
position: relative; z-index: 1;
display: flex;
gap: 2px;
overflow-x: auto;
border-top: 1px solid rgba(255,255,255,.1);
padding: 0 4px;
}
.mfm2-family-tabs button {
padding: 9px 14px;
background: none; border: none;
color: rgba(255,255,255,.55);
font-size: .78rem; font-weight: 600;
font-family: inherit; cursor: pointer;
border-bottom: 2px solid transparent;
transition: color .12s, border-color .12s;
white-space: nowrap;
}
.mfm2-family-tabs button.active { color: #fff; border-bottom-color: var(--accent); }
/* ── Body ───────────────────────────────────────────────────────────────── */
.mfm2-body {
flex: 1;
overflow-y: auto;
padding: 0 0 32px;
}
/* ── Sections ───────────────────────────────────────────────────────────── */
.mfm2-section { padding: 20px 24px 0; }
.mfm2-section + .mfm2-section {
border-top: 1px solid var(--border);
margin-top: 20px; padding-top: 20px;
}
.mfm2-section-hd { margin-bottom: 14px; }
.mfm2-section-title {
display: block;
font-size: .78rem;
font-weight: 800;
color: var(--text);
letter-spacing: -.01em;
}
.mfm2-section-sub {
font-size: .7rem;
color: var(--muted);
margin-top: 2px;
display: block;
}
/* ── Modules grid ───────────────────────────────────────────────────────── */
.mfm2-modules-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 9px;
}
.mfm2-module {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 13px 12px;
border-radius: var(--r);
border: 1.5px solid var(--border);
background: var(--surface2);
cursor: pointer;
font-family: inherit;
text-align: left;
transition: border-color .14s, background .14s, transform .1s, box-shadow .14s;
position: relative;
}
.mfm2-module:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.07); }
.mfm2-module.on {
border-color: var(--accent);
background: var(--accent-lt);
}
.mfm2-module-emoji { font-size: 1.2rem; line-height: 1; }
.mfm2-module-label {
font-size: .76rem;
font-weight: 700;
color: var(--text);
line-height: 1.2;
}
.mfm2-module-desc {
font-size: .65rem;
color: var(--muted);
line-height: 1.3;
}
/* Toggle indicator */
.mfm2-module-toggle {
position: absolute;
top: 10px; right: 10px;
width: 28px; height: 16px;
border-radius: 8px;
background: var(--border2);
transition: background .2s;
display: flex; align-items: center;
}
.mfm2-module.on .mfm2-module-toggle { background: var(--accent); }
.mfm2-toggle-dot {
width: 12px; height: 12px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
margin-left: 2px;
transition: transform .2s cubic-bezier(.4,0,.2,1);
}
.mfm2-toggle-dot.on { transform: translateX(12px); }
/* ── Members ────────────────────────────────────────────────────────────── */
.mfm2-members-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.mfm2-member {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 12px;
transition: border-color .12s;
animation: mfm2FadeIn .25s ease both;
}
.mfm2-member:hover { border-color: var(--border2); }
.mfm2-member-av { flex-shrink: 0; }
.mfm2-member-info { flex: 1; min-width: 0; }
.mfm2-member-name {
font-size: .82rem;
font-weight: 700;
color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mfm2-member-email {
font-size: .7rem;
color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mfm2-role-sel {
font-size: .73rem;
padding: 5px 8px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
width: 112px;
flex-shrink: 0;
font-family: inherit;
cursor: pointer;
}
.mfm2-remove-btn {
width: 28px; height: 28px;
border-radius: 50%;
background: none;
border: 1px solid var(--border);
color: var(--muted);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .12s, color .12s, border-color .12s;
flex-shrink: 0;
}
.mfm2-remove-btn:hover { background: var(--red-lt); color: var(--red); border-color: var(--red); }
/* ── Add member accordion ───────────────────────────────────────────────── */
.mfm2-add-accordion { margin-top: 4px; }
.mfm2-add-trigger {
display: flex;
align-items: center;
gap: 7px;
width: 100%;
padding: 10px 12px;
background: var(--bg2);
border: 1.5px dashed var(--border);
border-radius: 12px;
color: var(--muted);
font-size: .78rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: border-color .12s, color .12s, background .12s;
}
.mfm2-add-trigger:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-lt); }
.mfm2-add-panel {
margin-top: 10px;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.mfm2-add-tabs {
display: flex;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.mfm2-add-tab {
flex: 1;
padding: 7px 10px;
border: none;
background: var(--surface2);
color: var(--muted);
font-size: .75rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background .12s, color .12s;
}
.mfm2-add-tab + .mfm2-add-tab { border-left: 1px solid var(--border); }
.mfm2-add-tab.active { background: var(--accent); color: #fff; }
.mfm2-add-pane { display: flex; flex-direction: column; gap: 8px; }
.mfm2-msg {
font-size: .76rem;
padding: 8px 12px;
border-radius: 8px;
}
/* ═══════════════════════════════════════════════════════════════════════════
MOBILE PAGE HEADERS — Beneficiários & Preços (v12)
Redesign responsivo dos títulos sem impactar desktop.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Page header container: layout flexível com wrapping ──────────────────── */
.page-header-mobile {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: 16px;
}
.page-header-mobile .page-header-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
flex-wrap: nowrap;
}
.page-header-mobile .page-header-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
align-items: center;
flex-shrink: 0;
}
/* ── Título principal das páginas ─────────────────────────────────────────── */
.page-title-main {
font-family: var(--font-serif);
font-size: 1.35rem;
font-weight: 600;
letter-spacing: -.02em;
color: var(--text);
line-height: 1.25;
flex: 1;
min-width: 0;
}
/* Subtítulo / context label */
.page-title-sub {
font-size: .72rem;
color: var(--muted);
font-weight: 400;
margin-top: 2px;
line-height: 1.4;
}
/* ── Barra de filtros compacta (mobile) ───────────────────────────────────── */
.page-filters-bar {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
margin-top: 12px;
}
/* ── MOBILE ≤ 768px: ajustes críticos ────────────────────────────────────── */
@media (max-width: 768px) {
/* Sticky header para páginas específicas */
#page-payees .section-header,
#page-prices .section-header {
position: sticky;
top: 0;
z-index: 30;
background: var(--bg);
padding-top: 10px;
padding-bottom: 8px;
margin-bottom: 10px;
border-bottom: 1px solid var(--border);
/* Safe area (notch) */
padding-top: max(10px, env(safe-area-inset-top));
}
/* Título de página: tamanho reduzido mas legível */
#page-payees .section-title,
#page-prices .section-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--text);
line-height: 1.2;
/* Nunca trunca em mobile */
white-space: normal;
word-break: break-word;
}
/* Header: empilha título em cima, ações abaixo */
#page-payees .section-header,
#page-prices .section-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
/* Ações ficam em linha horizontal, não poluem o título */
#page-payees .section-header > div,
#page-prices .section-header > div {
display: flex;
gap: 6px;
flex-wrap: wrap;
width: 100%;
}
/* Botões de ação: compactos mas tocáveis (min 44px touch target) */
#page-payees .section-header .btn,
#page-prices .section-header .btn {
font-size: .75rem;
padding: 6px 10px;
min-height: 34px;
flex-shrink: 0;
}
/* Botão primário: destaque visual mantido */
#page-payees .section-header .btn-primary,
#page-prices .section-header .btn-primary {
margin-left: auto; /* empurra para direita */
}
/* Barra de filtros: scroll horizontal em telas pequenas */
#page-payees .filters,
#page-prices .filters {
display: flex;
gap: 8px;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 4px;
margin-bottom: 12px;
}
#page-payees .filters::-webkit-scrollbar,
#page-prices .filters::-webkit-scrollbar { display: none; }
#page-payees .filters > *,
#page-prices .filters > * {
flex-shrink: 0;
}
/* Search input: largura generosa */
#page-payees .search-wrap,
#page-prices .search-wrap {
min-width: 200px;
flex: 1;
}
/* Select de filtro: não estica demais */
#page-payees .filters select,
#page-prices .filters select {
max-width: 160px;
font-size: .82rem;
}
}
/* ── MOBILE ≤ 480px: extra compacto ──────────────────────────────────────── */
@media (max-width: 480px) {
#page-payees .section-title,
#page-prices .section-title {
font-size: 1rem;
}
/* Em telas muito pequenas, botões ghost viram ícone */
#page-payees .section-header .btn-ghost,
#page-prices .section-header .btn-ghost {
font-size: .7rem;
padding: 5px 8px;
}
/* Filtros: full-width stack */
#page-payees .filters,
#page-prices .filters {
flex-wrap: wrap;
overflow-x: visible;
}
#page-payees .search-wrap,
#page-prices .search-wrap {
min-width: 0;
flex: 1 1 100%;
}
}
/* ── DESKTOP ≥ 769px: sem mudanças ───────────────────────────────────────── */
@media (min-width: 769px) {
/* Garante que sticky não afeta desktop */
#page-payees .section-header,
#page-prices .section-header {
position: static;
border-bottom: none;
}
/* Restaura layout horizontal desktop */
#page-payees .section-header,
#page-prices .section-header {
flex-direction: row;
align-items: center;
}
#page-payees .section-header > div,
#page-prices .section-header > div {
width: auto;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
DEBT FORM MODAL — Redesign moderno v20
═══════════════════════════════════════════════════════════════════════════ */
/* Modal maior para o formulário de dívida */
#debtFormModal .modal {
max-width: 600px;
max-height: 92vh;
overflow-y: auto;
}
/* ── Seções do formulário ────────────────────────────────────────────────── */
.dbt-form-section {
padding: 18px 20px 14px;
border-bottom: 1px solid var(--border);
}
.dbt-form-section:last-of-type { border-bottom: none; }
.dbt-form-section-title {
display: flex;
align-items: center;
gap: 8px;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--muted);
margin-bottom: 14px;
}
.dbt-form-section-icon {
width: 22px; height: 22px;
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
font-size: .8rem;
flex-shrink: 0;
}
/* ── Grid 2 colunas responsivo ──────────────────────────────────────────── */
.dbt-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.dbt-form-grid .full { grid-column: 1 / -1; }
@media (max-width: 520px) {
.dbt-form-grid { grid-template-columns: 1fr; }
.dbt-form-grid .full { grid-column: 1; }
}
/* ── Pill selector (moeda, tipo rápido) ─────────────────────────────────── */
.dbt-pill-group {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.dbt-pill {
padding: 6px 14px;
border-radius: 20px;
border: 1.5px solid var(--border);
background: var(--surface2);
color: var(--text2);
font-size: .78rem;
font-weight: 600;
cursor: pointer;
transition: all .15s;
line-height: 1;
}
.dbt-pill:hover { border-color: var(--accent); color: var(--accent); }
.dbt-pill.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
/* ── Amount input com símbolo de moeda ─────────────────────────────────── */
.dbt-amount-wrap {
position: relative;
}
.dbt-amount-prefix {
position: absolute;
left: 12px; top: 50%;
transform: translateY(-50%);
font-size: .82rem;
font-weight: 700;
color: var(--muted);
pointer-events: none;
z-index: 1;
}
.dbt-amount-input {
padding-left: 44px !important;
font-size: 1.05rem !important;
font-weight: 600 !important;
}
/* ── Index rate quick-pick chips ────────────────────────────────────────── */
.dbt-index-chips {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.dbt-index-chip {
padding: 5px 12px;
border-radius: 8px;
border: 1.5px solid var(--border);
background: var(--surface2);
font-size: .75rem;
font-weight: 600;
cursor: pointer;
transition: all .15s;
color: var(--text2);
}
.dbt-index-chip:hover { border-color: var(--accent); color: var(--accent); }
.dbt-index-chip.active {
background: var(--accent-lt);
border-color: var(--accent);
color: var(--accent);
}
/* ── Inline creditor creator ────────────────────────────────────────────── */
.dbt-creditor-wrap { position: relative; }
.dbt-add-creditor-btn {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: .75rem;
font-weight: 600;
color: var(--accent);
background: none;
border: none;
cursor: pointer;
padding: 3px 0;
margin-top: 4px;
transition: opacity .12s;
}
.dbt-add-creditor-btn:hover { opacity: .75; }
.dbt-inline-new-creditor {
display: none;
margin-top: 8px;
padding: 12px 14px;
background: var(--accent-lt);
border: 1.5px solid var(--accent);
border-radius: 10px;
gap: 8px;
flex-direction: column;
}
.dbt-inline-new-creditor.visible { display: flex; }
.dbt-inline-new-creditor-row {
display: flex;
gap: 8px;
align-items: flex-end;
}
.dbt-inline-new-creditor label {
font-size: .72rem;
font-weight: 700;
color: var(--accent);
margin-bottom: 4px;
display: block;
}
/* ── Fixed rate field reveal ────────────────────────────────────────────── */
.dbt-rate-reveal {
overflow: hidden;
max-height: 0;
transition: max-height .25s ease;
}
.dbt-rate-reveal.visible { max-height: 80px; }
/* ── Footer with save button ────────────────────────────────────────────── */
#debtFormModal .modal-footer {
position: sticky;
bottom: 0;
background: var(--surface);
border-top: 1px solid var(--border);
padding: 14px 20px;
display: flex;
gap: 8px;
justify-content: flex-end;
}
/* ═══════════════════════════════════════════════════════════════════════════
MFM — Gestão de Dados (backup/snapshot/copy/delete)
═══════════════════════════════════════════════════════════════════════════ */
.mfm2-data-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (max-width: 420px) { .mfm2-data-actions { grid-template-columns: 1fr; } }
.mfm2-data-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 14px;
border-radius: 12px;
border: 1.5px solid var(--border);
background: var(--surface2);
cursor: pointer;
transition: border-color .14s, background .14s, box-shadow .14s;
text-align: left;
font-family: inherit;
width: 100%;
}
.mfm2-data-btn:hover {
border-color: var(--accent);
background: var(--accent-lt);
box-shadow: 0 2px 8px rgba(42,96,73,.08);
}
.mfm2-data-btn.danger:hover {
border-color: var(--red, #dc2626);
background: #fef2f2;
}
.mfm2-data-btn.warn:hover {
border-color: #f59e0b;
background: #fffbeb;
}
.mfm2-data-icon {
width: 36px; height: 36px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 1.05rem;
flex-shrink: 0;
}
.mfm2-data-label {
font-size: .82rem;
font-weight: 700;
color: var(--text);
display: block;
}
.mfm2-data-sub {
font-size: .7rem;
color: var(--muted);
margin-top: 1px;
display: block;
}
/* ═══════════════════════════════════════════════════════════════════
FORECAST — Filtro mobile-first + categoria abaixo da descrição
═══════════════════════════════════════════════════════════════════ */
/* Container do filtro */
.fc-filter-wrap {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Linha 1: datas lado a lado */
.fc-filter-dates {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
/* Linha 2: contas + opções */
.fc-filter-row2 {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: end;
}
.fc-filter-field { display: flex; flex-direction: column; gap: 4px; }
.fc-filter-label {
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--muted);
}
.fc-filter-input {
width: 100%;
font-size: .82rem;
padding: 6px 8px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface2);
color: var(--text);
box-sizing: border-box;
}
.fc-filter-input:focus { outline: none; border-color: var(--accent); }
.fc-filter-opts { flex-shrink: 0; }
.fc-filter-check {
display: flex;
align-items: center;
gap: 6px;
font-size: .82rem;
font-weight: 500;
cursor: pointer;
padding: 7px 0;
white-space: nowrap;
color: var(--text);
}
.fc-filter-check input[type=checkbox] {
width: 15px;
height: 15px;
flex-shrink: 0;
accent-color: var(--accent);
}
/* Categoria abaixo da descrição */
.forecast-category {
font-size: .72rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-height: 0;
line-height: 1.2;
margin-top: 1px;
}
.forecast-cat-dot {
width: 5px;
height: 5px;
border-radius: 50%;
flex-shrink: 0;
display: inline-block;
}
/* Linha de beneficiário só aparece se tiver conteúdo */
.forecast-line.forecast-payee:empty { display: none; }
/* Mobile: filtro e tabela */
@media (max-width: 480px) {
.fc-filter-dates {
grid-template-columns: 1fr 1fr;
}
.fc-filter-row2 {
grid-template-columns: 1fr;
}
.fc-filter-opts {
border-top: 1px solid var(--border);
padding-top: 8px;
}
.fc-filter-check { padding: 4px 0; }
/* Tabela forecast mobile: células mais compactas */
.forecast-tx-row td { padding: 6px 6px !important; }
.forecast-date-cell { width: 24px !important; padding-right: 2px !important; }
.forecast-date-main { font-size: .72rem !important; }
.forecast-title { font-size: .82rem !important; }
.forecast-category { font-size: .69rem !important; }
.forecast-payee { font-size: .7rem !important; }
.forecast-amount-main { font-size: .82rem !important; }
.forecast-run-bal { font-size: .68rem !important; }
.forecast-amount-cell { min-width: 80px !important; }
}
/* ── Relatório de Transações: sem scroll horizontal no mobile ── */
@media (max-width: 640px) {
#reportTxView .table-wrap {
overflow-x: hidden;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
MOBILE FORM REDESIGN — Transaction & Scheduled Modals
Applies on max-width: 640px (phones)
Touches: modal shell, tab-bar, form-group labels/inputs, amount field,
category picker, payee, recurrence grid, section dividers, footer
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
/* ── Modal shell: full bottom-sheet, taller, tighter header ── */
#txModal .modal,
#scheduledModal .modal {
max-height: 96dvh;
max-height: 96vh;
border-radius: 22px 22px 0 0;
}
#txModal .modal-handle,
#scheduledModal .modal-handle {
width: 40px;
height: 4px;
background: var(--border2);
border-radius: 100px;
margin: 10px auto 2px;
}
/* ── Header: smaller, cleaner ── */
#txModal .modal-header,
#scheduledModal .modal-header {
padding: 10px 18px 10px;
border-bottom: 1px solid var(--border);
}
#txModal .modal-title,
#scheduledModal .modal-title {
font-size: .97rem;
font-weight: 600;
letter-spacing: -.01em;
}
#txModal .modal-close,
#scheduledModal .modal-close {
width: 30px;
height: 30px;
font-size: .8rem;
}
/* ── Body: tighter padding ── */
#txModal .modal-body,
#scheduledModal .modal-body {
padding: 14px 16px 4px;
}
/* ── Tab bar: pill style, full width, even split ── */
#txModal .tab-bar,
#scheduledModal .tab-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3px;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 12px;
padding: 3px;
margin-bottom: 14px;
width: 100%;
}
#txModal .tab,
#scheduledModal .tab {
padding: 7px 4px;
font-size: .72rem;
font-weight: 500;
border-radius: 9px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#txModal .tab.active,
#scheduledModal .tab.active {
font-weight: 700;
font-size: .73rem;
}
/* ── Form grid: single column ── */
#txModal .form-grid,
#scheduledModal .form-grid {
grid-template-columns: 1fr;
gap: 12px;
}
/* ── Labels: smaller, uppercase, spaced ── */
#txModal .form-group > label:first-child,
#scheduledModal .form-group > label:first-child {
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .055em;
color: var(--text2);
margin-bottom: 3px;
}
/* ── Inputs & selects: comfortable tap target, modern radius ── */
#txModal .form-group input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
#txModal .form-group select,
#txModal .form-group textarea,
#scheduledModal .form-group input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
#scheduledModal .form-group select,
#scheduledModal .form-group textarea {
font-size: .9rem;
padding: 11px 13px;
border-radius: 11px;
border: 1.5px solid var(--border);
background: var(--surface);
transition: border-color .15s, box-shadow .15s;
-webkit-appearance: none;
appearance: none;
line-height: 1.4;
}
#txModal .form-group input:focus,
#txModal .form-group select:focus,
#txModal .form-group textarea:focus,
#scheduledModal .form-group input:focus,
#scheduledModal .form-group select:focus,
#scheduledModal .form-group textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
outline: none;
}
/* ── Amount field: taller, bigger font ── */
#txModal .amt-wrap,
#scheduledModal .amt-wrap {
border-radius: 11px;
overflow: hidden;
}
#txModal .amt-sign-btn,
#scheduledModal .amt-sign-btn {
min-width: 50px;
font-size: 1.25rem;
padding: 0 14px;
border-radius: 11px 0 0 11px;
border: 1.5px solid var(--border);
border-right: none;
}
#txModal #txAmount,
#scheduledModal #scAmount {
font-size: 1.35rem !important;
font-weight: 700;
padding: 13px 14px !important;
border-radius: 0 11px 11px 0 !important;
letter-spacing: -.01em;
}
/* ── Currency select next to amount: same height ── */
#txModal #txCurrencySelect,
#scheduledModal #scCurrencySelect {
padding: 11px 10px !important;
border-radius: 11px !important;
font-size: .82rem !important;
min-width: 68px;
}
/* ── Description: slightly larger ── */
#txModal #txDesc {
font-size: .95rem !important;
}
/* ── Category picker button: same height as inputs ── */
#txModal .cat-picker-btn,
#scheduledModal .cat-picker-btn {
padding: 11px 13px;
border-radius: 11px;
font-size: .9rem;
border: 1.5px solid var(--border);
}
/* ── Payee input wrap ── */
#txModal .payee-input-wrap input,
#scheduledModal .payee-input-wrap input {
font-size: .9rem !important;
padding: 11px 36px 11px 13px !important;
border-radius: 11px !important;
}
/* ── Section dividers in scheduled modal: styled pill ── */
#scheduledModal .form-grid > .full[style*="border-top"] {
margin: 4px -16px;
padding: 10px 16px 2px !important;
background: var(--bg2);
border-top: 1px solid var(--border) !important;
}
#scheduledModal .form-grid > .full[style*="border-top"] > span {
font-size: .65rem;
font-weight: 800;
letter-spacing: .1em;
color: var(--accent);
text-transform: uppercase;
}
/* ── Recurrence grid: 3 cols on mobile, pill chips ── */
.sc-recurrence-grid {
grid-template-columns: repeat(3, 1fr);
gap: 7px;
margin-top: 8px;
}
.sc-freq-opt {
padding: 9px 6px;
border-radius: 11px;
font-size: .78rem;
justify-content: center;
text-align: center;
gap: 0;
border-width: 1.5px;
}
.sc-freq-opt:has(input:checked) {
border-color: var(--accent);
background: var(--accent-lt);
color: var(--accent);
font-weight: 700;
}
/* ── End condition options ── */
.sc-end-grid {
gap: 7px;
}
.sc-end-opt {
flex: 1;
justify-content: center;
padding: 9px 8px;
border-radius: 11px;
font-size: .8rem;
border-width: 1.5px;
}
.sc-end-opt:has(input:checked) {
border-color: var(--accent);
background: var(--accent-lt);
color: var(--accent);
font-weight: 700;
}
/* ── Preview block ── */
.sc-preview {
border-radius: 11px;
font-size: .78rem;
padding: 10px 13px;
background: var(--surface2);
border: 1px solid var(--border);
}
/* ── Checkbox toggles in scheduled: bigger tap area ── */
#scheduledModal label[style*="display:flex"],
#scheduledModal label[class*="iof-intl-toggle"] {
padding: 12px 13px;
background: var(--surface2);
border-radius: 11px;
border: 1.5px solid var(--border);
}
#scheduledModal input[type=checkbox] {
width: 18px !important;
height: 18px !important;
accent-color: var(--accent);
}
#scheduledModal #scAutoConfirmHint {
font-size: .7rem;
margin: -8px 0 4px 4px;
}
/* ── Footer: full width save button, cancel as ghost ── */
#txModal .modal-footer,
#scheduledModal .modal-footer {
padding: 12px 16px max(16px, env(safe-area-inset-bottom));
display: flex;
flex-direction: row-reverse;
gap: 10px;
background: var(--surface);
border-top: 1px solid var(--border);
}
#txModal .modal-footer .btn-primary,
#scheduledModal .modal-footer .btn-primary {
flex: 1;
padding: 14px;
font-size: .95rem;
font-weight: 700;
border-radius: 13px;
letter-spacing: .01em;
}
#txModal .modal-footer .btn-ghost,
#scheduledModal .modal-footer .btn-ghost {
padding: 14px 18px;
font-size: .88rem;
border-radius: 13px;
border: 1.5px solid var(--border);
color: var(--text2);
}
/* ── AI suggestion chips: compact ── */
#txAiPayeeSuggestion,
#txAiAccountSuggestion,
#txAiMemberSuggestion {
border-radius: 11px !important;
padding: 8px 11px !important;
font-size: .76rem !important;
}
/* ── Card payment / FX panels ── */
#txCardPaymentBadge,
#scCardPaymentBadge {
border-radius: 11px !important;
font-size: .78rem !important;
padding: 9px 12px !important;
}
#txCurrencyPanel,
#scCurrencyPanel,
#txFxPanel,
#scFxPanel {
border-radius: 11px !important;
padding: 12px 13px !important;
font-size: .8rem !important;
}
/* ── Best card suggestion ── */
#txBestCardSuggestion {
border-radius: 11px !important;
padding: 10px 13px !important;
font-size: .8rem !important;
}
/* ── Memo / textarea: shorter on mobile ── */
#txMemo,
#scMemo {
min-height: 60px;
font-size: .88rem !important;
line-height: 1.5;
}
/* ── Attachment area: compact ── */
#txModal .tx-attachment-area {
padding: 14px 12px;
border-radius: 11px;
font-size: .8rem;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
SCHEDULED PAGE — Mobile redesign
Replaces cramped header row / filter bar with stacked, touch-friendly layout
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
/* ── Section header: stack vertically instead of cramming side by side ── */
#page-scheduled .section-header {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
margin-bottom: 12px;
}
/* Row 1: view toggle takes full width */
#page-scheduled .section-header > div {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
width: 100%;
}
/* View toggle: full-width, even 3-column grid */
#page-scheduled .sc-view-toggle {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width: 100%;
border-radius: 12px;
padding: 3px;
gap: 3px;
}
#page-scheduled .sc-view-btn {
justify-content: center;
padding: 9px 6px;
border-radius: 9px;
font-size: .78rem;
font-weight: 500;
}
#page-scheduled .sc-view-lbl {
display: inline !important; /* always show labels on sched page */
font-size: .75rem;
}
#page-scheduled .sc-view-btn.active {
font-weight: 700;
color: var(--accent);
}
/* "+ Programar" button: full width, tall, prominent */
#page-scheduled .section-header .btn-primary {
width: 100%;
padding: 13px 16px;
font-size: .95rem;
font-weight: 700;
border-radius: 13px;
letter-spacing: .01em;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
/* ── Filter bar: stack search above chips ── */
.sc-filter-bar {
flex-direction: column;
gap: 8px;
align-items: stretch;
margin-bottom: 12px;
}
.sc-filter-bar .search-wrap {
width: 100%;
min-width: unset;
}
.sc-filter-bar .search-wrap input {
font-size: .88rem;
padding: 10px 12px 10px 36px;
border-radius: 11px;
}
/* Filter chips row: scrollable, slightly larger taps */
.sc-filter-chips {
display: flex;
gap: 7px;
overflow-x: auto;
padding-bottom: 3px;
}
.sc-chip {
padding: 7px 14px;
font-size: .78rem;
flex-shrink: 0;
border-radius: 100px;
min-height: 34px;
display: inline-flex;
align-items: center;
}
/* Type select: full width */
.sc-type-select {
width: 100%;
padding: 10px 13px;
border-radius: 11px;
font-size: .88rem;
-webkit-appearance: none;
appearance: none;
}
/* ── Scheduled cards: slightly better mobile touch targets ── */
.sc-card {
border-radius: 14px;
margin-bottom: 8px;
box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.sc-card:active { transform: scale(.988); }
.sc-card-header {
padding: 12px 14px;
gap: 10px;
align-items: center;
}
.sc-card-type {
width: 34px;
height: 34px;
border-radius: 10px;
font-size: .9rem;
flex-shrink: 0;
}
.sc-card-title { font-size: .875rem; }
.sc-card-amount { font-size: .97rem; }
.sc-card-sub { font-size: .72rem; gap: 4px; }
/* Card actions: icon-only buttons on mobile */
.sc-card-actions {
gap: 4px;
}
.sc-card-actions .btn {
padding: 7px 10px;
font-size: .75rem;
border-radius: 9px;
min-height: 32px;
}
/* Card footer (next occurrence row) */
.sc-card-footer {
padding: 8px 14px;
font-size: .75rem;
}
/* ── Upcoming items: bigger tap area ── */
.sc-upcoming-item {
padding: 12px 16px;
gap: 10px;
}
.sc-upcoming-desc { font-size: .85rem; }
.sc-upcoming-date { font-size: .7rem; }
.sc-upcoming-amt { font-size: .95rem; }
.sc-upcoming-btn { padding: 7px 12px; font-size: .74rem; }
/* ── Summary bar badges ── */
.sc-summary-bar { gap: 6px; margin-bottom: 10px; }
.sc-summary-bar .badge { font-size: .74rem; padding: 5px 11px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
SCHEDULED MODAL — Automation section redesign
Replaces bare checkbox labels with styled toggle cards
═══════════════════════════════════════════════════════════════════════════ */
/* ── Section divider: "Automação" heading ── */
#scheduledModal .form-grid > .full[style*="border-top"] {
margin-left: -2px;
margin-right: -2px;
padding: 14px 2px 6px !important;
border-top: none !important;
display: flex;
align-items: center;
gap: 10px;
}
#scheduledModal .form-grid > .full[style*="border-top"]::before {
content: '';
flex: 1;
height: 1px;
background: var(--border);
opacity: .7;
}
#scheduledModal .form-grid > .full[style*="border-top"]::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
opacity: .7;
}
#scheduledModal .form-grid > .full[style*="border-top"] > span {
font-size: .65rem;
font-weight: 800;
letter-spacing: .12em;
color: var(--accent);
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
}
/* ── Auto-register toggle card ── */
#scheduledModal .form-group:has(#scAutoRegister) {
background: var(--surface2);
border: 1.5px solid var(--border);
border-radius: 14px;
padding: 14px 15px !important;
gap: 0 !important;
transition: border-color .15s, box-shadow .15s;
}
#scheduledModal .form-group:has(#scAutoRegister:checked) {
border-color: var(--accent);
background: var(--accent-lt, #eaf5ef);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
/* Main label row inside the card */
#scheduledModal .form-group:has(#scAutoRegister) > label[style*="display:flex"] {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
align-items: center !important;
gap: 12px !important;
cursor: pointer;
}
#scheduledModal .form-group:has(#scAutoRegister) > label[style*="display:flex"] input[type=checkbox] {
width: 20px !important;
height: 20px !important;
accent-color: var(--accent);
flex-shrink: 0;
cursor: pointer;
border-radius: 6px;
}
#scheduledModal .form-group:has(#scAutoRegister) > label > div > div:first-child {
font-size: .88rem;
font-weight: 700;
color: var(--text);
}
#scheduledModal .form-group:has(#scAutoRegister) > label > div > div:last-child {
font-size: .73rem;
color: var(--text2);
margin-top: 2px;
line-height: 1.4;
}
/* Auto-confirm toggle: nested inside auto-register card */
#scheduledModal .form-group:has(#scAutoRegister) .iof-intl-toggle {
margin-top: 10px !important;
margin-left: 32px;
display: flex !important;
align-items: center;
gap: 8px;
padding: 8px 11px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 9px;
font-size: .82rem;
cursor: pointer;
transition: background .12s;
}
#scheduledModal .form-group:has(#scAutoRegister) .iof-intl-toggle:hover {
background: var(--surface2);
}
#scheduledModal .form-group:has(#scAutoRegister) .iof-intl-toggle input[type=checkbox] {
width: 16px !important;
height: 16px !important;
accent-color: var(--accent);
flex-shrink: 0;
}
#scAutoConfirmHint {
font-size: .7rem;
font-weight: 600;
margin: 4px 0 0 32px !important;
color: var(--green, #16a34a);
}
/* ── Notify email toggle card ── */
#scheduledModal .form-group:has(#scNotifyEmail) {
background: var(--surface2);
border: 1.5px solid var(--border);
border-radius: 14px;
padding: 14px 15px !important;
gap: 0 !important;
transition: border-color .15s, box-shadow .15s;
}
#scheduledModal .form-group:has(#scNotifyEmail:checked) {
border-color: #3b82f6;
background: #eff6ff;
box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}
#scheduledModal .form-group:has(#scNotifyEmail) > label[style*="display:flex"] {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
align-items: center !important;
gap: 12px !important;
}
#scheduledModal .form-group:has(#scNotifyEmail) > label[style*="display:flex"] input[type=checkbox] {
width: 20px !important;
height: 20px !important;
accent-color: #3b82f6;
flex-shrink: 0;
}
#scheduledModal .form-group:has(#scNotifyEmail) > label > div > div:first-child {
font-size: .88rem;
font-weight: 700;
}
#scheduledModal .form-group:has(#scNotifyEmail) > label > div > div:last-child {
font-size: .73rem;
color: var(--text2);
margin-top: 2px;
line-height: 1.4;
}
/* Email details panel */
#scNotifyEmailDetails {
margin-top: 10px !important;
margin-left: 32px;
border-radius: 10px !important;
padding: 12px 13px !important;
background: var(--accent-lt, #eaf5ef) !important;
border: 1px solid rgba(42,96,73,.18) !important;
}
#scNotifyEmailDetails label {
font-size: .7rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .05em !important;
color: var(--text2) !important;
}
#scNotifyEmailDetails input,
#scNotifyEmailDetails select {
font-size: .85rem !important;
padding: 8px 11px !important;
border-radius: 9px !important;
}
/* Mobile: stack email details full width */
@media (max-width: 640px) {
#scheduledModal .form-group:has(#scAutoRegister) .iof-intl-toggle,
#scAutoConfirmHint,
#scNotifyEmailDetails {
margin-left: 0;
}
#scNotifyEmailDetails > div[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
INVESTMENTS PAGE — redesigned hero, portfolio card, position rows
═══════════════════════════════════════════════════════════════════════════ */
/* ── Hero header: total portfolio value ── */
.inv-hero {
background: linear-gradient(160deg, #0d3d28 0%, #1d6b47 60%, #0e3520 100%);
border-radius: 16px;
padding: 22px 22px 18px;
margin-bottom: 18px;
color: #fff;
position: relative;
overflow: hidden;
}
.inv-hero::before {
content: '';
position: absolute;
top: -40px; right: -40px;
width: 150px; height: 150px;
background: rgba(255,255,255,.04);
border-radius: 50%;
}
.inv-hero::after {
content: '';
position: absolute;
bottom: -30px; left: -20px;
width: 100px; height: 100px;
background: rgba(255,255,255,.025);
border-radius: 50%;
}
.inv-hero-label {
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: rgba(255,255,255,.55);
margin-bottom: 6px;
}
.inv-hero-value {
font-size: 2rem;
font-weight: 800;
letter-spacing: -.02em;
color: #fff;
line-height: 1.1;
font-family: var(--font-serif, monospace);
}
.inv-hero-pnl {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
font-size: .82rem;
flex-wrap: wrap;
}
.inv-hero-pnl.pos { color: #6ee7a0; }
.inv-hero-pnl.neg { color: #fca5a5; }
.inv-hero-pct { font-weight: 700; }
.inv-hero-cost { color: rgba(255,255,255,.45); font-size: .74rem; }
.inv-hero-kpis {
display: flex;
gap: 8px;
margin-top: 16px;
flex-wrap: wrap;
}
.inv-hero-kpis .inv-kpi-card {
flex: 1;
min-width: 80px;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.15);
border-radius: 10px;
padding: 10px 12px;
}
.inv-hero-kpis .inv-kpi-label { color: rgba(255,255,255,.55); }
.inv-hero-kpis .inv-kpi-value { color: #fff; font-size: .95rem; }
/* ── Asset type distribution bar ── */
.inv-type-bar-wrap { margin-top: 14px; }
.inv-type-bar {
display: flex;
height: 6px;
border-radius: 100px;
overflow: hidden;
gap: 2px;
margin-bottom: 8px;
}
.inv-type-bar > div { border-radius: 100px; transition: flex .3s; }
.inv-type-bar-legend {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.inv-legend-item {
display: flex;
align-items: center;
gap: 5px;
font-size: .7rem;
color: rgba(255,255,255,.7);
}
.inv-legend-item > span {
display: inline-block;
width: 8px; height: 8px;
border-radius: 2px;
flex-shrink: 0;
}
/* ── Actions bar ── */
.inv-actions-bar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 18px;
}
/* ── Portfolio card per account ── */
.inv-portfolio-card { margin-bottom: 18px; overflow: hidden; }
.inv-portfolio-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
}
.inv-portfolio-account-name {
font-weight: 700;
font-size: .97rem;
color: var(--text);
margin-bottom: 4px;
}
.inv-portfolio-meta {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.inv-portfolio-meta-item {
font-size: .76rem;
color: var(--muted);
}
.inv-portfolio-meta-item strong { color: var(--text2); }
.inv-portfolio-pnl {
text-align: right;
flex-shrink: 0;
}
.inv-portfolio-pnl.pos { color: var(--green, #16a34a); }
.inv-portfolio-pnl.neg { color: var(--red, #dc2626); }
.inv-portfolio-pnl-amt { font-weight: 700; font-size: .95rem; }
.inv-portfolio-pnl-pct { font-size: .78rem; font-weight: 600; opacity: .85; }
/* ── Position table ── */
.inv-positions-table { font-size: .82rem; overflow-x: auto; }
.inv-pos-header {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr 90px 72px;
gap: 8px;
padding: 8px 18px;
background: var(--surface2);
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
}
.inv-pos-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr 90px 72px;
gap: 8px;
padding: 11px 18px;
border-bottom: 1px solid var(--border);
align-items: center;
transition: background .1s;
}
.inv-pos-row:hover { background: var(--surface2); }
.inv-pos-row:last-child { border-bottom: none; }
.inv-pos-ticker {
font-weight: 800;
font-size: .92rem;
color: var(--text);
display: block;
letter-spacing: .01em;
}
.inv-pos-desc {
font-size: .7rem;
color: var(--muted);
display: block;
margin-top: 2px;
}
.inv-pos-type-badge {
display: inline-block;
font-size: .62rem;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 4px;
padding: 1px 5px;
vertical-align: middle;
color: var(--text2);
}
.inv-pos-cell { color: var(--text2); }
.inv-pos-alloc-wrap {
display: flex;
align-items: center;
gap: 5px;
margin-top: 3px;
}
.inv-pos-alloc-bar {
height: 4px;
background: var(--accent);
border-radius: 100px;
opacity: .6;
min-width: 2px;
max-width: 60px;
}
.inv-pos-alloc-pct { font-size: .65rem; color: var(--muted); }
.inv-pos-return {
font-weight: 700;
font-size: .84rem;
padding: 4px 8px;
border-radius: 20px;
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.inv-pos-return.pos {
color: var(--green, #16a34a);
background: var(--green-lt, #f0fdf4);
}
.inv-pos-return.neg {
color: var(--red, #dc2626);
background: var(--red-lt, #fef2f2);
}
.inv-pos-actions {
display: flex;
gap: 4px;
justify-content: flex-end;
}
.inv-type-group { margin-bottom: 4px; }
.inv-type-label {
font-size: .68rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--muted);
padding: 6px 18px 2px;
background: color-mix(in srgb, var(--surface2) 60%, transparent);
border-bottom: 1px solid var(--border);
}
.inv-price-stale { color: var(--amber, #b45309); }
/* ── Mobile investments ── */
@media (max-width: 640px) {
.inv-hero { padding: 18px 16px 16px; border-radius: 14px; }
.inv-hero-value { font-size: 1.6rem; }
.inv-hero-kpis { gap: 6px; }
.inv-hero-kpis .inv-kpi-card { padding: 8px 10px; min-width: 70px; }
.inv-hero-kpis .inv-kpi-value { font-size: .85rem; }
.inv-portfolio-header { padding: 12px 14px; }
.inv-portfolio-account-name { font-size: .9rem; }
.inv-pos-header { display: none; }
.inv-pos-row {
grid-template-columns: 1fr auto;
grid-template-rows: auto auto auto;
gap: 4px 8px;
padding: 12px 14px;
}
.inv-pos-name { grid-column: 1; grid-row: 1; }
.inv-pos-return { grid-column: 2; grid-row: 1; align-self: start; }
.inv-pos-cell:nth-child(3), /* qty */
.inv-pos-cell:nth-child(4), /* cost */
.inv-pos-cell:nth-child(5) { /* price */
grid-column: 1; font-size: .76rem; color: var(--muted);
display: inline;
}
.inv-pos-cell:nth-child(6) { /* value + bar */
grid-column: 1; grid-row: 3;
}
.inv-pos-actions { grid-column: 2; grid-row: 2 / 4; align-self: center; flex-direction: column; }
.inv-type-label { padding: 6px 14px 2px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
PAYEES PAGE — Mobile redesign completo
Transforma tabela em cards individuais, sem alterar JS
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
/* ── Header: botões empilhados, + Novo em destaque ── */
#page-payees .section-header {
flex-direction: column;
align-items: stretch;
gap: 10px;
margin-bottom: 12px;
}
#page-payees .section-header > div {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 7px;
width: 100%;
}
#page-payees .section-header .btn {
font-size: .78rem;
padding: 9px 8px;
border-radius: 11px;
min-height: 38px;
justify-content: center;
white-space: nowrap;
}
#page-payees .section-header .btn-primary {
grid-column: 3;
padding: 9px 14px;
font-weight: 700;
font-size: .85rem;
}
/* ── Filter bar: search full-width, select below ── */
#page-payees .filters {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
overflow: visible;
}
#page-payees .search-wrap {
width: 100%;
min-width: unset;
flex: unset;
}
#page-payees .search-wrap input {
font-size: .9rem;
padding: 10px 12px 10px 36px;
border-radius: 11px;
}
#page-payees .filters select {
width: 100%;
max-width: unset;
font-size: .88rem;
padding: 10px 13px;
border-radius: 11px;
-webkit-appearance: none;
appearance: none;
}
/* ── Summary chips: horizontal scroll ── */
#payeeSummaryBar {
flex-wrap: nowrap !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 7px !important;
margin-bottom: 12px !important;
padding-bottom: 2px;
}
#payeeSummaryBar::-webkit-scrollbar { display: none; }
.payee-summary-chip {
flex-shrink: 0;
padding: 7px 13px;
border-radius: 100px;
font-size: .78rem;
}
/* ── Group wrapper: tighter radius ── */
.payee-group-wrap {
border-radius: 14px;
margin-bottom: 10px;
}
.payee-group-header {
padding: 12px 14px;
gap: 10px;
}
.payee-group-icon {
width: 32px;
height: 32px;
border-radius: 9px;
font-size: .95rem;
}
.payee-group-title { font-size: .88rem; }
/* ── Table → card list: hide table chrome ── */
#page-payees .table-wrap { overflow: visible; margin: 0; }
#page-payees table { display: block; }
#page-payees thead { display: none; }
#page-payees tbody { display: flex; flex-direction: column; gap: 0; }
/* ── Each row → card ── */
#page-payees .payee-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-bottom: 1px solid var(--border);
transition: background .1s;
cursor: default;
width: 100%;
box-sizing: border-box;
}
#page-payees .payee-row:last-child { border-bottom: none; }
#page-payees .payee-row:active { background: var(--surface2); }
/* All TD become visible block/flex */
#page-payees .payee-row td {
display: contents; /* let children flow into flex */
}
/* Avatar: left anchor */
#page-payees .payee-row-avatar {
width: 38px;
height: 38px;
border-radius: 12px;
font-size: .8rem;
font-weight: 800;
flex-shrink: 0;
}
/* Name + meta: takes all remaining space */
#page-payees .payee-row td:first-child > div {
flex: 1;
min-width: 0;
}
#page-payees .payee-row td:first-child > div > div:first-child {
font-size: .88rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Contact chips: wrap under name */
#page-payees .payee-row td:first-child > div > div:nth-child(2) {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 3px;
}
/* Default category column: shown as small badge under name */
#page-payees .payee-row td:nth-child(2) {
display: none; /* hidden — shown inline via JS already as chip */
}
/* TX count badge: compact, right side */
#page-payees .payee-row td:nth-child(3) {
display: flex;
align-items: center;
flex-shrink: 0;
margin-left: auto;
}
#page-payees .payee-row td:nth-child(3) .badge {
font-size: .7rem;
padding: 3px 8px;
border-radius: 20px;
}
/* Actions: icon buttons, stacked ── */
#page-payees .payee-row td:last-child {
display: flex;
flex-direction: row;
gap: 4px;
flex-shrink: 0;
}
#page-payees .payee-row td:last-child > div {
display: flex;
gap: 4px;
flex-direction: row;
}
#page-payees .btn-icon {
width: 34px;
height: 34px;
border-radius: 9px;
border: 1px solid var(--border);
background: var(--surface2);
display: flex;
align-items: center;
justify-content: center;
font-size: .9rem;
cursor: pointer;
transition: background .12s;
-webkit-tap-highlight-color: transparent;
padding: 0;
}
#page-payees .btn-icon:active { background: var(--bg2); }
}
/* ═══════════════════════════════════════════════════════════════════════════
AI SMART SUGGESTIONS PANEL
Shows inline chips for payee / category / account / member suggestions
═══════════════════════════════════════════════════════════════════════════ */
.ai-suggest-panel {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 12px;
padding: 8px 10px;
animation: ai-suggest-in .18s ease;
}
@keyframes ai-suggest-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.ai-suggest-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 7px;
}
.ai-suggest-title {
font-size: .67rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--accent);
}
.ai-suggest-dismiss {
background: none;
border: none;
color: var(--muted);
cursor: pointer;
font-size: .8rem;
padding: 2px 5px;
border-radius: 4px;
line-height: 1;
transition: background .1s;
}
.ai-suggest-dismiss:hover { background: var(--bg2); }
.ai-suggest-chips {
display: flex;
flex-direction: column;
gap: 5px;
}
.ai-suggest-chip {
display: flex;
align-items: center;
gap: 6px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 9px;
padding: 5px 8px;
min-height: 34px;
}
.ai-suggest-chip-label {
font-size: .65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--muted);
min-width: 62px;
flex-shrink: 0;
}
.ai-suggest-chip-value {
flex: 1;
background: var(--accent);
color: #fff;
border: none;
border-radius: 7px;
padding: 4px 10px;
font-size: .8rem;
font-weight: 600;
cursor: pointer;
font-family: var(--font-sans);
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: background .12s, transform .1s;
-webkit-tap-highlight-color: transparent;
}
.ai-suggest-chip-value:hover { background: color-mix(in srgb, var(--accent) 85%, #000); }
.ai-suggest-chip-value:active { transform: scale(.96); }
.ai-suggest-chip-dismiss {
background: none;
border: none;
color: var(--muted);
cursor: pointer;
font-size: .78rem;
padding: 3px 5px;
border-radius: 5px;
flex-shrink: 0;
transition: background .1s;
line-height: 1;
}
.ai-suggest-chip-dismiss:hover { background: var(--bg2); color: var(--text2); }
/* Mobile: bigger tap targets */
@media (max-width: 640px) {
.ai-suggest-chip { min-height: 38px; padding: 6px 10px; }
.ai-suggest-chip-value { padding: 6px 12px; font-size: .82rem; }
.ai-suggest-chip-label { min-width: 70px; font-size: .67rem; }
.ai-suggest-chip-dismiss { padding: 5px 8px; font-size: .82rem; }
}
/* ═══════════════════════════════════════════════════════════════════════════
PAYEES — Mobile edit action buttons always visible
═══════════════════════════════════════════════════════════════════════════ */
/* Desktop: keep existing behaviour (hidden until hover) */
.payee-row-actions .payee-delete-btn { opacity: .5; transition: opacity .15s; }
.payee-row:hover .payee-delete-btn { opacity: 1; }
@media (max-width: 640px) {
/* On mobile the action td uses flex via the display:contents trick — */
/* make both buttons always visible and easy to tap */
#page-payees .payee-row td:last-child .payee-edit-btn,
#page-payees .payee-row td:last-child .payee-delete-btn {
opacity: 1 !important;
width: 36px;
height: 36px;
border-radius: 10px;
border: 1.5px solid var(--border);
background: var(--surface2);
display: flex;
align-items: center;
justify-content: center;
font-size: .9rem;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
flex-shrink: 0;
}
#page-payees .payee-row td:last-child .payee-edit-btn {
background: var(--accent-lt);
border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
#page-payees .payee-row td:last-child .payee-delete-btn {
background: var(--red-lt, #fef2f2);
border-color: color-mix(in srgb, var(--red, #dc2626) 25%, var(--border));
color: var(--red, #dc2626) !important;
}
#page-payees .payee-row td:last-child .payee-edit-btn:active,
#page-payees .payee-row td:last-child .payee-delete-btn:active {
transform: scale(.92);
}
}
/* Payee modal — mobile form optimizations */
@media (max-width: 640px) {
#payeeModal .modal { border-radius: 22px 22px 0 0; max-height: 96dvh; }
#payeeModal .modal-body { padding: 14px 16px; }
#payeeModal .modal-header { padding: 10px 18px; }
#payeeModal .modal-title { font-size: .97rem; font-weight: 600; }
#payeeModal .form-grid { grid-template-columns: 1fr; gap: 12px; }
#payeeModal .form-group > label:first-child {
font-size: .68rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .055em; color: var(--text2); margin-bottom: 2px;
}
#payeeModal .form-group input,
#payeeModal .form-group select,
#payeeModal .form-group textarea {
font-size: .9rem; padding: 11px 13px; border-radius: 11px;
border: 1.5px solid var(--border);
}
#payeeModal .form-group input:focus,
#payeeModal .form-group select:focus,
#payeeModal .form-group textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
outline: none;
}
#payeeModal #payeeCatPickerBtn {
padding: 11px 13px; border-radius: 11px; font-size: .9rem;
border: 1.5px solid var(--border);
}
#payeeModal details {
border-radius: 11px; margin-top: 8px;
}
#payeeModal details summary {
padding: 10px 13px; font-size: .76rem;
}
#payeeModal .modal-footer {
padding: 12px 16px max(16px, env(safe-area-inset-bottom));
flex-direction: row-reverse; gap: 10px;
}
#payeeModal .modal-footer .btn-primary {
flex: 1; padding: 14px; font-size: .95rem; font-weight: 700; border-radius: 13px;
}
#payeeModal .modal-footer .btn-ghost {
padding: 14px 18px; font-size: .88rem; border-radius: 13px;
border: 1.5px solid var(--border);
}
}
/* ═══════════════════════════════════════════════════════════════════════════
TABLET / iPAD — Transactions page layout fix
Breakpoint 641px–1024px: sidebar is hidden, content is full-width,
but previous CSS only had desktop (>768) and phone (≤640) rules.
This fills the gap so the transactions page uses the space correctly.
═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 1024px) {
/* ── Content area: use full width since sidebar is hidden ── */
.content {
padding: 16px 18px;
padding-bottom: calc(var(--bottom-h, 64px) + 24px + env(safe-area-inset-bottom));
}
/* ── Transactions page header ── */
.tx-page-header {
flex-wrap: nowrap;
margin-bottom: 10px;
gap: 10px;
}
/* ── Filter bar: single row on tablet (enough space) ── */
.tx-filter-bar {
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
gap: 8px;
margin-bottom: 10px;
}
/* Search: takes flexible space, not full width */
.tx-search-wrap {
flex: 1;
min-width: 160px;
max-width: 280px;
}
/* Chips row: scrollable on tablet instead of wrapping */
.tx-filter-chips-row {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
flex: 1;
min-width: 0;
}
.tx-filter-chips-row::-webkit-scrollbar { display: none; }
.tx-chip-select {
font-size: .76rem;
padding: 5px 26px 5px 11px;
max-width: 140px;
flex-shrink: 0;
white-space: nowrap;
}
.tx-view-btns {
flex-shrink: 0;
margin-left: 0;
}
/* ── Transaction table: proper desktop layout, not the card/block layout ── */
/* Undo any phone-only block overrides that might bleed into tablet */
#page-transactions table,
#page-transactions tbody,
#page-transactions tr,
#page-transactions td {
display: revert !important;
width: revert !important;
}
#page-transactions #txFlatCard table thead { display: revert !important; }
#page-transactions #txFlatCard .table-wrap { overflow: auto; }
/* Standard table row (not card) */
#page-transactions tbody tr {
display: table-row !important;
border: none !important;
border-bottom: 1px solid var(--border) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
grid-template-columns: unset !important;
transform: none !important;
}
#page-transactions tbody tr:hover { background: var(--surface2) !important; }
#page-transactions tbody td {
display: table-cell !important;
width: revert !important;
padding: 8px 10px !important;
border: none !important;
vertical-align: middle;
}
/* Date header rows stay as flex rows */
#page-transactions tbody tr.tx-date-header-row {
display: flex !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 14px 0 4px !important;
margin: 0 !important;
}
/* Keep band colouring light on tablet */
tr.tx-date-band:not(.tx-date-header-row) { border-left: none !important; }
tr.tx-date-band-alt:not(.tx-date-header-row) {
border-left: none !important;
background: color-mix(in srgb, var(--surface2) 50%, transparent) !important;
}
/* Pending row */
#page-transactions tbody tr.tx-pending {
background: rgba(251,191,36,.05) !important;
border-left: 3px solid #f59e0b !important;
}
/* Show/hide action buttons on tablet */
#page-transactions tbody td.tx-v2-act { display: table-cell !important; }
.tx-reconcile-btn { display: inline-flex !important; }
/* Table header visible */
#page-transactions thead { display: table-header-group !important; }
/* Table column widths for tablet viewport */
.tx-v2-th-date { width: 72px; }
.tx-v2-th-right { width: 100px; }
.tx-v2-th-act { width: 76px; }
/* Typography: between desktop and phone */
.tx-v2-title { font-size: .875rem; }
.tx-v2-meta { font-size: .71rem; }
.tx-v2-amt { font-size: .92rem; }
.tx-date-day { font-size: .82rem; }
.tx-date-mon { font-size: .6rem; }
/* Separator rows (CONFIRMADAS) */
#page-transactions tbody tr:has(.tx-v2-sep) {
display: table-row !important;
background: var(--surface2) !important;
}
/* Pagination bar */
.tx-pagination {
padding: 8px 12px;
flex-wrap: nowrap;
justify-content: space-between;
}
/* Summary bar */
#txSummaryBar { flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
/* Group view: tighter cards */
.tx-group-wrap { margin-bottom: 10px; }
/* Page header green bar: full width */
.page-header-bar {
margin: -16px -18px 14px -18px;
width: calc(100% + 36px);
}
}
/* ── iPAD landscape (1024px+): ensure sidebar can show if user opens it ── */
@media (min-width: 1025px) {
/* Restore desktop layout — sidebar visible, content with sidebar offset */
.content {
padding: 24px;
padding-bottom: max(24px, env(safe-area-inset-bottom));
}
}
/* ═══════════════════════════════════════════════════════════════════════════
DEBTS — Hero header + redesigned cards (dbt-hero-*, dbt-card2-*)
═══════════════════════════════════════════════════════════════════════════ */
/* ── Hero header ── */
.dbt-hero {
background: linear-gradient(160deg, #0d3d28 0%, #1d6b47 60%, #0e3520 100%);
border-radius: 16px;
padding: 20px 22px 16px;
margin-bottom: 18px;
color: #fff;
position: relative;
overflow: hidden;
}
.dbt-hero::before {
content: '';
position: absolute;
top: -40px; right: -40px;
width: 150px; height: 150px;
background: rgba(255,255,255,.04);
border-radius: 50%;
}
.dbt-hero-label {
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: rgba(255,255,255,.5);
margin-bottom: 5px;
}
.dbt-hero-value {
font-size: 1.9rem;
font-weight: 800;
letter-spacing: -.02em;
color: #fff;
font-family: var(--font-serif, monospace);
line-height: 1.1;
}
.dbt-hero-sub {
display: flex;
align-items: center;
gap: 8px;
margin-top: 5px;
font-size: .78rem;
color: rgba(255,255,255,.55);
flex-wrap: wrap;
}
.dbt-hero-sep { opacity: .3; }
.dbt-hero-kpis {
display: flex;
gap: 8px;
margin-top: 14px;
flex-wrap: wrap;
}
.dbt-hero-kpi {
flex: 1;
min-width: 60px;
background: rgba(255,255,255,.09);
border: 1px solid rgba(255,255,255,.12);
border-radius: 10px;
padding: 8px 12px;
text-align: center;
}
.dbt-hero-kpi-val {
font-size: .95rem;
font-weight: 700;
color: #fff;
line-height: 1.1;
}
.dbt-hero-kpi-lbl {
font-size: .62rem;
color: rgba(255,255,255,.5);
margin-top: 2px;
text-transform: uppercase;
letter-spacing: .05em;
}
.dbt-hero-progress {
height: 5px;
background: rgba(255,255,255,.12);
border-radius: 100px;
margin-top: 14px;
overflow: hidden;
}
.dbt-hero-progress-bar {
height: 100%;
background: linear-gradient(90deg, #a78bfa, #7c3aed);
border-radius: 100px;
transition: width .5s ease;
}
/* ── Debt card v2 ── */
.dbt-card2 {
display: flex;
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
background: var(--surface);
margin-bottom: 10px;
cursor: pointer;
transition: box-shadow .15s, transform .12s;
box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.dbt-card2:hover {
box-shadow: 0 6px 20px rgba(0,0,0,.09);
transform: translateY(-1px);
}
.dbt-card2:active { transform: scale(.99); }
.dbt-card2-accent {
width: 5px;
flex-shrink: 0;
border-radius: 0;
}
.dbt-card2-body {
flex: 1;
padding: 13px 15px 11px;
min-width: 0;
}
.dbt-card2-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.dbt-card2-left { min-width: 0; flex: 1; }
.dbt-card2-name {
font-size: .92rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 2px;
}
.dbt-card2-creditor {
font-size: .73rem;
color: var(--muted);
}
.dbt-card2-right {
text-align: right;
flex-shrink: 0;
}
.dbt-card2-balance {
font-size: 1.05rem;
font-weight: 800;
font-family: var(--font-serif, monospace);
font-variant-numeric: tabular-nums;
margin-bottom: 3px;
}
.dbt-badge2 {
display: inline-block;
font-size: .63rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: .04em;
}
.dbt-card2-progress-wrap {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.dbt-card2-progress {
flex: 1;
height: 5px;
background: var(--border);
border-radius: 100px;
overflow: hidden;
}
.dbt-card2-progress-fill {
height: 100%;
border-radius: 100px;
opacity: .75;
transition: width .35s ease;
}
.dbt-card2-pct {
font-size: .68rem;
font-weight: 700;
color: var(--muted);
min-width: 30px;
text-align: right;
}
.dbt-card2-meta {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.dbt-card2-meta-item {
display: flex;
flex-direction: column;
gap: 1px;
}
.dbt-card2-meta-lbl {
font-size: .62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--muted);
}
.dbt-card2-meta-val {
font-size: .8rem;
font-weight: 600;
color: var(--text2);
font-variant-numeric: tabular-nums;
}
/* Mobile debts */
@media (max-width: 640px) {
.dbt-hero { padding: 16px 16px 14px; border-radius: 14px; }
.dbt-hero-value { font-size: 1.6rem; }
.dbt-hero-kpis { gap: 6px; }
.dbt-hero-kpi { padding: 7px 10px; }
.dbt-hero-kpi-val { font-size: .85rem; }
.dbt-card2-body { padding: 11px 13px 10px; }
.dbt-card2-name { font-size: .87rem; }
.dbt-card2-balance { font-size: .97rem; }
.dbt-card2-meta { gap: 10px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
PRICES — Hero summary strip + improved cards
═══════════════════════════════════════════════════════════════════════════ */
/* ── Hero strip ── */
.px-hero-strip {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
.px-hero-kpi {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 11px 14px;
display: flex;
flex-direction: column;
gap: 3px;
}
.px-hero-kpi-val {
font-size: 1.1rem;
font-weight: 800;
color: var(--text);
font-variant-numeric: tabular-nums;
letter-spacing: -.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.px-hero-kpi-lbl {
font-size: .62rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Improved price card ── */
.px-card {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 14px;
padding: 13px 14px 11px;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
display: flex;
flex-direction: column;
gap: 7px;
position: relative;
overflow: hidden;
}
.px-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--px-clr, var(--accent));
border-radius: 14px 14px 0 0;
opacity: .75;
}
.px-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,.09);
border-color: var(--px-clr, var(--accent));
}
.px-card:active { transform: scale(.98); }
/* Prices row: horizontal stats */
.px-prices {
display: flex;
gap: 0;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
margin-top: 1px;
}
.px-price-col {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 4px 5px;
border-right: 1px solid var(--border);
background: var(--surface2);
}
.px-price-col:last-child { border-right: none; }
.px-price-lbl {
font-size: .58rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
margin-bottom: 3px;
white-space: nowrap;
}
.px-price-val {
font-size: .82rem;
font-weight: 700;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.px-price-val.accent { color: var(--accent); }
/* Mobile prices */
@media (max-width: 640px) {
.px-hero-strip { grid-template-columns: 1fr 1fr; gap: 8px; }
.px-hero-kpi { padding: 9px 11px; }
.px-hero-kpi-val { font-size: .95rem; }
}
/* === Scheduled frequency pills: source-of-truth color mapping === */
.sc-card-meta {
display:flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
}
.sc-card-meta-text {
color: var(--muted);
font-size: .76rem;
}
.sc-freq-pill {
display:inline-flex;
align-items:center;
white-space:nowrap;
padding:4px 10px;
border-radius:999px;
font-size:.72rem;
font-weight:800;
letter-spacing:.01em;
border:1px solid transparent;
line-height:1;
}
.sc-freq-once { background:#eef2ff; color:#4338ca; border-color:#c7d2fe; }
.sc-freq-weekly { background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.sc-freq-biweekly { background:#f0fdf4; color:#166534; border-color:#86efac; }
.sc-freq-monthly { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
.sc-freq-bimonthly { background:#f5f3ff; color:#6d28d9; border-color:#ddd6fe; }
.sc-freq-quarterly { background:#fff7ed; color:#c2410c; border-color:#fdba74; }
.sc-freq-semiannual { background:#fefce8; color:#854d0e; border-color:#fde68a; }
.sc-freq-annual { background:#fdf2f8; color:#be185d; border-color:#f9a8d4; }
.sc-freq-custom { background:#f3f4f6; color:#374151; border-color:#d1d5db; }
/* Keep chips and member list aligned without breaking the card */
.sc-card-meta .sc-cat-chip,
.sc-card-meta .sc-member-chips {
margin-left:0;
}
.sc-card-meta .sc-member-chips {
width:100%;
}
/* === Transactions list width fix: fill the entire available area === */
#page-transactions #txFlatCard,
#page-transactions #txFlatCard .table-wrap,
#page-transactions #txMainTable {
width:100%;
}
#page-transactions #txMainTable {
table-layout:fixed;
}
#page-transactions #txMainTable thead th.tx-v2-th-body {
width:auto;
}
#page-transactions #txMainTable thead th.tx-v2-th-date {
width:72px;
}
#page-transactions #txMainTable thead th.tx-v2-th-right {
width:132px;
}
#page-transactions #txMainTable thead th.tx-v2-th-act {
width:72px;
}
#page-transactions .tx-v2-body,
#page-transactions .tx-v2-title,
#page-transactions .tx-v2-category,
#page-transactions .tx-v2-meta {
min-width:0;
}
#page-transactions .tx-v2-title,
#page-transactions .tx-v2-category,
#page-transactions .tx-v2-meta {
overflow:hidden;
text-overflow:ellipsis;
}
#page-transactions .tx-v2-right {
width:132px;
}
@media (max-width: 1024px) {
#page-transactions #txMainTable {
table-layout:auto;
}
}
/* === THEME UPDATE === */
.topbar, .header, .app-header {
background: linear-gradient(135deg, #163d35 0%, #2f7f63 48%, #b7db4a 100%) !important;
color: #F7FAF8;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.page-titlebar {
background: #305E4E !important;
color: #F7FAF8;
}
.fx-bar {
background: #F4FBF7;
color: #23483B;
border-bottom: 1px solid #D8EADF;
}
/* === 2026-03 header refresh === */
.topbar-left { gap: 10px; }
.topbar .hamburger,
#topbarBackBtn {
color: #f7fff9;
}
#topbarBackBtn {
background: rgba(255,255,255,0.16) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
color: #ffffff !important;
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
}
#topbarBackBtn:hover { background: rgba(255,255,255,0.22) !important; }
.topbar-quick-actions { gap: 8px !important; }
#privacyToggleBtn {
background: rgba(255,255,255,0.12) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
color: #f7fff9 !important;
width: 36px;
height: 36px;
border-radius: 12px !important;
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
#privacyToggleBtn:hover {
color: #ffffff !important;
background: rgba(255,255,255,0.18) !important;
}
.page-header-bar + .fx-bar {
box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.fx-bar-inner {
justify-content: flex-start;
max-width: none;
padding: 0 16px;
}
.fx-bar-label {
color: #37654c;
}
.fx-bar-age {
margin-left: auto;
}
/* === 2026-03-25 patch: forecast + transactions width === */
/* Forecast: avoid repeating "Saldo:" on every row */
.forecast-run-bal::before{content:none !important;}
/* Transactions desktop: force table to occupy full available width */
#page-transactions #txFlatCard,
#page-transactions #txFlatCard .table-wrap,
#page-transactions #txMainTable {
width: 100% !important;
max-width: 100% !important;
}
#page-transactions #txMainTable {
table-layout: fixed !important;
border-collapse: collapse;
}
#page-transactions #txMainTable thead,
#page-transactions #txMainTable tbody {
width: 100% !important;
}
#page-transactions #txMainTable thead th.tx-v2-th-date,
#page-transactions #txMainTable tbody td.tx-v2-date {
width: 72px !important;
min-width: 72px !important;
}
#page-transactions #txMainTable thead th.tx-v2-th-right,
#page-transactions #txMainTable tbody td.tx-v2-right {
width: 180px !important;
min-width: 180px !important;
}
#page-transactions #txMainTable thead th.tx-v2-th-act,
#page-transactions #txMainTable tbody td.tx-v2-act {
width: 0 !important;
min-width: 0 !important;
padding: 0 !important;
border: 0 !important;
display: none !important;
}
#page-transactions #txMainTable thead th.tx-v2-th-body,
#page-transactions #txMainTable tbody td.tx-v2-body {
width: auto !important;
}
#page-transactions #txMainTable tbody tr {
display: table-row !important;
}
#page-transactions #txMainTable tbody td {
display: table-cell !important;
vertical-align: top;
}
#page-transactions #txMainTable .tx-v2-body,
#page-transactions #txMainTable .tx-v2-title,
#page-transactions #txMainTable .tx-v2-category,
#page-transactions #txMainTable .tx-v2-meta {
min-width: 0;
}
#page-transactions #txMainTable .tx-v2-title,
#page-transactions #txMainTable .tx-v2-category,
#page-transactions #txMainTable .tx-v2-meta {
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 1024px) {
#page-transactions #txMainTable {
table-layout: auto !important;
}
}
/* Transactions list full-width fix */
.transactions-page .table-wrap,
.transactions-page .transactions-table-wrap,
.transactions-page .transactions-list,
.transactions-page .transactions-grid,
.transactions-page .card-table,
.transactions-page .list-card,
#transactions-page .table-wrap,
#transactions-page .transactions-table-wrap,
#transactions-page .transactions-list,
#transactions-page .transactions-grid,
#transactions-page .card-table,
#transactions-page .list-card,
[data-page="transactions"] .table-wrap,
[data-page="transactions"] .transactions-table-wrap,
[data-page="transactions"] .transactions-list,
[data-page="transactions"] .transactions-grid,
[data-page="transactions"] .card-table,
[data-page="transactions"] .list-card,
section[data-page="transactions"] .table-wrap,
section[data-page="transactions"] .transactions-table-wrap,
section[data-page="transactions"] .transactions-list,
section[data-page="transactions"] .transactions-grid,
section[data-page="transactions"] .card-table,
section[data-page="transactions"] .list-card {
width: 100% !important;
max-width: 100% !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
.transactions-page table,
.transactions-page .transactions-table,
#transactions-page table,
#transactions-page .transactions-table,
[data-page="transactions"] table,
[data-page="transactions"] .transactions-table,
section[data-page="transactions"] table,
section[data-page="transactions"] .transactions-table {
width: 100% !important;
max-width: 100% !important;
table-layout: fixed !important;
}
.transactions-page tbody tr,
#transactions-page tbody tr,
[data-page="transactions"] tbody tr,
section[data-page="transactions"] tbody tr {
width: 100% !important;
}
.transactions-page th:last-child,
.transactions-page td:last-child,
#transactions-page th:last-child,
#transactions-page td:last-child,
[data-page="transactions"] th:last-child,
[data-page="transactions"] td:last-child,
section[data-page="transactions"] th:last-child,
section[data-page="transactions"] td:last-child {
width: 220px !important;
min-width: 220px !important;
}
.transactions-page th:nth-child(2),
.transactions-page td:nth-child(2),
#transactions-page th:nth-child(2),
#transactions-page td:nth-child(2),
[data-page="transactions"] th:nth-child(2),
[data-page="transactions"] td:nth-child(2),
section[data-page="transactions"] th:nth-child(2),
section[data-page="transactions"] td:nth-child(2) {
width: auto !important;
}
.transactions-page .content,
#transactions-page .content,
[data-page="transactions"] .content,
section[data-page="transactions"] .content {
width: 100% !important;
max-width: 100% !important;
}
/* 2026-03-25 transactions width hard fix */
#page-transactions #txFlatCard,
#page-transactions #txFlatCard .table-wrap,
#page-transactions #txMainTable,
#page-transactions #txMainTable tbody,
#page-transactions #txMainTable tr {
width: 100% !important;
max-width: 100% !important;
}
#page-transactions #txMainTable {
table-layout: fixed !important;
}
#page-transactions #txMainTable thead th:nth-child(1),
#page-transactions #txMainTable tbody td.tx-v2-date {
width: 72px !important;
min-width: 72px !important;
}
#page-transactions #txMainTable thead th:nth-child(3),
#page-transactions #txMainTable tbody td.tx-v2-right {
width: 196px !important;
min-width: 196px !important;
}
#page-transactions #txMainTable thead th:nth-child(2),
#page-transactions #txMainTable tbody td.tx-v2-body {
width: calc(100% - 268px) !important;
}
#page-transactions #txMainTable tbody td.tx-v2-body {
overflow: hidden !important;
}
#page-transactions #txMainTable .tx-v2-inline-actions {
display: flex;
justify-content: flex-end;
margin-top: 6px;
}
#page-transactions #txMainTable .tx-reconcile-btn {
font-size: .7rem;
padding: 3px 8px;
}
@media (max-width: 1024px) {
#page-transactions #txMainTable {
table-layout: auto !important;
}
#page-transactions #txMainTable thead th:nth-child(2),
#page-transactions #txMainTable tbody td.tx-v2-body {
width: auto !important;
}
}
/* === 2026-03 transactions / topbar / mobile refinement === */
/* Invert visual hierarchy: topbar medium green, title bar gradient */
.topbar{
background:#166534 !important;
border-bottom:1px solid rgba(255,255,255,.14) !important;
box-shadow:0 6px 18px rgba(7,32,20,.14) !important;
}
.page-header-bar{
background:linear-gradient(135deg,#0e3b2b 0%, #145238 52%, #1c6a49 100%) !important;
border-bottom:1px solid rgba(255,255,255,.10) !important;
box-shadow:0 6px 18px rgba(5,34,20,.12) !important;
}
/* FX centered */
.fx-bar-inner{
justify-content:center !important;
}
.fx-bar-rates{
justify-content:center !important;
flex:0 1 auto !important;
min-width:0 !important;
}
.fx-bar{
text-align:center;
}
.fx-bar-label,
.fx-bar-age,
.fx-bar-refresh{
flex:0 0 auto;
}
/* Highlight account in flat list when account grouping is not applied */
.tx-v2-acct-pill{
display:inline-flex;
align-items:center;
max-width:100%;
padding:2px 10px;
border-radius:999px;
border:1px solid rgba(22,101,52,.28);
background:rgba(22,101,52,.06);
color:#166534;
font-weight:700;
line-height:1.2;
}
.tx-v2-acct-pill::before{
content:'◌';
font-size:.62rem;
margin-right:5px;
opacity:.7;
}
/* Desktop/tablet transactions full width and resilient sizing */
#page-transactions #txFlatCard,
#page-transactions #txFlatCard .table-wrap,
#page-transactions #txMainTable,
#page-transactions #txPagination{
width:100% !important;
max-width:100% !important;
}
#page-transactions #txFlatCard{
overflow:hidden;
}
#page-transactions #txMainTable{
table-layout:fixed !important;
}
#page-transactions #txMainTable thead th:nth-child(1),
#page-transactions #txMainTable tbody td.tx-v2-date{
width:72px !important;
}
#page-transactions #txMainTable thead th:nth-child(3),
#page-transactions #txMainTable tbody td.tx-v2-right{
width:220px !important;
}
#page-transactions #txMainTable thead th:nth-child(2),
#page-transactions #txMainTable tbody td.tx-v2-body{
width:auto !important;
}
#page-transactions #txMainTable tbody td.tx-v2-body{
min-width:0 !important;
}
#page-transactions #txMainTable tbody td.tx-v2-right{
padding-right:14px !important;
}
/* Mobile rescue for transactions page */
@media (max-width: 640px){
#page-transactions{
width:100%;
}
#page-transactions .tx-page-header{
flex-direction:column;
align-items:stretch;
gap:10px;
}
#page-transactions .tx-page-title-area,
#page-transactions .tx-page-totals{
width:100%;
min-width:0;
flex-wrap:wrap;
}
#page-transactions .tx-filter-bar{
gap:10px;
}
#page-transactions .tx-filter-chips-row{
width:100%;
overflow-x:auto;
padding-bottom:2px;
flex-wrap:nowrap;
}
#page-transactions .tx-filter-chip-wrap,
#page-transactions .tx-chip-filter-btn{
flex:0 0 auto;
}
#page-transactions #txFlatCard{
border-radius:14px;
overflow:visible;
}
#page-transactions #txFlatCard .table-wrap{
overflow:visible;
}
#page-transactions #txMainTable,
#page-transactions #txMainTable tbody,
#page-transactions #txMainTable tr,
#page-transactions #txMainTable td{
display:block;
width:100%;
}
#page-transactions #txMainTable thead{
display:none;
}
/* Preserve date separators as separators, not cards */
#page-transactions #txBody tr.tx-date-header-row{
display:block;
margin:12px 0 8px;
border:none;
background:transparent;
padding:0;
box-shadow:none;
}
#page-transactions #txBody tr.tx-date-header-row td{
display:block;
width:100%;
padding:0 2px !important;
border:none !important;
background:transparent !important;
}
#page-transactions #txBody tr.tx-date-header-row .tx-date-header-cell{
font-size:.78rem;
font-weight:800;
letter-spacing:.03em;
}
/* Regular rows become tighter mobile cards */
#page-transactions #txBody tr.tx-row-clickable{
display:grid !important;
grid-template-columns:48px minmax(0,1fr);
grid-template-areas:
"date right"
"body body";
gap:5px 8px;
align-items:start;
margin:6px 0;
padding:9px 10px;
border:1px solid var(--border);
border-radius:12px;
background:var(--surface);
box-shadow:0 1px 3px rgba(0,0,0,.035);
}
#page-transactions #txBody tr.tx-row-clickable td{
padding:0 !important;
border:none !important;
min-width:0;
width:auto !important;
}
#page-transactions #txBody td.tx-v2-date{
grid-area:date;
width:48px !important;
text-align:center;
padding-top:1px !important;
}
#page-transactions #txBody td.tx-v2-date .tx-date-day{
font-size:.98rem;
line-height:.95;
}
#page-transactions #txBody td.tx-v2-date .tx-date-mon{
margin-top:1px;
font-size:.58rem;
letter-spacing:.06em;
}
#page-transactions #txBody td.tx-v2-right{
grid-area:right;
width:auto !important;
text-align:right;
justify-self:end;
white-space:normal;
}
#page-transactions #txBody td.tx-v2-right{
min-width:92px;
}
#page-transactions #txBody td.tx-v2-body{
grid-area:body;
width:auto !important;
max-width:100%;
}
#page-transactions .tx-v2-title{
white-space:normal;
overflow:visible;
text-overflow:clip;
line-height:1.18;
font-size:.84rem;
align-items:flex-start;
flex-wrap:wrap;
gap:4px;
}
#page-transactions .tx-v2-category{
margin-top:2px;
white-space:normal;
overflow:visible;
text-overflow:clip;
font-size:.72rem;
line-height:1.15;
}
#page-transactions .tx-v2-meta{
margin-top:3px;
flex-wrap:wrap;
white-space:normal;
overflow:visible;
row-gap:2px;
column-gap:4px;
font-size:.68rem;
line-height:1.1;
}
#page-transactions .tx-v2-acct-pill{
max-width:100%;
}
#page-transactions .tx-v2-pay{
max-width:100%;
}
#page-transactions .tx-v2-amt{
font-size:.92rem;
line-height:1;
}
#page-transactions .tx-v2-amt-wrap{
align-items:flex-end;
gap:2px;
}
#page-transactions .tx-v2-bal{
margin-top:1px;
font-size:.7rem;
line-height:1.05;
}
#page-transactions .tx-v2-inline-actions{
margin-top:5px;
}
#page-transactions #txMainTable .tx-reconcile-btn{
font-size:.64rem;
padding:3px 7px;
min-height:auto;
}
#page-transactions #txPagination{
padding:10px 12px;
flex-direction:column;
gap:8px;
align-items:flex-start;
}
/* Reconcile mode stays usable on mobile */
#page-transactions #txBody tr.tx-row-clickable.reconcile-checked{
box-shadow:0 0 0 2px rgba(22,101,52,.16);
}
}
/* Tiny phones */
@media (max-width: 420px){
.topbar{
padding:0 12px !important;
}
.page-header-bar{
padding:0 12px !important;
}
#page-transactions #txBody tr.tx-row-clickable{
grid-template-columns:44px minmax(0,1fr);
gap:4px 7px;
padding:8px 9px;
}
#page-transactions .tx-v2-amt{
font-size:.88rem;
}
}
/* FX bar centered */
.fx-bar,
#fxRatesBadge,
.fx-rates-badge {
display: flex !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
gap: 14px !important;
width: 100% !important;
}
.fx-bar .fx-item,
#fxRatesBadge .fx-item,
.fx-rates-badge .fx-item,
#fxRatesBadge span,
.fx-bar span {
text-align: center !important;
}
/* Lime accent border between topbar and title bar */
.topbar, .header, .app-header {
border-bottom: 3px solid #22c55e !important;
}
/* FX BAR FULL WIDTH FIX */
.fx-bar,
#fxRatesBadge,
.fx-rates-badge {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-1 * var(--content-padding, 16px)) !important;
margin-right: calc(-1 * var(--content-padding, 16px)) !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box;
}
.fx-bar > *,
#fxRatesBadge > * {
margin: 0 auto;
}
/* Topbar gradient restored */
.topbar,
.header,
.app-header {
background: linear-gradient(135deg, #163d35 0%, #2f7f63 48%, #b7db4a 100%) !important;
color: #F7FAF8;
}
/* Topbar buttons aligned to privacy button style */
.topbar .user-actions button,
.topbar button,
.app-header .user-actions button,
.header .user-actions button,
.topbar .btn,
.app-header .btn,
.header .btn,
.topbar .icon-btn,
.app-header .icon-btn,
.header .icon-btn {
background: rgba(255,255,255,0.14) !important;
border: 1px solid rgba(255,255,255,0.22) !important;
color: #F7FAF8 !important;
box-shadow: none !important;
}
.topbar .user-actions button:hover,
.topbar button:hover,
.app-header .user-actions button:hover,
.header .user-actions button:hover,
.topbar .btn:hover,
.app-header .btn:hover,
.header .btn:hover,
.topbar .icon-btn:hover,
.app-header .icon-btn:hover,
.header .icon-btn:hover {
background: rgba(255,255,255,0.22) !important;
border-color: rgba(255,255,255,0.30) !important;
}
/* Force topbar layout with actions on right */
.topbar,
.header,
.app-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
.topbar .user-actions,
.header .user-actions,
.app-header .user-actions {
margin-left: auto !important;
display: flex !important;
gap: 8px;
}
/* Align debts banner background exactly with investments banner */
.investments-banner,
.market-summary,
.total-market-value,
.debts-banner,
.debts-summary,
.active-debts-banner {
background: linear-gradient(135deg, #062e1f 0%, #0b3d2a 40%, #14532d 100%) !important;
color: #F7FAF8 !important;
}
/* === 2026-03-26 surgical header/fx final overrides === */
/* Keep only the background fill swapped: topbar gets former title solid, title bar gets former topbar gradient */
.topbar,
.header,
.app-header {
background: #166534 !important;
}
.page-header-bar,
.page-titlebar {
background: linear-gradient(135deg, #163d35 0%, #2f7f63 48%, #b7db4a 100%) !important;
}
/* FX bar must span the full content width, flush to both edges under the header area */
.fx-bar,
#fxRatesBadge,
.fx-rates-badge {
display: block !important;
width: calc(100% + 48px) !important;
max-width: none !important;
margin: 0 -24px 16px -24px !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.fx-bar-inner {
width: 100% !important;
max-width: none !important;
padding-left: 16px !important;
padding-right: 16px !important;
box-sizing: border-box !important;
}
@media (max-width: 768px) {
.fx-bar,
#fxRatesBadge,
.fx-rates-badge {
width: calc(100% + 32px) !important;
margin: 0 -16px 14px -16px !important;
}
.fx-bar-inner {
padding-left: 12px !important;
padding-right: 12px !important;
}
}
@media (max-width: 480px) {
.fx-bar,
#fxRatesBadge,
.fx-rates-badge {
width: calc(100% + 24px) !important;
margin: 0 -12px 14px -12px !important;
}
}
/* === Forecast report date refresh === */
.forecast-date-cell{
width:24px !important;
padding-right:2px !important;
vertical-align:top;
}
.forecast-date-card{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-height:48px;
padding:4px 2px 3px;
border-radius:12px;
background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(246,249,247,.96) 100%);
border:1px solid rgba(21,80,55,.12);
box-shadow:0 6px 16px rgba(5,34,20,.06);
}
.forecast-date-cell--today .forecast-date-card{
background:linear-gradient(180deg, rgba(228,248,237,.98) 0%, rgba(214,242,227,.96) 100%);
border-color:rgba(22,101,52,.24);
box-shadow:0 8px 18px rgba(22,101,52,.12);
}
.forecast-date-weekday{
font-size:.52rem !important;
line-height:1;
font-weight:800;
letter-spacing:.08em;
color:var(--muted);
margin-bottom:4px;
}
.forecast-date-daynum{
font-size:1.05rem !important;
line-height:.95;
font-weight:800;
color:var(--text);
font-variant-numeric:tabular-nums;
}
.forecast-date-monthyear{
margin-top:5px;
font-size:.63rem !important;
line-height:1;
font-weight:700;
letter-spacing:.08em;
color:var(--muted);
text-transform:uppercase;
white-space:nowrap;
}
.forecast-date-meta{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
margin-top:7px;
min-height:18px;
}
.forecast-date-flag,
.forecast-date-today{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:18px;
}
.forecast-date-flag{
min-width:18px;
font-size:.82rem !important;
}
.forecast-date-today{
padding:2px 8px;
border-radius:999px;
background:rgba(22,101,52,.10);
border:1px solid rgba(22,101,52,.12);
color:#166534;
font-size:.62rem !important;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
}
@media (max-width: 1023px){
.forecast-date-cell{ width: 24px !important; padding-right:2px !important; }
.forecast-date-card{ min-height:66px; border-radius:14px; padding:7px 5px 6px; }
.forecast-date-weekday{ font-size:.54rem !important; margin-bottom:5px; }
.forecast-date-daynum{ font-size:1.08rem !important; }
.forecast-date-monthyear{ font-size:.57rem !important; margin-top:4px; }
.forecast-date-meta{ gap:4px; margin-top:5px; }
.forecast-date-today{ padding:1px 6px; font-size:.55rem !important; }
}
/* === Forecast grouped dates refinement === */
.forecast-date-group-row td{
padding:10px 10px 6px !important;
background:transparent !important;
border:0 !important;
}
.forecast-date-group-pill{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:8px 12px;
border-radius:14px;
background:linear-gradient(180deg, rgba(243,244,246,.96) 0%, rgba(229,231,235,.92) 100%);
border:1px solid rgba(17,24,39,.08);
box-shadow:0 4px 12px rgba(15,23,42,.05);
}
.forecast-date-group-row--today .forecast-date-group-pill{
background:linear-gradient(180deg, rgba(220,252,231,.98) 0%, rgba(209,250,229,.94) 100%);
border-color:rgba(22,163,74,.18);
}
.forecast-date-group-main{
font-size:.72rem;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--text);
}
.forecast-date-card--compact{
min-height:58px;
padding:8px 6px;
}
.forecast-date-card--compact .forecast-date-daynum{
font-size:1.12rem !important;
}
.forecast-date-card--compact .forecast-date-monthyear{
margin-top:4px;
}
.forecast-date-meta{
min-height:16px;
}
.forecast-date-meta:empty{
display:none;
}
@media (max-width: 1023px){
.forecast-date-group-row td{ padding:8px 6px 4px !important; }
.forecast-date-group-pill{ padding:7px 10px; border-radius:12px; }
.forecast-date-group-main{ font-size:.66rem; }
.forecast-date-card--compact{ min-height:52px; }
}
/* === 2026-03-26 title bar revision: clean final state === */
.topbar,
.header,
.app-header {
background: linear-gradient(135deg, #0b2d23 0%, #123a2f 52%, #1b4b3d 100%) !important;
border-bottom: none !important;
box-shadow: 0 8px 24px rgba(5, 22, 18, 0.22) !important;
}
.page-header-bar,
.page-titlebar {
background: #eceff1 !important;
color: #111111 !important;
border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset !important;
}
.page-header-bar-title,
.page-title-main,
.page-title-sub,
.page-header-bar,
.page-titlebar {
color: #111111 !important;
}
.page-header-bar-icon {
background: rgba(15, 23, 42, 0.06) !important;
color: #111111 !important;
border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
.page-header-action,
.page-header-bar-right .page-header-action,
.page-titlebar .btn,
.page-titlebar button,
.page-header-bar-right button {
background: #ffffff !important;
color: #111111 !important;
border: 1px solid rgba(15, 23, 42, 0.10) !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}
.page-header-action:hover,
.page-titlebar .btn:hover,
.page-titlebar button:hover,
.page-header-bar-right button:hover {
background: #f8fafc !important;
border-color: rgba(15, 23, 42, 0.16) !important;
color: #111111 !important;
}
@media (max-width: 480px) {
.page-header-bar,
.page-titlebar {
background: #eceff1 !important;
}
}
/* === 2026-03-26 forecast compact elegance refresh === */
.forecast-account-section{ margin-bottom:16px !important; }
.forecast-account-header{ padding:10px 14px !important; }
.forecast-table-wrap{
border-top:none;
border-radius:0 0 18px 18px;
overflow:hidden;
background:var(--surface);
}
.forecast-grid-table thead th{
padding:7px 10px !important;
font-size:.7rem !important;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--muted);
background:color-mix(in srgb, var(--surface2) 78%, white);
}
.forecast-tx-row td{
padding:6px 10px !important;
vertical-align:middle;
border-bottom:1px solid color-mix(in srgb, var(--border) 85%, transparent);
}
.forecast-date-cell{
width:72px !important;
padding:6px 8px 6px 10px !important;
border-right:none !important;
}
.forecast-date-card{
min-height:48px !important;
padding:5px 4px !important;
border-radius:12px !important;
box-shadow:none !important;
background:linear-gradient(180deg, rgba(249,250,251,.98) 0%, rgba(243,244,246,.96) 100%) !important;
}
.forecast-date-cell--today .forecast-date-card{
background:linear-gradient(180deg, rgba(234,252,242,.98) 0%, rgba(220,252,231,.94) 100%) !important;
box-shadow:none !important;
}
.forecast-date-weekday{
font-size:.5rem !important;
margin-bottom:3px !important;
letter-spacing:.12em !important;
}
.forecast-date-daynum{
font-size:1rem !important;
line-height:.95 !important;
}
.forecast-date-monthyear{
margin-top:2px !important;
font-size:.52rem !important;
letter-spacing:.08em !important;
}
.forecast-desc-cell{ padding:6px 10px !important; }
.forecast-line{ line-height:1.16 !important; }
.forecast-title{
font-size:.83rem !important;
font-weight:600 !important;
}
.forecast-category{
font-size:.71rem !important;
margin-top:2px !important;
}
.forecast-payee{
font-size:.68rem !important;
margin-top:1px !important;
}
.forecast-amount-cell{
width:132px !important;
padding:6px 12px 6px 8px !important;
}
.forecast-amount-main{
font-size:.86rem !important;
font-weight:700 !important;
line-height:1.05 !important;
}
.forecast-amount-brl{
font-size:.65rem !important;
margin-top:2px !important;
}
.forecast-run-bal{
margin-top:3px !important;
padding-top:3px;
border-top:1px dashed color-mix(in srgb, var(--border) 75%, transparent);
font-size:.68rem !important;
font-weight:600;
}
.forecast-date-group-row td{
padding:8px 10px 4px !important;
}
.forecast-date-group-pill{
padding:7px 10px !important;
border-radius:12px !important;
box-shadow:none !important;
background:linear-gradient(180deg, rgba(248,250,252,.98) 0%, rgba(241,245,249,.94) 100%) !important;
}
.forecast-date-group-row--today .forecast-date-group-pill{
background:linear-gradient(180deg, rgba(236,253,245,.98) 0%, rgba(220,252,231,.94) 100%) !important;
}
.forecast-date-group-copy{
display:flex;
align-items:baseline;
gap:8px;
min-width:0;
}
.forecast-date-group-main{
font-size:.64rem !important;
letter-spacing:.14em !important;
}
.forecast-date-group-sub{
font-size:.76rem;
font-weight:700;
color:var(--text);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.forecast-date-today{
padding:2px 7px !important;
font-size:.56rem !important;
}
.forecast-grid-table tfoot td{
padding:8px 10px !important;
}
@media (max-width: 1023px){
.forecast-account-header{ padding:9px 12px !important; }
.forecast-tx-row td{ padding:5px 6px !important; }
.forecast-date-cell{
width:58px !important;
padding:5px 6px !important;
}
.forecast-date-card{
min-height:42px !important;
border-radius:10px !important;
padding:4px 3px !important;
}
.forecast-date-weekday{ font-size:.46rem !important; margin-bottom:2px !important; }
.forecast-date-daynum{ font-size:.9rem !important; }
.forecast-date-monthyear{ font-size:.48rem !important; }
.forecast-desc-cell{ padding:5px 8px !important; }
.forecast-title{ font-size:.78rem !important; }
.forecast-category{ font-size:.67rem !important; }
.forecast-payee{ font-size:.64rem !important; }
.forecast-amount-cell{
width:108px !important;
padding:5px 8px 5px 6px !important;
}
.forecast-amount-main{ font-size:.8rem !important; }
.forecast-amount-brl{ font-size:.61rem !important; }
.forecast-run-bal{ font-size:.63rem !important; }
.forecast-date-group-row td{ padding:7px 6px 3px !important; }
.forecast-date-group-pill{ padding:6px 8px !important; border-radius:10px !important; }
.forecast-date-group-copy{ gap:6px; }
.forecast-date-group-main{ font-size:.58rem !important; }
.forecast-date-group-sub{ font-size:.7rem; }
.forecast-date-today{ font-size:.52rem !important; }
}
/* Mobile transactions header + filters refinement: compact and symmetric */
@media (max-width: 640px){
#page-transactions .tx-page-header{
gap:8px;
margin-bottom:10px;
}
#page-transactions .tx-page-title-area{
display:flex;
width:100%;
flex-direction:row;
align-items:center;
justify-content:space-between;
gap:10px;
}
#page-transactions .tx-page-count{
font-size:1rem;
line-height:1.05;
letter-spacing:.05em;
flex:1 1 auto;
min-width:0;
}
#page-transactions .tx-page-totals{
display:flex;
gap:8px;
flex-wrap:nowrap;
justify-content:flex-end;
align-items:center;
margin-left:auto;
flex-shrink:0;
}
#page-transactions .tx-page-header > div:last-child{
display:grid !important;
grid-template-columns:1fr 1fr;
gap:8px !important;
width:100%;
}
#page-transactions .tx-page-header > div:last-child .btn{
width:100%;
min-width:0;
min-height:42px;
justify-content:center;
padding:0 12px;
border-radius:14px;
font-size:.84rem;
}
#page-transactions .tx-filter-bar{
display:flex;
flex-direction:column;
gap:8px;
margin-bottom:10px;
}
#page-transactions .tx-search-wrap{
width:100%;
max-width:none;
min-width:0;
min-height:42px;
border-radius:14px;
}
#page-transactions .tx-search-input{
font-size:.84rem;
}
#page-transactions .tx-filter-chips-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
overflow:visible;
width:100%;
padding-bottom:0;
align-items:stretch;
}
#page-transactions .tx-filter-chip-wrap,
#page-transactions .tx-view-btns{
width:100%;
min-width:0;
}
#page-transactions .tx-chip-select,
#page-transactions #btnEnterReconcile{
width:100%;
max-width:none;
min-width:0;
min-height:40px;
height:40px;
padding:0 34px 0 12px !important;
border-radius:12px;
font-size:.8rem;
line-height:1.1;
display:flex;
align-items:center;
justify-content:space-between;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#page-transactions #btnEnterReconcile{
justify-content:center;
gap:6px;
}
#page-transactions .tx-filter-chip-wrap select{
appearance:none;
-webkit-appearance:none;
background-position:right 12px center;
background-size:12px;
}
#page-transactions #txMemberFilterWrap[style*="display:none"]{
display:none !important;
}
#page-transactions .tx-view-btns{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin-left:0;
}
#page-transactions .tx-view-btn{
width:100%;
min-height:40px;
height:40px;
border-radius:12px;
}
/* More deliberate ordering for mobile scan */
#page-transactions .tx-filter-chip-wrap:nth-child(1){ order:1; } /* month */
#page-transactions .tx-filter-chip-wrap:nth-child(2){ order:2; } /* account */
#page-transactions .tx-filter-chip-wrap:nth-child(3){ order:3; } /* category */
#page-transactions .tx-filter-chip-wrap:nth-child(4){ order:4; } /* type */
#page-transactions .tx-filter-chip-wrap:nth-child(5){ order:5; } /* status */
#page-transactions .tx-filter-chip-wrap:nth-child(7){ order:6; } /* member */
#page-transactions .tx-filter-chip-wrap:nth-child(6){ order:7; } /* reconcile */
#page-transactions .tx-view-btns{ order:8; }
/* When member filter is hidden, keep last row visually balanced */
#page-transactions #txMemberFilterWrap[style*="display:none"] + .tx-view-btns,
#page-transactions .tx-view-btns:last-child{
align-self:stretch;
}
}
@media (max-width: 420px){
#page-transactions .tx-page-count{
font-size:.95rem;
}
#page-transactions .tx-page-header > div:last-child .btn,
#page-transactions .tx-chip-select,
#page-transactions #btnEnterReconcile,
#page-transactions .tx-view-btn,
#page-transactions .tx-search-wrap{
min-height:38px;
height:38px;
border-radius:12px;
}
#page-transactions .tx-filter-chips-row{
gap:7px;
}
}
/* === 2026-03-26 FX family badge + dashboard/debts header refinements === */
.fx-bar-inner {
justify-content: flex-start;
max-width: 1200px;
gap: 10px;
}
.fx-bar-family {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 10px;
border-radius: 999px;
background: rgba(22, 101, 52, 0.08);
border: 1px solid rgba(22, 101, 52, 0.16);
color: var(--text);
font-size: .68rem;
font-weight: 700;
white-space: nowrap;
flex-shrink: 0;
margin-right: auto;
min-width: 0;
}
.fx-bar-family-icon { color: var(--accent); flex-shrink: 0; }
.fx-bar-family-text { overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.fx-bar-label,
.fx-bar-refresh,
.fx-bar-age {
flex-shrink: 0;
}
.fx-bar-rates {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 0 1 auto;
min-width: 0;
}
.fx-bar-age { margin-left: 0; }
#page-dashboard #dashFamilyName,
#page-dashboard #dashFamilyNameText {
display: none !important;
}
#page-debts .page-header-bar-right {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
@media (max-width: 768px) {
.fx-bar-inner {
padding-left: 12px !important;
padding-right: 12px !important;
gap: 8px;
}
.fx-bar-family {
max-width: 42vw;
padding: 2px 8px;
font-size: .64rem;
}
.fx-bar-family-text {
max-width: 28vw;
}
.fx-bar-rates {
max-width: 46vw;
}
#page-debts .page-header-bar-right {
width: 100%;
justify-content: flex-start;
margin-top: 8px;
}
}
/* === Mobile transactions card refinement: date left, beneficiary | category, more space between day groups === */
@media (max-width: 720px){
#page-transactions #txBody tr.tx-date-header-row{
display:block !important;
margin:18px 0 10px !important;
}
#page-transactions #txBody tr.tx-date-header-row:first-child{
margin-top:6px !important;
}
#page-transactions #txBody tr.tx-date-header-row .tx-date-header-cell{
padding-left:4px !important;
}
#page-transactions #txBody tr.tx-row-clickable{
display:grid !important;
grid-template-columns:minmax(42px,10%) minmax(0,60%) minmax(72px,20%);
grid-template-areas:"date body right";
gap:10px;
align-items:center;
margin:0;
padding:12px 14px;
border-radius:16px;
}
#page-transactions #txBody td.tx-v2-date{
grid-area:date;
width:minmax(42px,10%) !important;
min-width:42px;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
text-align:left;
align-self:stretch;
padding:0 0 0 2px !important;
}
#page-transactions #txBody td.tx-v2-date .tx-date-day{
width:100%;
font-size:1rem;
font-weight:800;
line-height:0.95;
text-align:left;
}
#page-transactions #txBody td.tx-v2-date .tx-date-mon{
width:100%;
margin-top:2px;
font-size:.62rem;
font-weight:800;
letter-spacing:.08em;
text-align:left;
}
#page-transactions #txBody td.tx-v2-body{
grid-area:body;
min-width:0;
display:flex;
flex-direction:column;
justify-content:center;
gap:4px;
padding-right:4px !important;
}
#page-transactions #txBody td.tx-v2-right{
grid-area:right;
align-self:center;
width:20%;
min-width:72px;
padding-left:2px !important;
}
#page-transactions .tx-v2-title{
display:block;
margin:0;
font-size:.86rem;
line-height:1.12;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:100%;
}
#page-transactions .tx-v2-category,
#page-transactions .tx-v2-meta{
display:none !important;
}
#page-transactions .tx-v2-mobile-meta{
display:block;
min-width:0;
color:var(--muted);
font-size:.74rem;
line-height:1.08;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#page-transactions .tx-v2-account-line{
display:block;
min-width:0;
margin-top:1px;
}
#page-transactions .tx-v2-account-line .tx-v2-acct-pill{
display:inline-flex;
align-items:center;
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
padding:4px 10px;
font-size:.73rem;
line-height:1;
}
#page-transactions .tx-v2-amt-wrap{
align-items:flex-end;
}
#page-transactions .tx-v2-amt{
font-size:.96rem;
line-height:1;
white-space:nowrap;
}
#page-transactions .tx-v2-brl,
#page-transactions .tx-v2-bal{
white-space:nowrap;
}
}
/* === 2026-03-26 FINAL MOBILE TX WIDTH REBALANCE === */
@media (max-width: 720px){
#page-transactions #txBody tr.tx-row-clickable{
grid-template-columns: minmax(38px, 10%) minmax(0, 60%) minmax(82px, 20%) !important;
gap: 10px !important;
align-items: center !important;
}
#page-transactions #txBody td.tx-v2-date{
width: auto !important;
min-width: 38px !important;
max-width: 10% !important;
padding-left: 0 !important;
padding-right: 0 !important;
align-items: flex-start !important;
justify-content: center !important;
text-align: left !important;
}
#page-transactions #txBody td.tx-v2-body{
width: auto !important;
min-width: 0 !important;
max-width: none !important;
padding-right: 6px !important;
overflow: hidden !important;
}
#page-transactions #txBody td.tx-v2-right{
width: auto !important;
min-width: 82px !important;
max-width: 20% !important;
padding-right: 0 !important;
white-space: nowrap !important;
}
#page-transactions .tx-v2-title{
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
white-space: normal !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: none !important;
line-height: 1.12 !important;
}
#page-transactions .tx-v2-mobile-meta{
display: block !important;
max-width: none !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
#page-transactions .tx-v2-account-line{
display: block !important;
max-width: none !important;
min-width: 0 !important;
}
#page-transactions .tx-v2-account-line .tx-v2-acct-pill{
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
#page-transactions .tx-v2-amt-wrap{
width: 100% !important;
align-items: flex-end !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
MOBILE UX IMPROVEMENTS — 2026
Transações · Programadas · Dívidas · Beneficiários · Preços
Afeta apenas max-width: 768px e max-width: 480px
═══════════════════════════════════════════════════════════════════════════ */
/* ──────────────────────────────────────────────────────────────────────────
TRANSAÇÕES — Mobile refinements
────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Header: title + count numa linha, badges embaixo */
.tx-page-header {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 14px;
}
.tx-page-title-area {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.tx-page-count {
font-size: .98rem;
font-weight: 700;
letter-spacing: .04em;
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tx-page-totals {
display: flex;
gap: 6px;
flex-shrink: 0;
align-items: center;
}
.tx-page-totals .badge {
font-size: .7rem;
padding: 4px 9px;
border-radius: 20px;
}
/* Botões Nova / Clipboard: grid 2 colunas, altura confortável */
#page-transactions .tx-page-header > div:last-child {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 8px;
width: 100%;
}
#page-transactions .tx-page-header > div:last-child .btn {
justify-content: center;
min-height: 44px;
border-radius: 14px;
font-size: .86rem;
font-weight: 600;
letter-spacing: .01em;
width: 100%;
}
/* Filtros: coluna única fluida */
#page-transactions .tx-filter-bar {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
#page-transactions .tx-search-wrap {
width: 100%;
min-height: 44px;
border-radius: 14px;
}
#page-transactions .tx-filter-chips-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
overflow: visible;
}
#page-transactions .tx-chip-select,
#page-transactions #btnEnterReconcile {
min-height: 40px;
height: 40px;
border-radius: 12px;
font-size: .8rem;
width: 100%;
}
#page-transactions .tx-view-btns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-left: 0;
width: 100%;
}
#page-transactions .tx-view-btn {
min-height: 40px;
height: 40px;
border-radius: 12px;
justify-content: center;
width: 100%;
}
}
/* ──────────────────────────────────────────────────────────────────────────
PROGRAMADAS — Mobile: seção header mais compacta e espaçamento melhorado
────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
#page-scheduled .section-header {
margin-bottom: 12px;
}
#page-scheduled .section-header > div {
flex-direction: column;
align-items: stretch;
gap: 9px;
width: 100%;
}
#page-scheduled .sc-view-toggle {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width: 100%;
border-radius: 13px;
padding: 4px;
gap: 3px;
background: var(--bg2);
border: 1px solid var(--border);
}
#page-scheduled .sc-view-btn {
justify-content: center;
padding: 10px 6px;
border-radius: 10px;
font-size: .78rem;
font-weight: 500;
min-height: 38px;
display: flex;
align-items: center;
gap: 5px;
}
#page-scheduled .sc-view-lbl {
display: inline !important;
font-size: .74rem;
}
#page-scheduled .sc-view-btn.active {
background: var(--surface);
color: var(--accent);
font-weight: 700;
box-shadow: var(--shadow-sm);
}
#page-scheduled .section-header .btn-primary {
width: 100%;
min-height: 46px;
font-size: .95rem;
font-weight: 700;
border-radius: 14px;
justify-content: center;
letter-spacing: .01em;
}
/* Filter bar compacto */
#page-scheduled .sc-filter-bar {
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
#page-scheduled .sc-filter-bar .search-wrap {
width: 100%;
min-height: 42px;
border-radius: 13px;
}
#page-scheduled .sc-filter-chips {
display: flex;
gap: 7px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 2px;
}
#page-scheduled .sc-filter-chips::-webkit-scrollbar { display: none; }
#page-scheduled .sc-chip {
flex-shrink: 0;
min-height: 36px;
padding: 7px 14px;
border-radius: 100px;
font-size: .78rem;
}
#page-scheduled .sc-type-select {
width: 100%;
min-height: 42px;
border-radius: 13px;
font-size: .88rem;
-webkit-appearance: none;
appearance: none;
}
/* Summary chips bar: scroll horizontal */
#page-scheduled .sc-summary-bar {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 7px;
flex-wrap: nowrap;
padding-bottom: 2px;
margin-bottom: 12px;
}
#page-scheduled .sc-summary-bar::-webkit-scrollbar { display: none; }
/* Cards programados: toque mais fácil */
#page-scheduled .sc-card {
border-radius: 14px;
margin-bottom: 8px;
}
#page-scheduled .sc-card:active { transform: scale(.988); }
#page-scheduled .sc-card-header {
padding: 12px 14px;
gap: 10px;
flex-wrap: nowrap;
}
#page-scheduled .sc-card-type {
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 11px;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
}
#page-scheduled .sc-card-info {
flex: 1;
min-width: 0;
}
#page-scheduled .sc-card-title {
font-size: .88rem;
font-weight: 700;
}
#page-scheduled .sc-card-sub {
font-size: .73rem;
gap: 5px;
flex-wrap: wrap;
}
#page-scheduled .sc-card-amount {
font-size: 1rem;
font-weight: 700;
white-space: nowrap;
flex-shrink: 0;
}
/* Upcoming card: compacto */
#scheduledUpcomingCard .card-header {
padding: 10px 14px;
}
#scheduledUpcomingCard .sc-upcoming-list {
padding: 0;
}
}
/* ──────────────────────────────────────────────────────────────────────────
DÍVIDAS — Mobile: botões no page-header-bar empilhados verticalmente
e título não encoberto
────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Header bar: permite crescimento vertical */
#page-debts .page-header-bar {
flex-wrap: wrap;
min-height: 46px;
height: auto;
padding: 8px 12px;
align-items: center;
gap: 8px;
}
/* Lado esquerdo: título + ícone */
#page-debts .page-header-bar-left {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
}
#page-debts .page-header-bar-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: .97rem;
}
/* Lado direito: botões em grid 2 colunas, abaixo do título */
#page-debts .page-header-bar-right {
flex: 0 0 100%;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
order: 3; /* empurra para baixo do título */
}
#page-debts .page-header-action {
justify-content: center;
min-height: 34px;
border-radius: 10px;
font-size: .75rem;
font-weight: 600;
padding: 6px 8px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Hero: compacto */
.dbt-hero {
border-radius: 14px;
padding: 16px 16px 14px;
margin-bottom: 14px;
}
.dbt-hero-value {
font-size: 1.65rem;
}
.dbt-hero-kpis {
gap: 10px;
margin-top: 10px;
flex-wrap: nowrap;
}
.dbt-hero-kpi-val {
font-size: 1.1rem;
font-weight: 800;
}
.dbt-hero-kpi-lbl {
font-size: .62rem;
}
}
@media (max-width: 480px) {
#page-debts .page-header-bar {
padding: 8px 10px;
}
#page-debts .page-header-action {
font-size: .72rem;
min-height: 32px;
padding: 5px 6px;
gap: 3px;
}
#page-debts .page-header-action svg {
width: 9px;
height: 9px;
flex-shrink: 0;
}
.dbt-hero-value { font-size: 1.45rem; }
}
/* ──────────────────────────────────────────────────────────────────────────
BENEFICIÁRIOS — Mobile: layout ultra-compacto, swipe-friendly
────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Summary chips: scroll horizontal */
#payeeSummaryBar {
display: flex !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 7px;
flex-wrap: nowrap;
padding-bottom: 3px;
margin-bottom: 12px;
}
#payeeSummaryBar::-webkit-scrollbar { display: none; }
.payee-summary-chip {
flex-shrink: 0;
padding: 6px 12px;
border-radius: 100px;
font-size: .76rem;
gap: 5px;
min-height: 32px;
display: flex;
align-items: center;
}
/* Grupo wrapper */
.payee-group-wrap {
border-radius: 14px;
margin-bottom: 8px;
overflow: hidden;
}
.payee-group-header {
padding: 10px 13px;
gap: 8px;
min-height: 46px;
}
.payee-group-icon {
width: 30px;
height: 30px;
border-radius: 8px;
font-size: .88rem;
flex-shrink: 0;
}
.payee-group-title {
font-size: .85rem;
font-weight: 600;
}
.payee-group-arrow {
font-size: .7rem;
margin-left: auto;
flex-shrink: 0;
}
/* Tabela → lista de cards compactos */
#page-payees .payee-group-body .table-wrap {
overflow: visible;
margin: 0;
}
#page-payees table { display: block; }
#page-payees thead { display: none; }
#page-payees tbody {
display: flex;
flex-direction: column;
gap: 0;
}
/* Cada row → item de lista horizontal compacto */
#page-payees .payee-row {
display: flex !important;
flex-direction: row;
align-items: center;
gap: 10px;
padding: 10px 13px;
border-bottom: 1px solid var(--border);
cursor: pointer;
width: 100%;
box-sizing: border-box;
transition: background .1s;
-webkit-tap-highlight-color: transparent;
}
#page-payees .payee-row:last-child { border-bottom: none; }
#page-payees .payee-row:active { background: var(--surface2); }
/* Todos os TD: flow para o flex pai */
#page-payees .payee-row td { display: contents; }
/* Avatar: ancora esquerda, compacto */
#page-payees .payee-row-avatar {
width: 34px;
height: 34px;
border-radius: 10px;
font-size: .75rem;
font-weight: 800;
flex-shrink: 0;
}
/* Nome + meta: espaço restante */
#page-payees .payee-row td:first-child > div {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
#page-payees .payee-row td:first-child > div > div:first-child {
font-size: .86rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
#page-payees .payee-row td:first-child > div > div:nth-child(2) {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.payee-contact-chip {
font-size: .68rem !important;
padding: 2px 6px !important;
border-radius: 8px !important;
}
/* Categoria padrão: oculta (espaço demais) */
#page-payees .payee-row td:nth-child(2) { display: none; }
/* Contagem de transações: badge compacto à direita */
#page-payees .payee-row td:nth-child(3) {
display: flex;
align-items: center;
flex-shrink: 0;
margin-left: auto;
}
#page-payees .payee-row td:nth-child(3) .badge {
font-size: .68rem;
padding: 3px 7px;
border-radius: 20px;
white-space: nowrap;
}
/* Ações: ícones side-by-side, touch-friendly */
#page-payees .payee-row td:last-child {
display: flex;
flex-direction: row;
gap: 4px;
flex-shrink: 0;
}
#page-payees .payee-row td:last-child > div {
display: flex;
flex-direction: row;
gap: 4px;
}
#page-payees .payee-row .btn-icon {
width: 32px;
height: 32px;
border-radius: 9px;
border: 1px solid var(--border);
background: var(--surface2);
display: flex;
align-items: center;
justify-content: center;
font-size: .85rem;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
padding: 0;
flex-shrink: 0;
}
#page-payees .payee-row .btn-icon:active { background: var(--bg2); }
}
@media (max-width: 480px) {
#page-payees .payee-row { padding: 9px 11px; gap: 8px; }
#page-payees .payee-row-avatar { width: 30px; height: 30px; font-size: .7rem; }
#page-payees .payee-row td:first-child > div > div:first-child { font-size: .82rem; }
#page-payees .payee-row td:nth-child(3) .badge { display: none; }
}
/* ──────────────────────────────────────────────────────────────────────────
PREÇOS — Sistema de subcategorias hierárquicas
Estilos para filtro em cascata + badge de hierarquia
────────────────────────────────────────────────────────────────────────── */
/* Breadcrumb de hierarquia no card */
.px-cat-breadcrumb {
display: flex;
align-items: center;
gap: 3px;
font-size: .62rem;
color: var(--muted);
font-weight: 500;
flex-wrap: wrap;
line-height: 1.2;
}
.px-cat-breadcrumb span { white-space: nowrap; }
.px-cat-breadcrumb .sep {
opacity: .5;
font-size: .6rem;
}
.px-cat-tag {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 7px;
border-radius: 8px;
font-size: .63rem;
font-weight: 700;
letter-spacing: .03em;
background: var(--accent-lt);
color: var(--accent);
white-space: nowrap;
flex-shrink: 0;
}
/* Filtro em cascata mobile */
.px-filter-row {
display: flex;
gap: 7px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 10px;
}
.px-subcat-select {
flex: 1;
min-width: 130px;
font-size: .85rem;
}
.px-type-select {
flex: 1;
min-width: 120px;
font-size: .85rem;
}
/* Badge de subcategoria no modal */
.px-hier-section {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px 14px;
margin-top: 4px;
}
.px-hier-section-title {
font-size: .68rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--accent);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
}
.px-hier-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.px-hier-row:last-child { margin-bottom: 0; }
.px-hier-row label {
font-size: .7rem;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .05em;
min-width: 90px;
flex-shrink: 0;
}
.px-hier-row select,
.px-hier-row input {
flex: 1;
min-width: 0;
font-size: .85rem;
}
.px-new-subcat-btn {
background: var(--bg2);
border: 1px dashed var(--border2);
color: var(--accent);
border-radius: 8px;
padding: 4px 10px;
font-size: .75rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: all .15s;
}
.px-new-subcat-btn:hover {
background: var(--accent-lt);
border-color: var(--accent);
}
/* Agrupamento por subcategoria */
.px-subcat-group {
margin-bottom: 18px;
}
.px-subcat-group-header {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0 8px;
border-bottom: 1.5px solid var(--border);
margin-bottom: 10px;
}
.px-subcat-group-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
}
.px-subcat-group-label {
font-size: .78rem;
font-weight: 700;
color: var(--text2);
flex: 1;
}
.px-subcat-group-meta {
font-size: .68rem;
color: var(--muted);
font-weight: 500;
}
.px-type-badge {
display: inline-flex;
align-items: center;
padding: 2px 7px;
border-radius: 8px;
font-size: .63rem;
font-weight: 700;
background: var(--blue-lt);
color: var(--blue);
margin-left: 4px;
}
@media (max-width: 768px) {
.px-filter-row {
flex-direction: column;
gap: 8px;
}
.px-subcat-select,
.px-type-select {
width: 100%;
min-width: 0;
min-height: 40px;
border-radius: 12px;
font-size: .85rem;
}
.px-hier-section {
padding: 10px 12px;
}
.px-hier-row {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.px-hier-row label { min-width: unset; }
.px-hier-row select,
.px-hier-row input { width: 100%; }
}
/* ──────────────────────────────────────────────────────────────────────────
PREÇOS — Mobile page header + filtros compactos
────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
#page-prices .section-header {
flex-direction: column;
align-items: stretch;
gap: 9px;
margin-bottom: 14px;
}
#page-prices .section-header > div {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
width: 100%;
}
#page-prices .section-header .btn {
justify-content: center;
min-height: 40px;
font-size: .8rem;
border-radius: 12px;
}
#page-prices .section-header > button:first-child {
display: none; /* Oculta "Estab × Benef" no mobile, liberando espaço */
}
/* Filtros em coluna */
#page-prices .px-filter-row,
#page-prices > div[style*="display:flex"][style*="gap:8px"] {
display: flex !important;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
#page-prices #pricesSearch {
width: 100%;
min-width: 0;
min-height: 42px;
border-radius: 13px;
font-size: .88rem;
}
#page-prices #pricesCatFilter,
#page-prices #pricesStoreFilter,
#page-prices #pxSubcatFilter,
#page-prices #pxTypeFilter {
width: 100%;
min-width: 0;
min-height: 42px;
border-radius: 13px;
font-size: .88rem;
-webkit-appearance: none;
appearance: none;
}
/* Group-by toggle: full width */
#page-prices [style*="border-radius:8px;overflow:hidden"] {
width: 100% !important;
display: grid !important;
grid-template-columns: 1fr 1fr 1fr;
border-radius: 12px !important;
overflow: hidden !important;
}
.px-group-btn {
width: 100%;
justify-content: center;
min-height: 38px;
font-size: .8rem;
font-weight: 600;
}
/* Hero strip: 2 colunas no mobile */
.px-hero-strip {
grid-template-columns: 1fr 1fr !important;
gap: 8px;
}
/* Cards: 1 coluna, sem hover transform */
.px-grid {
grid-template-columns: 1fr !important;
gap: 9px;
}
.px-card {
border-radius: 14px;
padding: 12px 13px 10px;
}
.px-card:active { transform: scale(.985); }
.px-card:hover { transform: none; }
/* Subcategory group header: compacto */
.px-subcat-group-header {
padding: 4px 0 6px;
}
}
@media (max-width: 480px) {
.px-hero-strip { grid-template-columns: 1fr 1fr !important; gap: 7px; }
.px-hero-kpi { padding: 9px 10px; }
.px-hero-kpi-val { font-size: .9rem; }
.px-card { padding: 11px 12px 9px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
SCHEDULED MODAL — collapsible automation + notifications
═══════════════════════════════════════════════════════════════════════════ */
.sc-section-card{
border:1px solid var(--border);
border-radius:var(--r);
background:var(--surface);
overflow:hidden;
box-shadow:var(--shadow-sm);
}
.sc-section-toggle{
width:100%;
border:none;
background:linear-gradient(180deg,var(--surface),var(--surface2));
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:14px 16px;
text-align:left;
cursor:pointer;
font-family:var(--font-sans);
}
.sc-section-kicker{
font-size:.68rem;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--accent);
margin-bottom:4px;
}
.sc-section-title{
font-size:.95rem;
font-weight:700;
color:var(--text);
}
.sc-section-subtitle{
font-size:.76rem;
color:var(--muted);
margin-top:3px;
line-height:1.45;
}
.sc-section-meta{
display:flex;
align-items:center;
gap:10px;
flex-shrink:0;
}
.sc-section-chip{
display:inline-flex;
align-items:center;
padding:4px 10px;
border-radius:999px;
background:var(--accent-lt);
color:var(--accent);
font-size:.72rem;
font-weight:700;
white-space:nowrap;
}
.sc-section-arrow{
color:var(--muted);
transition:transform .2s ease;
}
.sc-section-card[data-collapsed="true"] .sc-section-arrow{ transform:rotate(-90deg); }
.sc-section-body{
padding:14px 16px 16px;
border-top:1px solid var(--border);
}
.sc-section-card[data-collapsed="true"] .sc-section-body{ display:none; }
.sc-section-grid{
display:grid;
grid-template-columns:1fr;
gap:12px;
}
.sc-automation-panel{
display:grid;
gap:12px;
}
.sc-channel-card{
border:1px solid var(--border);
border-radius:var(--r-sm);
background:var(--surface2);
padding:12px;
}
.sc-channel-header{
display:flex;
align-items:flex-start;
gap:10px;
}
.sc-channel-title{
font-size:.88rem;
font-weight:700;
color:var(--text);
}
.sc-channel-subtitle{
font-size:.74rem;
color:var(--muted);
margin-top:2px;
line-height:1.45;
}
.sc-channel-details{
margin-top:10px;
}
.sc-details-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.sc-inline-note{
font-size:.7rem;
color:var(--muted);
margin-top:4px;
line-height:1.4;
}
.sc-stack{
display:grid;
gap:8px;
margin-top:10px;
}
@media (max-width: 768px){
.sc-section-toggle{ padding:13px 14px; }
.sc-section-body{ padding:12px 14px 14px; }
.sc-details-grid{ grid-template-columns:1fr; }
}
#myProfileWhatsappTestBtn,#myProfileTelegramTestBtn{ white-space:nowrap; }
/* ── Form Mode (tabs / wizard) shared styles ──────────────────────────── */
.tx-ctx-tab{
padding:9px 14px;
font-size:.82rem;
font-weight:500;
border:none;
background:transparent;
color:var(--muted);
cursor:pointer;
border-bottom:2px solid transparent;
margin-bottom:-1px;
font-family:var(--font-sans);
transition:color .15s,border-color .15s;
white-space:nowrap;
}
.tx-ctx-tab:hover{ color:var(--text2); }
.tx-ctx-tab.active{
color:var(--accent);
border-bottom-color:var(--accent);
}
.tx-ctx-pane{ animation:fadeInPane .18s ease; }
@keyframes fadeInPane{ from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
/* Amount hero */
.tx-amount-hero{
background:var(--surface2);
border:1px solid var(--border);
border-radius:var(--r);
padding:14px 16px;
}
.tx-amount-row{ display:flex;align-items:center;gap:8px; }
.tx-currency-sel{
flex-shrink:0;
padding:6px 8px;
border-radius:var(--r-sm);
background:var(--surface2);
border:1px solid var(--border);
font-size:.8rem;
font-weight:700;
color:var(--accent);
cursor:pointer;
max-width:80px;
}
/* Required / optional labels */
.req-star{ color:#e24b4a;font-size:.75rem; }
.opt-label{
font-size:.7rem;
color:var(--muted);
font-weight:400;
background:var(--bg2);
border:1px solid var(--border);
border-radius:10px;
padding:0 6px;
vertical-align:middle;
margin-left:3px;
}
/* Wizard steps bar */
.wz-steps{
display:flex;
gap:0;
border-radius:var(--r-sm);
overflow:hidden;
border:1px solid var(--border);
margin-bottom:4px;
}
.wz-step{
flex:1;
text-align:center;
padding:8px 4px;
font-size:.75rem;
font-weight:500;
color:var(--muted);
background:var(--surface2);
cursor:pointer;
border-right:1px solid var(--border);
transition:background .15s,color .15s;
}
.wz-step:last-child{ border-right:none; }
.wz-step.active{
background:var(--accent);
color:#fff;
}
.wz-step.done{
background:var(--accent-lt,#e8f2ee);
color:var(--accent);
}
@media(max-width:480px){
.wz-step{ font-size:.68rem;padding:7px 2px; }
}
/* Context tab bar horizontal scroll on small screens */
#txContextTabBar,#scContextTabBar{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
#txContextTabBar::-webkit-scrollbar,
#scContextTabBar::-webkit-scrollbar{ display:none; }
/* ══ Login — Opção A: Emerald Depth ══════════════════════════════════════ */
/* Base background */
/* ══ Login — Opção 2: Névoa Difusa ═══════════════════════════════════════ */
.login-bg-2 {
background: linear-gradient(160deg, #0d3d28 0%, #1d6b47 50%, #0e3520 100%) !important;
}
/* Névoa branca espalhada — três elipses sobrepostos */
.lgn-haze {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 18% 15%, rgba(255,255,255,.13) 0%, transparent 55%),
radial-gradient(ellipse 65% 55% at 82% 88%, rgba(255,255,255,.10) 0%, transparent 52%),
radial-gradient(ellipse 45% 35% at 58% 42%, rgba(255,255,255,.07) 0%, transparent 50%),
radial-gradient(ellipse 55% 40% at 30% 80%, rgba(255,255,255,.06) 0%, transparent 48%);
filter: blur(4px);
pointer-events: none;
}
/* Linha diagonal 1 — mais larga, mais opaca */
.lgn-line1 {
position: absolute;
width: 200%;
height: 70px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,255,255,.06) 25%,
rgba(255,255,255,.11) 50%,
rgba(255,255,255,.06) 75%,
transparent 100%
);
top: 28%;
left: -50%;
transform: rotate(-12deg);
filter: blur(6px);
pointer-events: none;
}
/* Linha diagonal 2 — mais estreita, sutil */
.lgn-line2 {
position: absolute;
width: 200%;
height: 40px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,255,255,.04) 30%,
rgba(255,255,255,.08) 55%,
rgba(255,255,255,.04) 80%,
transparent 100%
);
top: 54%;
left: -50%;
transform: rotate(-12deg);
filter: blur(4px);
pointer-events: none;
}
/* Linha diagonal 3 — tênue, parte superior */
.lgn-line3 {
position: absolute;
width: 200%;
height: 25px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,255,255,.03) 35%,
rgba(255,255,255,.06) 60%,
rgba(255,255,255,.03) 85%,
transparent 100%
);
top: 14%;
left: -50%;
transform: rotate(-12deg);
filter: blur(3px);
pointer-events: none;
}
/* Card — mesma sombra dramática da versão anterior */
.login-card-a {
background: #ffffff;
border-radius: 22px;
padding: 38px 34px;
box-shadow:
0 2px 0 rgba(255,255,255,.08) inset,
0 32px 80px rgba(0,0,0,.45),
0 8px 32px rgba(0,0,0,.28),
0 0 0 1px rgba(255,255,255,.06);
position: relative;
z-index: 2;
animation: loginCardIn .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes loginCardIn {
from { opacity: 0; transform: translateY(24px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Inputs — foco verde */
.login-card-a input[type="email"]:focus,
.login-card-a input[type="password"]:focus,
.login-card-a input[type="text"]:focus {
border-color: #2a6049 !important;
outline: none;
box-shadow: 0 0 0 3px rgba(42,96,73,.1);
}
/* Tagline */
.login-card-a [data-i18n="auth.tagline"],
.login-card-a .login-tagline {
color: #9ca3af;
font-size: .72rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
}
/* Mobile — login redesign */
@media (max-width: 480px) {
#loginScreen {
padding: 12px !important;
align-items: flex-start !important;
padding-top: max(env(safe-area-inset-top, 0px), 16px) !important;
overflow-y: auto !important;
}
.login-card-a {
padding: 24px 18px 28px;
border-radius: 18px;
width: 100%;
max-width: 100% !important;
margin-top: 8px;
box-shadow:
0 2px 0 rgba(255,255,255,.06) inset,
0 16px 48px rgba(0,0,0,.4),
0 0 0 1px rgba(255,255,255,.05);
}
#loginLogoImg {
width: 320px !important;
}
#loginScreen .form-group { margin-bottom: 14px !important; }
.login-card-a input[type="email"],
.login-card-a input[type="password"],
.login-card-a input[type="text"],
.login-card-a .login-input {
font-size: 1rem !important;
padding: 13px 14px !important;
border-radius: 12px !important;
}
#loginBtn, #magicLinkBtn, #forgotPwdBtn, #recoveryPwdBtn {
padding: 15px !important;
font-size: 1rem !important;
border-radius: 12px !important;
min-height: 52px;
}
.lgn-line1, .lgn-line2, .lgn-line3 { opacity: .7; }
}
@media (max-width: 360px) {
.login-card-a { padding: 18px 12px 22px; }
#loginLogoImg { width: 240px !important; }
}
/* ══ TX List — Timeline enhancements (Opção A) ═══════════════════════════ */
/* Date separator: pill + trailing line + daily total */
.tx-date-header-cell { position: relative; }
.tx-date-label {
display: inline-block;
font-size: .7rem;
font-weight: 700;
letter-spacing: .05em;
white-space: nowrap;
color: var(--accent);
}
tr.tx-date-band-alt td.tx-date-header-cell .tx-date-label { color: var(--text2); }
.tx-date-day-total {
display: inline-block;
font-size: .68rem;
font-weight: 600;
padding: 1px 7px;
border-radius: 20px;
margin-left: 6px;
vertical-align: middle;
}
.tx-date-day-total.pos { background: var(--green-lt); color: var(--green); }
.tx-date-day-total.neg { background: #fee2e2; color: #dc2626; }
/* Category bubble in tx title */
.tx-v2-cat-bubble {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 5px;
font-size: .72rem;
flex-shrink: 0;
line-height: 1;
}
.tx-v2-cat-bubble-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
align-self: center;
}
.tx-v2-title { display: flex; align-items: center; }
.tx-v2-desc-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ══ TX Group view — card design (Opção A) ═══════════════════════════════ */
.tx-group-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
overflow: hidden;
margin-bottom: 14px;
box-shadow: var(--shadow-sm);
}
.tx-group-card__header {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
background: var(--surface2);
cursor: pointer;
user-select: none;
transition: background .15s;
position: relative;
}
.tx-group-card__header:hover { background: var(--bg2); }
.tx-group-card__accent {
width: 3px;
height: 30px;
border-radius: 3px;
flex-shrink: 0;
}
.tx-group-card__icon {
width: 30px;
height: 30px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: .9rem;
flex-shrink: 0;
}
.tx-group-card__info {
flex: 1;
min-width: 0;
}
.tx-group-card__name {
font-weight: 600;
font-size: .9rem;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tx-group-card__count {
font-size: .7rem;
color: var(--muted);
}
.tx-group-card__totals {
display: flex;
gap: 5px;
align-items: center;
flex-wrap: wrap;
}
.tx-group-card__arrow {
color: var(--muted);
transition: transform .2s;
flex-shrink: 0;
}
.tx-group-card--collapsed .tx-group-card__arrow { transform: rotate(-90deg); }
.tx-grp-badge {
font-size: .72rem;
font-weight: 600;
padding: 2px 8px;
border-radius: 20px;
white-space: nowrap;
}
.tx-grp-badge-in { background: var(--green-lt); color: var(--green); }
.tx-grp-badge-out { background: #fee2e2; color: #dc2626; }
.tx-grp-badge-bal-pos { background: var(--surface); border: 1px solid var(--border); color: var(--text2); font-weight: 700; }
.tx-grp-badge-bal-neg { background: #fee2e2; border: 1px solid #fca5a5; color: #dc2626; font-weight: 700; }
.tx-group-card__body { display: block; }
/* Mobile: smaller group card header */
@media (max-width: 640px) {
.tx-group-card__totals { display: none; }
.tx-group-card__header::after {
content: attr(data-balance);
font-size: .8rem;
font-weight: 700;
color: var(--text2);
margin-left: auto;
}
}
/* ══ TX Entry Mode toggle ════════════════════════════════════════════════ */
.tx-entry-mode-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 100px;
font-size: .78rem;
font-weight: 500;
border: 1.5px solid var(--border);
background: transparent;
color: var(--muted);
cursor: pointer;
font-family: var(--font-sans);
transition: all .15s;
}
.tx-entry-mode-btn:hover { border-color: var(--border2); color: var(--text2); }
.tx-entry-mode-btn--active {
background: var(--accent-lt, #e8f2ee);
border-color: var(--accent);
color: var(--accent);
font-weight: 600;
}
/* AI entry pane */
.tx-ai-textarea {
width: 100%;
border: 1.5px solid var(--border);
border-radius: var(--r-sm);
padding: 10px 12px;
font-size: .875rem;
font-family: var(--font-sans);
color: var(--text);
background: var(--surface);
resize: vertical;
min-height: 72px;
outline: none;
transition: border-color .15s;
line-height: 1.5;
}
.tx-ai-textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(42,96,73,.08);
}
.tx-ai-input-wrap { position: relative; }
.tx-ai-hint {
font-size: .7rem;
color: var(--muted);
margin-top: 4px;
}
.tx-ai-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.tx-ai-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 20px;
font-size: .78rem;
background: var(--accent-lt, #e8f2ee);
color: var(--accent);
font-weight: 500;
border: 1px solid rgba(42,96,73,.2);
}
.tx-ai-error {
margin-top: 8px;
padding: 8px 12px;
background: #fef2f2;
border: 1px solid #fca5a5;
border-radius: var(--r-sm);
font-size: .8rem;
color: #dc2626;
}
.tx-ai-confirm-msg {
font-size: .82rem;
font-weight: 600;
color: var(--accent);
padding: 8px 12px;
background: var(--accent-lt, #e8f2ee);
border-radius: var(--r-sm);
border: 1px solid rgba(42,96,73,.2);
}
/* ══ Profile modal — Cover + Tabs ════════════════════════════════════════ */
.prof-modal { max-width: 460px; padding: 0 !important; }
.prof-modal__cover {
background: linear-gradient(145deg, #0d2f1e 0%, #1a5c3e 60%, #0f3828 100%);
padding: 32px 24px 20px;
position: relative;
min-height: 130px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.prof-modal__close {
position: absolute;
top: 12px;
right: 12px;
background: rgba(255,255,255,.15) !important;
color: rgba(255,255,255,.9) !important;
border: none !important;
}
.prof-modal__close:hover { background: rgba(255,255,255,.25) !important; }
.prof-modal__avatar-wrap {
position: relative;
margin-bottom: 12px;
}
.prof-modal__avatar {
width: 72px;
height: 72px;
border-radius: 50%;
border: 3px solid rgba(255,255,255,.4);
background: rgba(255,255,255,.15);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: opacity .15s;
overflow: hidden;
}
.prof-modal__avatar:hover { opacity: .85; }
.prof-modal__avatar-edit {
position: absolute;
bottom: 0;
right: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: 2px solid rgba(255,255,255,.3);
color: #fff;
}
.prof-modal__identity { flex: 1; }
.prof-modal__name {
font-size: 1.1rem;
font-weight: 700;
color: #fff;
margin-bottom: 2px;
}
.prof-modal__email {
font-size: .78rem;
color: rgba(255,255,255,.65);
margin-bottom: 6px;
}
.prof-modal__role { }
.prof-modal__avatar-remove {
margin-top: 6px;
font-size: .72rem;
background: none;
border: 1px solid rgba(255,255,255,.25);
color: rgba(255,255,255,.7);
border-radius: 20px;
padding: 3px 10px;
cursor: pointer;
}
/* Context tabs */
.prof-modal__tabs {
display: flex;
border-bottom: 1px solid var(--border);
padding: 0 16px;
background: var(--surface);
overflow-x: auto;
scrollbar-width: none;
}
.prof-modal__tabs::-webkit-scrollbar { display: none; }
.prof-ctx-tab {
padding: 10px 14px;
font-size: .82rem;
font-weight: 500;
border: none;
background: transparent;
color: var(--muted);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
font-family: var(--font-sans);
transition: color .15s, border-color .15s;
white-space: nowrap;
}
.prof-ctx-tab:hover { color: var(--text2); }
.prof-ctx-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.prof-modal__body { padding: 18px 20px 20px; }
.prof-section-label {
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--text2);
margin-bottom: 10px;
}
/* Profile field display */
.prof-field-group { display: flex; flex-direction: column; gap: 12px; }
.prof-field { }
.prof-field__label {
font-size: .75rem;
font-weight: 600;
color: var(--text2);
margin-bottom: 3px;
display: block;
}
.prof-field__value {
font-size: .9rem;
color: var(--text);
padding: 8px 12px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
}
.prof-field__value--muted { color: var(--muted); font-size: .85rem; }
/* Tab pane fade in */
.prof-tab-pane { animation: fadeInPane .15s ease; }
/* ══ Scheduled page — new layout (Mobile C + Desktop A) ═══════════════════ */
/* ── Page header ── */
.sc-page-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.sc-page-header__left { display: flex; align-items: center; gap: 8px; }
.sc-page-header__right { margin-left: auto; flex-shrink: 0; }
/* ── Desktop KPI strip ── */
.sc-kpi-strip {
display: flex;
align-items: center;
gap: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 6px 14px;
flex-shrink: 0;
}
.sc-kpi-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 12px;
}
.sc-kpi-val {
font-family: var(--font-serif);
font-size: .88rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
line-height: 1.1;
}
.sc-kpi-val.sc-kpi-expense { color: var(--red, #dc2626); }
.sc-kpi-val.sc-kpi-income { color: var(--green, #16a34a); }
.sc-kpi-val.sc-kpi-pending { color: var(--amber, #d97706); }
.sc-kpi-val.sc-kpi-ok { color: var(--muted); }
.sc-kpi-lbl {
font-size: .62rem;
font-weight: 500;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .05em;
white-space: nowrap;
margin-top: 1px;
}
.sc-kpi-sep {
width: 1px;
height: 28px;
background: var(--border);
flex-shrink: 0;
}
/* ── Mobile KPI bar (3 tiles, shown only on small screens) ── */
.sc-mobile-kpis {
display: none;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.sc-mkpi {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 8px 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.sc-mkpi-val {
font-family: var(--font-serif);
font-size: .85rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.sc-mkpi-val.pos { color: var(--green, #16a34a); }
.sc-mkpi-val.neg { color: var(--red, #dc2626); }
.sc-mkpi-val.amber { color: var(--amber, #d97706); }
.sc-mkpi-lbl {
font-size: .6rem;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
text-align: center;
}
/* ── Split layout container ── */
.sc-list-view {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
align-items: start;
}
/* ── Panel shared ── */
.sc-panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.sc-panel__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
padding: 12px 14px 10px;
background: var(--surface2);
border-bottom: 1px solid var(--border);
}
.sc-panel__title {
display: flex;
align-items: center;
gap: 6px;
font-size: .82rem;
font-weight: 700;
color: var(--text2);
text-transform: uppercase;
letter-spacing: .06em;
white-space: nowrap;
}
.sc-panel__title svg { color: var(--accent); flex-shrink: 0; }
.sc-panel__badge {
font-size: .72rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 20px;
background: var(--amber-lt, #fef3c7);
color: var(--amber, #d97706);
white-space: nowrap;
}
.sc-panel__count {
font-size: .7rem;
color: var(--muted);
white-space: nowrap;
}
.sc-panel__body {
overflow-y: auto;
max-height: calc(100vh - 220px);
min-height: 160px;
}
.sc-panel__filters {
flex: 1;
min-width: 0;
}
.sc-panel__search-wrap {
display: flex;
align-items: center;
gap: 6px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 100px;
padding: 5px 12px;
transition: border-color .15s;
}
.sc-panel__search-wrap:focus-within { border-color: var(--accent); }
.sc-panel__search-wrap svg { color: var(--muted); flex-shrink: 0; }
.sc-panel__search-input {
border: none !important;
outline: none !important;
background: transparent !important;
font-size: .82rem;
color: var(--text);
width: 100%;
padding: 0 !important;
}
/* Recurrents panel: header has filters, so slightly more padding */
.sc-panel--recurrents .sc-panel__header {
flex-direction: column;
gap: 8px;
align-items: stretch;
}
.sc-panel--recurrents .sc-panel__header > div:first-child {
display: flex;
align-items: center;
justify-content: space-between;
}
/* Mobile recurrents divider label */
.sc-mobile-recurrents-label {
display: none;
align-items: center;
gap: 6px;
padding: 16px 0 8px;
font-size: .72rem;
font-weight: 700;
color: var(--text2);
text-transform: uppercase;
letter-spacing: .07em;
}
.sc-mobile-recurrents-label svg { color: var(--accent); }
/* ── Mobile: single-column timeline layout ── */
@media (max-width: 800px) {
/* Hide desktop KPI strip, show mobile tiles */
.sc-kpi-strip { display: none !important; }
.sc-mobile-kpis { display: grid; }
/* Stack panels vertically */
.sc-list-view {
grid-template-columns: 1fr;
gap: 0;
}
/* Remove panel card chrome on mobile — EXCEPT scUpcomingPanel which has green styling */
.sc-panel:not(#scUpcomingPanel) {
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
overflow: visible;
}
.sc-panel:not(#scUpcomingPanel) .sc-panel__header {
background: transparent;
border-bottom: none;
padding: 0 0 8px;
}
.sc-panel__title {
font-size: .7rem;
color: var(--muted);
}
.sc-panel__body {
max-height: none;
overflow: visible;
}
/* Recurrents panel: move filters inline */
.sc-panel--recurrents .sc-panel__header {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
/* Show mobile recurrents label (between upcoming and recurring) */
.sc-mobile-recurrents-label { display: flex; }
/* Recurrents panel title hidden (label above serves as separator) */
.sc-panel--recurrents .sc-panel__header { display: none; }
}
/* ── Mobile C: upcoming items get timeline treatment on small screens ── */
@media (max-width: 800px) {
/* Each sup-group becomes a timeline date block */
.sup-group {
border: none;
border-radius: 0;
background: transparent;
margin-bottom: 0;
overflow: visible;
}
.sup-group-hdr {
background: transparent;
padding: 10px 0 5px;
border-bottom: none;
}
.sup-group-left { gap: 8px; }
.sup-rows {
border-top: none;
padding-left: 0;
display: flex;
flex-direction: column;
gap: 6px;
padding-bottom: 8px;
}
/* Each item becomes a card */
.sup-item {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 10px 12px;
box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.sup-item--today {
border-left: 3px solid var(--accent);
}
/* Day pill: inline with date number + month */
.sup-day-pill {
min-width: 34px;
padding: 3px 7px;
}
.sup-day-num { font-size: .85rem; }
/* Register button: full width on mobile */
.sup-register-btn {
height: 26px;
padding: 0 12px;
font-size: .78rem;
}
/* sc-card on mobile: compact */
.sc-card { border-radius: 10px; }
.sc-card-row { padding: 9px 12px; }
}
/* Profile modal — editable name input */
.prof-field__input {
width: 100%;
padding: 9px 12px;
border: 1.5px solid var(--border);
border-radius: var(--r-sm);
font-size: .9rem;
font-family: var(--font-sans);
color: var(--text);
background: var(--surface);
outline: none;
transition: border-color .15s;
box-sizing: border-box;
}
.prof-field__input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(42,96,73,.08);
}
/* Sidebar: ensure all direct children stack above orbs */
.sb-user-card,
.sidebar-footer,
.sidebar-logo { position: relative; z-index: 1; }
/* === 2026-03-27 HOTFIX: flat/date-list reconciliation on mobile === */
@media (max-width: 720px){
body.reconcile-mode #page-transactions #txFlatCard #txBody tr.tx-date-header-row,
#page-transactions.reconcile-mode #txFlatCard #txBody tr.tx-date-header-row{
display:block !important;
margin:16px 0 8px !important;
padding:0 !important;
border:none !important;
box-shadow:none !important;
background:transparent !important;
}
body.reconcile-mode #page-transactions #txFlatCard #txBody tr.tx-row-clickable:not(.tx-date-header-row),
#page-transactions.reconcile-mode #txFlatCard #txBody tr.tx-row-clickable:not(.tx-date-header-row){
display:grid !important;
grid-template-columns: 28px 42px minmax(0,1fr) minmax(82px,auto) !important;
grid-template-areas: "chk date body right" !important;
gap: 8px !important;
align-items: center !important;
margin: 0 0 8px 0 !important;
padding: 10px 12px !important;
border:1px solid var(--border) !important;
border-radius:14px !important;
background:var(--surface) !important;
box-shadow:0 1px 3px rgba(0,0,0,.05) !important;
}
body.reconcile-mode #page-transactions #txFlatCard #txBody tr.tx-row-clickable td,
#page-transactions.reconcile-mode #txFlatCard #txBody tr.tx-row-clickable td{
padding:0 !important;
border:none !important;
min-width:0 !important;
width:auto !important;
}
body.reconcile-mode #page-transactions #txFlatCard #txBody td.tx-v2-chk,
#page-transactions.reconcile-mode #txFlatCard #txBody td.tx-v2-chk{
display:flex !important;
grid-area:chk !important;
align-items:center !important;
justify-content:center !important;
width:28px !important;
min-width:28px !important;
}
body.reconcile-mode #page-transactions #txFlatCard #txBody td.tx-v2-date,
#page-transactions.reconcile-mode #txFlatCard #txBody td.tx-v2-date{
grid-area:date !important;
width:auto !important;
min-width:42px !important;
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
justify-content:center !important;
text-align:left !important;
}
body.reconcile-mode #page-transactions #txFlatCard #txBody td.tx-v2-body,
#page-transactions.reconcile-mode #txFlatCard #txBody td.tx-v2-body{
grid-area:body !important;
min-width:0 !important;
width:auto !important;
max-width:100% !important;
overflow:hidden !important;
}
body.reconcile-mode #page-transactions #txFlatCard #txBody td.tx-v2-right,
#page-transactions.reconcile-mode #txFlatCard #txBody td.tx-v2-right{
grid-area:right !important;
min-width:82px !important;
width:auto !important;
justify-self:end !important;
text-align:right !important;
white-space:nowrap !important;
}
body.reconcile-mode #page-transactions #txFlatCard #txBody .tx-v2-title,
#page-transactions.reconcile-mode #txFlatCard #txBody .tx-v2-title{
display:-webkit-box !important;
-webkit-box-orient:vertical !important;
-webkit-line-clamp:2 !important;
line-clamp:2 !important;
white-space:normal !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
align-items:flex-start !important;
gap:4px !important;
}
body.reconcile-mode #page-transactions #txFlatCard #txBody .tx-v2-meta,
body.reconcile-mode #page-transactions #txFlatCard #txBody .tx-v2-account-line,
#page-transactions.reconcile-mode #txFlatCard #txBody .tx-v2-meta,
#page-transactions.reconcile-mode #txFlatCard #txBody .tx-v2-account-line{
margin-top:3px !important;
white-space:normal !important;
overflow:hidden !important;
}
}
/* Group view (txGroupContainer) reconcile — compact checkbox in table */
.reconcile-mode #txGroupContainer td.tx-v2-chk {
width: 32px !important;
padding: 4px 6px !important;
display: table-cell !important;
}
.reconcile-mode #txGroupContainer td.tx-v2-chk { display: table-cell !important; }
#txGroupContainer td.tx-v2-chk { display: table-cell !important; }
/* ══ Login — Opção 1 background ══════════════════════════════════════════ */
.login-bg-opt1 {
background: linear-gradient(160deg, #0d3d28 0%, #1d6b47 60%, #0e3520 100%) !important;
position: fixed !important;
}
.login-bg-opt1::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 400px; height: 400px;
background: rgba(255,255,255,.04);
border-radius: 50%;
pointer-events: none;
}
/* ══ AI Insights — Investments / Debts / Prices sections ═══════════════ */
.air-invest-section,
.air-debts-section,
.air-prices-section {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 16px 18px;
margin-bottom: 14px;
}
.air-invest-hero,
.air-debts-hero {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin: 10px 0 12px;
}
.air-invest-kpi {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 100px;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 8px 12px;
}
.air-invest-kpi-lbl {
font-size: .65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--muted);
}
.air-invest-kpi-val {
font-family: var(--font-serif);
font-size: .98rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--text);
}
.air-invest-summary {
font-size: .85rem;
color: var(--text2);
line-height: 1.55;
margin: 6px 0;
}
.air-invest-note {
font-size: .8rem;
color: var(--text2);
background: var(--bg2);
border-left: 3px solid var(--accent);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
padding: 6px 10px;
margin: 6px 0;
}
.air-invest-highlights {
display: flex;
flex-direction: column;
gap: 6px;
margin: 8px 0;
}
.air-invest-highlight {
display: flex;
align-items: baseline;
gap: 8px;
font-size: .82rem;
}
.air-invest-ticker {
font-weight: 700;
color: var(--accent);
flex-shrink: 0;
background: var(--accent-lt);
border-radius: 4px;
padding: 1px 6px;
font-size: .75rem;
}
.air-invest-recs,
.air-debts-priority {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.air-invest-rec {
display: flex;
align-items: baseline;
gap: 8px;
font-size: .82rem;
}
.air-invest-rat {
color: var(--muted);
font-size: .78rem;
}
.air-debts-priority-lbl {
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
margin-bottom: 4px;
}
.air-debt-prio-item {
display: flex;
align-items: baseline;
gap: 10px;
font-size: .82rem;
}
.air-debt-prio-num {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-size: .68rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.air-price-items {
display: flex;
flex-direction: column;
gap: 6px;
margin: 8px 0;
}
.air-price-item {
display: flex;
gap: 10px;
font-size: .82rem;
align-items: baseline;
}
.air-price-name {
font-weight: 600;
color: var(--text);
flex-shrink: 0;
min-width: 100px;
}
.air-price-tip { color: var(--text2); }
/* ══ Investments — Performance Charts ═══════════════════════════════════ */
.inv-charts-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 18px;
}
@media (max-width: 768px) {
.inv-charts-section { grid-template-columns: 1fr; }
}
.inv-chart-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 14px 16px 16px;
box-shadow: var(--shadow-sm);
}
.inv-chart-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
gap: 8px;
}
.inv-chart-title {
font-size: .82rem;
font-weight: 700;
color: var(--text2);
}
.inv-chart-sub {
font-size: .72rem;
color: var(--muted);
}
.inv-chart-wrap {
position: relative;
}
.inv-chart-wrap canvas {
width: 100% !important;
}
/* ══ Audit — Notification badges ════════════════════════════════════════ */
.audit-notif-badge {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: .65rem;
font-weight: 600;
padding: 2px 7px;
border-radius: 20px;
white-space: nowrap;
}
.audit-notif-none { background: var(--bg2); color: var(--muted); border: 1px solid var(--border); }
.audit-notif-email { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.audit-notif-wa-ok { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.audit-notif-wa-err { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.audit-notif-tg-ok { background: #f0f9ff; color: #0284c7; border: 1px solid #bae6fd; }
.audit-notif-tg-err { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.aud-card-notif {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 5px 0 2px;
}
/* ══ Profile — Tx notification row ══════════════════════════════════════ */
.prof-notif-toggle-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.prof-notif-channel-row {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: .85rem;
color: var(--text);
padding: 6px 0;
}
.prof-notif-channel-row input[type="checkbox"] {
width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent);
}
.prof-notif-channel-icon { font-size: 1rem; flex-shrink: 0; }
.prof-notif-channel-label { font-weight: 600; }
/* ══ Help — Financial literacy intro card ═══════════════════════════════ */
.help-literacy-card {
display: flex;
gap: 14px;
background: color-mix(in srgb, var(--lc, var(--accent)) 8%, var(--surface));
border: 1.5px solid color-mix(in srgb, var(--lc, var(--accent)) 22%, transparent);
border-radius: var(--r);
padding: 14px 16px;
margin-bottom: 18px;
}
@supports not (color: color-mix(in srgb, red, blue)) {
.help-literacy-card { background: var(--accent-lt, #e8f2ee); border-color: rgba(42,96,73,.22); }
}
.help-literacy-icon {
font-size: 1.6rem;
flex-shrink: 0;
line-height: 1;
margin-top: 2px;
}
.help-literacy-body { flex: 1; min-width: 0; }
.help-literacy-title {
font-size: .78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--lc, var(--accent));
margin-bottom: 6px;
}
.help-literacy-text {
font-size: .84rem;
color: var(--text2);
line-height: 1.6;
}
.help-literacy-text strong { color: var(--text); }
.help-literacy-text em { font-style: italic; color: var(--text2); }
/* ══ Payees — Maps search results ════════════════════════════════════════ */
#payeeMapsResults > div:last-child { border-bottom: none; }
/* ═══════════════════════════════════════════════════════════════════════
AI INSIGHTS 2 — Redesign moderno
═══════════════════════════════════════════════════════════════════════ */
/* ── Tab bar: pill style ────────────────────────────────────────────────── */
.ai2-tabbar {
display: flex;
gap: 6px;
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 10px 16px 0;
position: sticky;
top: 0;
z-index: 10;
}
.ai2-tab {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px 10px;
background: none;
border: none;
border-bottom: 2.5px solid transparent;
font-size: .82rem;
font-weight: 600;
color: var(--muted);
cursor: pointer;
transition: color .15s, border-color .15s;
margin-bottom: -1px;
white-space: nowrap;
border-radius: 8px 8px 0 0;
}
.ai2-tab svg { opacity: .65; transition: opacity .15s; }
.ai2-tab.active {
color: var(--accent);
border-bottom-color: var(--accent);
background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.ai2-tab.active svg { opacity: 1; }
.ai2-tab:hover:not(.active) {
color: var(--text2);
background: var(--surface2);
}
/* ── Filter panel ───────────────────────────────────────────────────────── */
.ai2-filter-panel {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 12px 16px 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.ai2-params-toggle {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 12px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 8px;
font-size: .78rem;
font-weight: 600;
color: var(--text2);
cursor: pointer;
transition: background .12s, color .12s;
align-self: flex-start;
}
.ai2-params-toggle:hover { background: var(--border); color: var(--text); }
.ai2-params-body {
display: flex;
flex-direction: column;
gap: 10px;
animation: airFadeUp .2s ease both;
}
.ai2-filter-row {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
align-items: end;
}
.ai2-filter-group {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.ai2-filter-label {
font-size: .65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--muted);
}
.ai2-date-range {
display: flex;
align-items: center;
gap: 4px;
}
.ai2-date-input {
flex: 1;
min-width: 0;
font-size: .8rem;
padding: 7px 9px;
border-radius: 8px;
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text);
transition: border-color .15s;
}
.ai2-date-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}
.ai2-date-sep { font-size: .72rem; color: var(--muted); flex-shrink: 0; }
.ai2-select {
width: 100%;
font-size: .8rem;
padding: 7px 9px;
border-radius: 8px;
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text);
transition: border-color .15s;
}
.ai2-select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}
.ai2-context-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (max-width: 600px) { .ai2-context-row { grid-template-columns: 1fr; } }
.ai2-context-field { display: flex; flex-direction: column; gap: 4px; }
.ai2-context-input {
width: 100%;
font-size: .82rem;
padding: 8px 10px;
border-radius: 8px;
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text);
resize: none;
box-sizing: border-box;
font-family: inherit;
transition: border-color .15s;
}
.ai2-context-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}
/* ── Action bar ─────────────────────────────────────────────────────────── */
.ai2-action-bar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding-top: 4px;
}
.ai2-btn-analyze {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 24px;
background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 80%, #1d4ed8) 100%);
color: #fff;
border: none;
border-radius: 10px;
font-size: .88rem;
font-weight: 700;
cursor: pointer;
transition: opacity .15s, transform .1s, box-shadow .15s;
letter-spacing: .01em;
box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 40%, transparent);
}
.ai2-btn-analyze:hover {
opacity: .92;
transform: translateY(-1px);
box-shadow: 0 5px 18px color-mix(in srgb, var(--accent) 50%, transparent);
}
.ai2-btn-analyze:active { transform: translateY(0); }
.ai2-btn-analyze svg { flex-shrink: 0; }
.ai2-action-secondary {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.ai2-btn-icon {
display: flex;
align-items: center;
gap: 5px;
padding: 8px 12px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 9px;
font-size: .78rem;
font-weight: 600;
color: var(--text2);
cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
white-space: nowrap;
}
.ai2-btn-icon:hover {
background: color-mix(in srgb, var(--accent) 10%, var(--surface2));
border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
color: var(--accent);
}
/* ── Result area ────────────────────────────────────────────────────────── */
.ai2-result-wrap {
padding: 16px 16px 100px;
}
/* ═══════════════════════════════════════════════════════════════════════
PAYEES 2 — Layout moderno
═══════════════════════════════════════════════════════════════════════ */
/* Page header */
.py2-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 0 12px;
flex-wrap: wrap;
}
.py2-header-left { display: flex; align-items: center; gap: 12px; }
.py2-title-wrap { display: flex; align-items: center; gap: 10px; }
.py2-title-icon { font-size: 1.5rem; }
.py2-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--text);
line-height: 1.2;
}
.py2-subtitle { font-size: .72rem; color: var(--muted); margin-top: 1px; }
.py2-header-right { display: flex; align-items: center; gap: 6px; }
/* Filter bar */
.py2-filter-bar {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.py2-search-wrap {
display: flex;
align-items: center;
gap: 8px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 7px 12px;
flex: 1;
min-width: 160px;
transition: border-color .15s;
}
.py2-search-wrap:focus-within { border-color: var(--accent); }
.py2-search-icon { color: var(--muted); flex-shrink: 0; }
.py2-search-input {
flex: 1;
background: none;
border: none;
outline: none;
font-size: .85rem;
color: var(--text);
min-width: 0;
}
.py2-type-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.py2-type-pill {
padding: 6px 12px;
border-radius: 20px;
background: var(--surface2);
border: 1px solid var(--border);
font-size: .78rem;
font-weight: 600;
color: var(--text2);
cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
white-space: nowrap;
}
.py2-type-pill:hover { background: var(--border); color: var(--text); }
.py2-type-pill.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
/* Row cells */
.py2-name-cell {
display: flex;
align-items: center;
gap: 10px;
}
.py2-avatar {
width: 36px; height: 36px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: .78rem; font-weight: 800;
flex-shrink: 0;
}
.py2-name-body { min-width: 0; }
.py2-name { font-weight: 600; font-size: .875rem; color: var(--text); }
.py2-chips {
display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px;
}
.py2-notes { font-size: .7rem; color: var(--muted); margin-top: 2px; }
.py2-cat-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: var(--accent-lt, #e8f2ee);
color: var(--accent);
border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
border-radius: 20px;
font-size: .72rem;
font-weight: 600;
}
.py2-cat-none { font-size: .8rem; color: var(--muted); }
.py2-action-btn {
display: flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
border-radius: 8px;
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text2);
cursor: pointer;
transition: background .12s, color .12s;
}
.py2-action-btn:hover { background: var(--border); color: var(--text); }
.py2-action-del:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
/* ── Payees: zebra stripe alternado ────────────────────────────────────── */
.payee-row:nth-child(even),
tr.payee-row:nth-child(even) {
background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}
.payee-row:nth-child(odd),
tr.payee-row:nth-child(odd) {
background: var(--surface);
}
tr.payee-row:nth-child(even):hover,
tr.payee-row:nth-child(odd):hover {
background: color-mix(in srgb, var(--accent) 9%, var(--surface2));
transition: background .12s;
}
/* Cursor pointer nas linhas clicáveis (com histórico) */
tr.payee-row[onclick] { cursor: pointer; }
/* Payees mobile layout fix: keep avatar and name on same row */
@media (max-width: 640px) {
#page-payees .py2-name-cell {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 10px !important;
width: 100%;
min-width: 0;
}
#page-payees .py2-avatar {
width: 34px;
height: 34px;
border-radius: 10px;
flex: 0 0 34px;
display: inline-flex;
align-items: center;
justify-content: center;
align-self: center;
}
#page-payees .py2-name-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
#page-payees .py2-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
}
@media (max-width: 480px) {
#page-payees .py2-name-cell {
gap: 8px !important;
}
#page-payees .py2-avatar {
width: 30px;
height: 30px;
flex-basis: 30px;
font-size: .7rem;
}
}
/* === 2026-03-28 patch: scheduled mobile overflow + desktop date-group alignment === */
@media (max-width: 640px) {
#page-scheduled,
#page-scheduled .page-body,
#page-scheduled .section,
#page-scheduled .card,
#page-scheduled #scheduledList,
#page-scheduled #scheduledUpcomingCard,
#page-scheduled #scheduledUpcomingList {
max-width: 100%;
overflow-x: clip;
}
#page-scheduled .section-header,
#page-scheduled .section-header > div,
#page-scheduled .sc-filter-bar,
#page-scheduled .sc-card-row,
#page-scheduled .sc-card-mid,
#page-scheduled .sc-card-end,
#page-scheduled .sup-group,
#page-scheduled .sup-group-hdr,
#page-scheduled .sup-item,
#page-scheduled .sup-body,
#page-scheduled .sup-right,
#page-scheduled .sc-upcoming-item,
#page-scheduled .sc-upcoming-left,
#page-scheduled .sc-upcoming-right {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
/* NEUTRALIZED — use flex block below */
#page-scheduled .sc-card-row {
display: flex !important;
/* grid removed */
align-items: center;
gap: 8px;
}
#page-scheduled .sc-card-mid,
#page-scheduled .sup-body,
#page-scheduled .sc-upcoming-left {
overflow: hidden;
}
#page-scheduled .sc-card-meta,
#page-scheduled .sup-desc,
#page-scheduled .sup-acct,
#page-scheduled .sc-upcoming-desc,
#page-scheduled .sc-upcoming-acct {
overflow: hidden;
text-overflow: ellipsis;
}
#page-scheduled .sc-card-end,
#page-scheduled .sup-right,
#page-scheduled .sc-upcoming-right {
justify-self: end;
align-items: flex-end;
}
#page-scheduled .sup-item,
#page-scheduled .sc-upcoming-item {
display: flex !important;
/* grid removed */
align-items: center;
gap: 10px;
}
#page-scheduled .sup-actions,
#page-scheduled .sc-card-actions,
#page-scheduled .sc-icon-btns,
#page-scheduled .sc-filter-chips,
#page-scheduled .sc-summary-bar {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (min-width: 801px) {
#page-transactions:not(.reconcile-mode) #txMainTable {
table-layout: fixed !important;
}
#page-transactions:not(.reconcile-mode) #txMainTable thead th.tx-v2-th-date,
#page-transactions:not(.reconcile-mode) #txMainTable tbody td.tx-v2-date {
width: 84px !important;
min-width: 84px !important;
text-align: center;
}
#page-transactions:not(.reconcile-mode) #txMainTable thead th.tx-v2-th-right,
#page-transactions:not(.reconcile-mode) #txMainTable tbody td.tx-v2-right {
width: 164px !important;
min-width: 164px !important;
}
#page-transactions:not(.reconcile-mode) #txMainTable tbody td.tx-v2-body {
width: auto !important;
min-width: 0 !important;
}
#page-transactions:not(.reconcile-mode) #txMainTable tbody tr.tx-date-header-row td {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* === 2026-03-28 v2 patch: scheduled mobile — containment + correct grid layouts === */
@media (max-width: 640px) {
/* Containment: all page elements respect viewport width */
#page-scheduled,
#page-scheduled .page-body,
#page-scheduled .section,
#page-scheduled .card,
#page-scheduled #scheduledList,
#page-scheduled #scheduledUpcomingCard,
#page-scheduled #scheduledUpcomingList,
#page-scheduled .sc-card,
#page-scheduled .sc-card-row,
#page-scheduled .sup-group,
#page-scheduled .sup-group-hdr,
#page-scheduled .sup-item {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
#page-scheduled,
#page-scheduled .page-body,
#page-scheduled .section,
#page-scheduled .card,
#page-scheduled #scheduledList,
#page-scheduled #scheduledUpcomingCard,
#page-scheduled #scheduledUpcomingList {
overflow-x: hidden !important;
}
#page-scheduled *,
#page-scheduled *::before,
#page-scheduled *::after {
box-sizing: border-box !important;
min-width: 0;
}
/* sc-card-row: FLEX — ícone | corpo cresce | valor+badges CONTIDO | chevron */
#page-scheduled .sc-card-row {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 12px !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
#page-scheduled .sc-card-icon {
flex: 0 0 38px !important;
width: 38px !important;
min-width: 38px !important;
}
#page-scheduled .sc-card-mid {
flex: 1 1 auto !important;
min-width: 0 !important;
overflow: hidden !important;
}
#page-scheduled .sc-card-end {
flex: 0 0 auto !important;
max-width: 38% !important;
min-width: 0 !important;
align-items: flex-end !important;
overflow: hidden !important;
}
#page-scheduled .sc-card-amt {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
display: block !important;
}
#page-scheduled .sc-card-chevron { flex-shrink: 0 !important; }
/* sup-item: flex row — ícone | corpo | valor+botões */
#page-scheduled .sup-item {
display: flex !important;
align-items: center !important;
gap: 11px !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
#page-scheduled .sup-icon { flex: 0 0 auto !important; flex-shrink: 0 !important; }
#page-scheduled .sup-body { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; }
#page-scheduled .sup-right {
flex: 0 0 auto !important;
max-width: 44% !important;
min-width: 0 !important;
align-items: flex-end !important;
overflow: hidden !important;
}
#page-scheduled .sup-amt {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
}
#page-scheduled .sc-summary-bar,
#page-scheduled .sc-filter-chips {
padding-right: 2px !important;
}
}
@media (min-width: 801px) {
#page-transactions.reconcile-mode #txFlatCard,
#page-transactions.reconcile-mode #txFlatCard .table-wrap,
#page-transactions.reconcile-mode #txMainTable {
width: 100% !important;
max-width: 100% !important;
}
#page-transactions.reconcile-mode #txMainTable {
table-layout: fixed !important;
border-collapse: collapse !important;
}
#page-transactions.reconcile-mode #txMainTable tbody tr {
display: table-row !important;
}
#page-transactions.reconcile-mode #txMainTable tbody td {
display: table-cell !important;
vertical-align: top !important;
box-sizing: border-box !important;
}
#page-transactions.reconcile-mode #txMainTable thead th.tx-v2-chk,
#page-transactions.reconcile-mode #txMainTable tbody td.tx-v2-chk {
width: 42px !important;
min-width: 42px !important;
max-width: 42px !important;
text-align: center !important;
padding-left: 6px !important;
padding-right: 6px !important;
}
#page-transactions.reconcile-mode #txMainTable thead th.tx-v2-th-date,
#page-transactions.reconcile-mode #txMainTable tbody td.tx-v2-date {
width: 84px !important;
min-width: 84px !important;
max-width: 84px !important;
text-align: center !important;
}
#page-transactions.reconcile-mode #txMainTable thead th.tx-v2-th-right,
#page-transactions.reconcile-mode #txMainTable tbody td.tx-v2-right {
width: 164px !important;
min-width: 164px !important;
max-width: 164px !important;
white-space: nowrap !important;
text-align: right !important;
}
#page-transactions.reconcile-mode #txMainTable thead th.tx-v2-th-act,
#page-transactions.reconcile-mode #txMainTable tbody td.tx-v2-act {
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
padding: 0 !important;
border: 0 !important;
display: none !important;
}
#page-transactions.reconcile-mode #txMainTable thead th.tx-v2-th-body,
#page-transactions.reconcile-mode #txMainTable tbody td.tx-v2-body {
width: auto !important;
min-width: 0 !important;
overflow: hidden !important;
}
#page-transactions.reconcile-mode #txMainTable .tx-v2-title,
#page-transactions.reconcile-mode #txMainTable .tx-v2-category,
#page-transactions.reconcile-mode #txMainTable .tx-v2-meta {
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Date-group header: indent to align with description col in reconcile mode
chk=42px + date=84px + body-padding=10px = 136px */
#page-transactions.reconcile-mode #txMainTable tbody tr.tx-date-header-row td {
padding-left: calc(42px + 84px + 10px) !important;
padding-right: 12px !important;
}
}
/* ══════════════════════════════════════════════════════════════════════════
PROGRAMADOS — Mobile UX reformulado (≤640px)
Arquitetura: header ultra-compacto | KPIs inline | filtros em painel
══════════════════════════════════════════════════════════════════════════ */
/* ── Desktop header: visível só no desktop ── */
.sc-desktop-header { display: flex; }
.sc-mobile-header { display: none; }
.sc-mobile-filters { display: none; }
@media (max-width: 640px) {
/* ── Ocultar desktop, mostrar mobile ── */
.sc-desktop-header { display: none !important; }
.sc-mobile-header { display: flex !important; }
.sc-mobile-kpis { display: none !important; } /* substituído pelo novo row2 */
.sc-kpi-strip { display: none !important; }
#page-scheduled {
overflow-x: hidden !important;
max-width: 100vw !important;
width: 100% !important;
box-sizing: border-box !important;
padding-bottom: 20px;
}
/* Bloquear overflow em TODOS os descendentes diretos da página */
#page-scheduled > * {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* ════════════════════════════════
MOBILE HEADER
════════════════════════════════ */
.sc-mobile-header {
flex-direction: column;
gap: 8px;
margin-bottom: 14px;
width: 100%;
box-sizing: border-box;
}
/* Linha 1: tabs de view + botão novo */
.sc-mh-row1 {
display: flex;
align-items: center;
gap: 8px;
}
.sc-mh-views {
display: flex;
align-items: center;
gap: 3px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 3px;
flex: 1;
}
.sc-mh-view-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 8px 6px;
border: none;
border-radius: 9px;
background: transparent;
color: var(--muted);
font-size: .72rem;
font-weight: 500;
font-family: var(--font-sans);
cursor: pointer;
transition: all .15s;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
.sc-mh-view-btn.active {
background: var(--accent);
color: #fff;
font-weight: 700;
box-shadow: 0 2px 6px rgba(42,96,73,.25);
}
.sc-mh-new-btn {
display: flex;
align-items: center;
gap: 5px;
padding: 0 16px;
height: 42px;
border: none;
border-radius: 12px;
background: var(--accent);
color: #fff;
font-size: .82rem;
font-weight: 700;
font-family: var(--font-sans);
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: filter .15s;
-webkit-tap-highlight-color: transparent;
}
.sc-mh-new-btn:active { filter: brightness(.9); }
/* Linha 2: KPIs inline + botão filtro */
.sc-mh-row2 {
display: flex !important;
align-items: center;
gap: 6px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 1px;
}
.sc-mh-row2::-webkit-scrollbar { display: none; }
.sc-mh-kpi {
display: flex;
align-items: baseline;
gap: 4px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 5px 11px;
white-space: nowrap;
flex-shrink: 0;
cursor: default;
}
.sc-mh-kpi span {
font-family: var(--font-serif);
font-size: .82rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.sc-mh-kpi small {
font-size: .58rem;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
.sc-mh-kpi.neg span { color: var(--red, #dc2626); }
.sc-mh-kpi.pos span { color: var(--green, #16a34a); }
.sc-mh-kpi.amber span { color: var(--amber, #d97706); }
.sc-mh-filter-btn {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1.5px solid var(--border);
border-radius: 10px;
background: var(--surface);
color: var(--muted);
cursor: pointer;
flex-shrink: 0;
margin-left: auto;
transition: all .15s;
-webkit-tap-highlight-color: transparent;
}
.sc-mh-filter-btn.active {
border-color: var(--accent);
background: var(--accent-lt, #e8f5f0);
color: var(--accent);
}
/* ════════════════════════════════
PAINEL DE FILTROS DESLIZANTE
════════════════════════════════ */
.sc-mobile-filters {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 12px 14px;
margin-bottom: 14px;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.sc-mf-inner { display: flex; flex-direction: column; gap: 10px; }
.sc-mf-search-wrap {
display: flex;
align-items: center;
gap: 8px;
background: var(--bg2);
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 8px 12px;
transition: border-color .15s;
}
.sc-mf-search-wrap:focus-within { border-color: var(--accent); }
.sc-mf-search-wrap svg { color: var(--muted); flex-shrink: 0; }
.sc-mf-search-input {
flex: 1;
border: none !important;
outline: none !important;
background: transparent !important;
font-size: .85rem;
color: var(--text);
font-family: var(--font-sans);
padding: 0 !important;
}
.sc-mf-chips {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.sc-mf-chip {
padding: 6px 14px;
border-radius: 20px;
border: 1.5px solid var(--border);
background: var(--surface);
color: var(--text2);
font-size: .75rem;
font-weight: 600;
font-family: var(--font-sans);
cursor: pointer;
transition: all .14s;
-webkit-tap-highlight-color: transparent;
}
.sc-mf-chip.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.sc-mf-select {
width: 100%;
padding: 9px 12px;
border: 1.5px solid var(--border);
border-radius: 10px;
background: var(--bg2);
color: var(--text);
font-size: .82rem;
font-family: var(--font-sans);
-webkit-appearance: none;
appearance: none;
outline: none;
}
/* Manter compatibilidade: chips e select do painel desktop ocultos no mobile */
.sc-panel--recurrents .sc-panel__filters,
.sc-panel--recurrents .sc-panel__header { display: none !important; }
/* Campo de busca do desktop também mapeado ao mesmo input — ok */
/* ════════════════════════════════
LAYOUT: COLUNA ÚNICA
════════════════════════════════ */
.sc-list-view {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
/* ════════════════════════════════
PAINEL: PRÓXIMOS 10 DIAS
════════════════════════════════ */
#scUpcomingPanel {
background: var(--surface) !important;
border: 1.5px solid color-mix(in srgb, var(--accent) 30%, var(--border)) !important;
border-radius: 16px !important;
overflow: hidden !important;
margin-bottom: 16px !important;
box-shadow: 0 2px 10px rgba(42,96,73,.08) !important;
}
#scUpcomingPanel .sc-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 11px 14px 10px;
background: color-mix(in srgb, var(--accent) 6%, var(--surface2));
border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
cursor: pointer;
}
#scUpcomingPanel .sc-panel__title {
font-size: .74rem;
color: var(--accent);
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 6px;
}
#scUpcomingPanel .sc-panel__badge {
font-size: .72rem;
padding: 3px 10px;
border-radius: 20px;
background: color-mix(in srgb, var(--accent) 12%, transparent);
color: var(--accent);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
font-weight: 700;
}
#scUpcomingPanel .sc-panel__count {
font-size: .68rem;
color: var(--muted);
}
#scUpcomingPanel .sc-panel__body {
max-height: none !important;
overflow: visible !important;
padding: 8px 10px 10px;
}
/* Painel recorrentes: sem cromo */
.sc-panel--recurrents {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
.sc-panel--recurrents .sc-panel__body {
max-height: none !important;
overflow: visible !important;
}
/* Label separador */
.sc-mobile-recurrents-label {
display: flex !important;
align-items: center;
gap: 10px;
padding: 20px 0 10px;
font-size: .68rem;
font-weight: 800;
color: var(--text2);
text-transform: uppercase;
letter-spacing: .09em;
width: 100%;
box-sizing: border-box;
/* linha decorativa antes e depois do texto */
position: relative;
}
.sc-mobile-recurrents-label::before,
.sc-mobile-recurrents-label::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
.sc-mobile-recurrents-label svg { color: var(--accent); flex-shrink: 0; display: none; }
/* ════════════════════════════════
PRÓXIMOS: grupos por data
════════════════════════════════ */
.sup-group {
border: none !important;
border-radius: 0 !important;
background: transparent !important;
margin-bottom: 2px !important;
overflow: visible !important;
}
.sup-group-hdr {
background: transparent !important;
padding: 10px 2px 5px !important;
border-bottom: none !important;
gap: 10px;
}
.sup-group-hdr:hover { background: transparent !important; }
.sup-group-left { gap: 8px !important; }
/* Pill de data mais compacta */
.sup-day-pill {
min-width: 38px !important;
padding: 4px 7px !important;
border-radius: 9px !important;
}
.sup-day-num { font-size: .88rem !important; }
.sup-day-mon { font-size: .54rem !important; }
.sup-group-dow { font-size: .82rem !important; font-weight: 700; color: var(--text); }
.sup-day-total { font-size: .78rem !important; }
.sup-day-count { font-size: .64rem !important; padding: 1px 6px !important; }
/* sup-rows: layout when visible — display managed by JS toggleUpcomingGroup */
.sup-rows:not([style*="display: none"]):not([style*="display:none"]) {
border-top: none !important;
display: flex !important;
flex-direction: column !important;
gap: 5px !important;
padding-bottom: 4px !important;
padding-left: 0 !important;
}
/* When JS hides it, honour the none */
.sup-rows[style*="display: none"],
.sup-rows[style*="display:none"] {
display: none !important;
}
/* ── Item de próximo: card limpo ── */
.sup-item {
display: flex !important;
align-items: center !important;
gap: 10px !important;
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 12px !important;
padding: 11px 12px !important;
box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
min-height: 54px !important;
transition: box-shadow .12s, transform .1s;
}
.sup-item:active { transform: scale(.989) !important; }
.sup-item:last-child { border-bottom: 1px solid var(--border) !important; }
.sup-item--today {
border-left: 3px solid var(--amber, #f59e0b) !important;
background: color-mix(in srgb, var(--amber) 5%, var(--surface)) !important;
}
.sup-icon {
width: 34px !important; height: 34px !important;
border-radius: 10px !important;
font-size: .9rem !important;
flex-shrink: 0 !important;
}
.sup-body {
flex: 1 1 auto !important;
min-width: 0 !important;
overflow: hidden;
gap: 2px !important;
}
.sup-desc {
font-size: .86rem !important;
font-weight: 700 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.sup-acct {
font-size: .68rem !important;
color: var(--muted) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.sup-right {
flex-shrink: 0 !important;
max-width: 44% !important;
align-items: flex-end !important;
gap: 5px !important;
display: flex !important;
flex-direction: column !important;
}
.sup-amt {
font-size: .93rem !important;
white-space: nowrap !important;
}
.sup-actions { gap: 5px !important; }
.sup-ignore-btn {
width: 30px !important; height: 30px !important;
border-radius: 8px !important;
font-size: .72rem !important;
}
.sup-register-btn {
height: 30px !important;
padding: 0 12px !important;
border-radius: 8px !important;
font-size: .75rem !important;
font-weight: 700 !important;
}
/* ════════════════════════════════
CARDS DE PROGRAMADOS
════════════════════════════════ */
#page-scheduled #scheduledList .sc-card {
border-radius: 14px !important;
margin-bottom: 8px !important;
border: 1px solid var(--border) !important;
box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
overflow: hidden !important;
background: var(--surface) !important;
}
#page-scheduled #scheduledList .sc-card:active { transform: scale(.989) !important; }
/* Linha principal: flex compacto */
#page-scheduled .sc-card-row {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 12px 12px 11px !important;
min-height: 58px !important;
cursor: pointer;
background: var(--surface);
}
#page-scheduled .sc-card-icon {
width: 38px !important; height: 38px !important;
border-radius: 11px !important;
font-size: .95rem !important;
flex-shrink: 0 !important;
display: flex; align-items: center; justify-content: center;
}
#page-scheduled .sc-card-mid {
flex: 1 1 auto !important;
min-width: 0 !important;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 3px;
}
#page-scheduled .sc-card-title2 {
font-size: .88rem !important;
font-weight: 700 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
color: var(--text);
}
#page-scheduled .sc-card-meta {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 4px !important;
row-gap: 2px !important;
overflow: hidden;
max-height: 36px;
}
#page-scheduled .sc-card-meta-text {
font-size: .68rem;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}
#page-scheduled .sc-freq-pill {
font-size: .6rem !important;
padding: 1px 5px !important;
white-space: nowrap;
flex-shrink: 0;
}
#page-scheduled .sc-cat-chip {
font-size: .6rem !important;
padding: 0 5px !important;
flex-shrink: 0;
}
#page-scheduled .sc-card-end {
flex-shrink: 0 !important;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
max-width: 38% !important;
}
#page-scheduled .sc-card-amt {
font-size: .95rem !important;
font-weight: 800 !important;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
#page-scheduled .sc-card-badges {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
#page-scheduled .sc-next-pill {
font-size: .59rem !important;
padding: 1px 5px !important;
white-space: nowrap;
}
#page-scheduled .sc-status-badge {
font-size: .58rem !important;
padding: 1px 5px !important;
white-space: nowrap;
}
#page-scheduled .sc-card-chevron {
flex-shrink: 0;
color: var(--muted);
opacity: .6;
}
/* Barra de ações — destaque, fácil de tocar */
#page-scheduled .sc-card-actions {
display: flex !important;
align-items: center !important;
gap: 7px !important;
padding: 9px 11px 11px !important;
border-top: 1px solid var(--border) !important;
background: var(--bg2) !important;
}
/* Botão registrar: preenchido, grande */
#page-scheduled .sc-reg-btn {
flex: 1 !important;
height: 40px !important;
min-height: 40px !important;
border-radius: 10px !important;
font-size: .8rem !important;
font-weight: 700 !important;
padding: 0 10px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: var(--accent) !important;
color: #fff !important;
border: none !important;
opacity: 1 !important;
justify-content: center !important;
display: flex !important;
align-items: center !important;
}
#page-scheduled .sc-reg-none {
flex: 1 !important;
height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
font-size: .73rem !important;
color: var(--muted) !important;
padding: 0 4px !important;
background: transparent !important;
border: none !important;
}
/* Ícones de ação: área de toque adequada */
#page-scheduled .sc-icon-btns { gap: 5px !important; }
#page-scheduled .sc-icon-btn {
width: 36px !important; height: 36px !important;
border-radius: 9px !important;
flex-shrink: 0 !important;
border: 1px solid var(--border) !important;
}
#page-scheduled .sc-icon-del { border-color: color-mix(in srgb, var(--red) 30%, var(--border)) !important; }
/* Corpo expandido: ocorrências compactas */
#page-scheduled .sc-card-body {
border-top: 1px solid var(--border) !important;
padding: 10px 12px 12px !important;
background: var(--surface) !important;
}
#page-scheduled .sc-occ-header {
font-size: .63rem !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
margin-bottom: 7px;
}
#page-scheduled .sc-occ-row {
display: grid !important;
grid-template-columns: 76px 1fr auto auto !important;
align-items: center;
gap: 5px;
padding: 6px 0;
border-bottom: 1px solid var(--border);
font-size: .74rem;
}
#page-scheduled .sc-occ-row:last-child { border-bottom: none; }
#page-scheduled .sc-occ-date { font-size: .7rem !important; font-weight: 600; white-space: nowrap; }
#page-scheduled .sc-occ-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem !important; }
/* Seção concluídos */
.sc-finished-toggle {
border-radius: 12px !important;
min-height: 44px !important;
font-size: .77rem !important;
padding: 10px 14px !important;
}
/* Calendário */
.sc-cal-cell { min-height: 40px !important; }
.sc-cal-legend { flex-wrap: wrap; gap: 6px; font-size: .69rem; }
}
/* ── Telas muito pequenas (≤375px) ───────────────────────────────────────── */
@media (max-width: 375px) {
.sc-mh-view-btn { font-size: .67rem; padding: 7px 3px; }
.sc-mh-new-btn { padding: 0 12px; font-size: .78rem; height: 40px; }
.sc-mh-kpi span { font-size: .76rem; }
#page-scheduled .sc-card-row { padding: 10px 10px 9px !important; gap: 8px !important; }
#page-scheduled .sc-card-icon { width: 34px !important; height: 34px !important; }
#page-scheduled .sc-card-amt { font-size: .88rem !important; }
#page-scheduled .sc-card-end { max-width: 36% !important; }
#page-scheduled .sc-reg-btn { height: 38px !important; font-size: .76rem !important; }
#page-scheduled .sc-icon-btn { width: 33px !important; height: 33px !important; }
.sup-item { padding: 9px 10px !important; }
.sup-register-btn { height: 28px !important; padding: 0 9px !important; }
.sup-ignore-btn { width: 28px !important; height: 28px !important; }
}
/* ══════════════════════════════════════════════════════════════════════════
FIX: Próximos 10 dias — contenção de overflow no mobile
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
/* Painel upcoming: contém tudo dentro dos limites da tela */
#scUpcomingPanel {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* Body do painel: não vaza para fora */
#scUpcomingPanel .sc-panel__body {
overflow: hidden !important;
padding: 8px 10px 10px !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Grupos: contidos */
#scUpcomingPanel .sup-group {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* sup-rows: overflow visible so collapsed rows can expand correctly */
#scUpcomingPanel .sup-rows {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: visible !important; /* do NOT use hidden — breaks display:none toggle */
}
/* Item: flex row estritamente contido */
#scUpcomingPanel .sup-item {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
/* Sem padding extra que cause overflow */
padding: 10px 10px !important;
gap: 8px !important;
}
/* Ícone: tamanho fixo, não encolhe nem cresce */
#scUpcomingPanel .sup-icon {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
}
/* Corpo: ocupa o espaço disponível, textos cortados */
#scUpcomingPanel .sup-body {
flex: 1 1 auto !important;
min-width: 0 !important;
max-width: 100% !important;
overflow: hidden !important;
}
#scUpcomingPanel .sup-desc,
#scUpcomingPanel .sup-acct {
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* Lado direito: largura máxima controlada, não vaza */
#scUpcomingPanel .sup-right {
flex: 0 0 auto !important;
max-width: 42% !important;
min-width: 0 !important;
overflow: hidden !important;
align-items: flex-end !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
}
#scUpcomingPanel .sup-amt {
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: .88rem !important;
}
#scUpcomingPanel .sup-actions {
display: flex !important;
gap: 4px !important;
flex-shrink: 0 !important;
}
#scUpcomingPanel .sup-register-btn {
height: 28px !important;
padding: 0 9px !important;
font-size: .72rem !important;
white-space: nowrap !important;
}
#scUpcomingPanel .sup-ignore-btn {
width: 28px !important;
height: 28px !important;
flex-shrink: 0 !important;
}
/* Header do grupo: também contido */
#scUpcomingPanel .sup-group-hdr {
width: 100% !important;
box-sizing: border-box !important;
padding: 10px 2px 5px !important;
overflow: hidden !important;
}
#scUpcomingPanel .sup-group-meta {
flex-shrink: 0 !important;
gap: 6px !important;
}
#scUpcomingPanel .sup-day-total {
font-size: .76rem !important;
white-space: nowrap !important;
}
}
/* ── Upcoming day group arrow ── */
.sc-upcoming-day-arrow { transition: transform .22s ease; }
.sc-upcoming-day-arrow.open { transform: rotate(180deg); }
/* ── Mobile: ocultar ícone de categoria na lista de transações ── */
@media (max-width: 640px) {
.tx-v2-title .tx-v2-cat-bubble {
display: none !important;
}
}
/* Desktop only - Forecast (Relatórios > Previsão) */
@media (min-width: 769px) {
.reports-page.forecast table th:nth-child(1),
.reports-page.forecast table td:nth-child(1) {
width: 20% !important;
min-width: 140px;
}
}
/* ══════════════════════════════════════════════════════════════
AI INSIGHTS — Collapsible blocks + redesigned results
══════════════════════════════════════════════════════════════ */
/* Params toggle button */
.ai2-params-toggle {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
font-family: var(--font-sans);
font-size: .78rem;
font-weight: 700;
color: var(--text2);
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 8px;
cursor: pointer;
margin-bottom: 12px;
width: 100%;
text-align: left;
transition: background .15s, border-color .15s;
}
.ai2-params-toggle:hover { background: var(--bg2); border-color: var(--accent); }
.ai2-params-body {
animation: paramFadeIn .18s ease both;
}
@keyframes paramFadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
/* Collapsible result blocks */
.air-block {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
margin-bottom: 0;
overflow: hidden;
transition: box-shadow .15s, border-color .15s;
}
.air-block:hover { box-shadow: 0 3px 16px rgba(0,0,0,.08); }
.air-block--warn {
border-color: color-mix(in srgb, #ea580c 22%, var(--border));
}
.air-block--warn .air-block-hdr {
background: color-mix(in srgb, #ea580c 4%, var(--surface));
}
.air-block-hdr {
display: flex;
align-items: center;
gap: 11px;
padding: 14px 18px;
cursor: pointer;
user-select: none;
transition: background .12s;
border-bottom: 1px solid var(--border);
}
.air-block-hdr:hover { background: color-mix(in srgb, var(--accent) 4%, var(--surface2)); }
.air-block-hdr--collapsed { border-bottom-color: transparent; }
.air-block-icon {
font-size: 1.15rem;
line-height: 1;
flex-shrink: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 8px;
}
.air-block-title {
flex: 1;
font-size: .875rem;
font-weight: 700;
color: var(--text);
letter-spacing: -.01em;
}
.air-block-chev {
color: var(--muted);
transition: transform .2s ease;
flex-shrink: 0;
opacity: .7;
}
.air-block-chev--collapsed { transform: rotate(-90deg); }
.air-block-body {
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
gap: 16px;
animation: blockFadeIn .18s ease both;
}
@keyframes blockFadeIn { from { opacity:0; transform: translateY(4px); } to { opacity:1; transform: translateY(0); } }
/* Remove double padding from sections inside blocks */
.air-block-body .air-section {
border: none;
border-radius: 0;
padding: 0;
margin-bottom: 0;
background: none;
box-shadow: none;
}
.air-block-body .air-section:hover { box-shadow: none; }
.air-block-body .air-section + .air-section {
border-top: 1px solid var(--border);
padding-top: 16px;
margin-top: 0;
}
.air-block-body .air-section-title {
font-size: .68rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .09em;
color: var(--muted);
margin-bottom: 12px;
}
.air-block-body .air-section-title::after { display: none; }
/* Voice card inside block: keep full styles but no extra margin */
.air-block-body .air-voice-card {
margin-bottom: 0;
}
.air-block-body .air-voice-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.air-block-body .air-voice-label {
font-size: .6rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .09em;
color: #a78bfa;
margin-bottom: 6px;
}
.air-block-body .air-voice-text {
font-size: .84rem;
line-height: 1.7;
color: rgba(255,255,255,.88);
margin: 0;
}
/* Drill tx rows — shared between reports and dashboard */
.drill-tx-row {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
cursor: pointer;
transition: background .12s;
margin-bottom: 3px;
}
.drill-tx-row:hover { background: var(--surface2); }
.drill-tx-dot {
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 5px;
}
.drill-tx-body { flex: 1; min-width: 0; }
.drill-tx-desc { font-size: .82rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drill-tx-meta { font-size: .7rem; color: var(--muted); margin-top: 2px; }
.drill-tx-amt { font-size: .84rem; font-weight: 700; font-family: var(--font-serif); flex-shrink: 0; }
.drill-tx-amt.pos { color: var(--green, #16a34a); }
.drill-tx-amt.neg { color: var(--red, #dc2626); }
/* Accounts fav star always show (previously only showed when is_favorite) */
.account-card-wrap { position: relative; }
/* ══════════════════════════════════════════════════════════════
FEEDBACK TOPBAR — dark orange pulsing bubble
══════════════════════════════════════════════════════════════ */
#feedbackTopbarBtn,
.feedback-topbar-bubble {
display: inline-flex;
position: relative;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
padding: 0;
border: 1.5px solid rgba(255,255,255,.22);
border-radius: 999px;
cursor: pointer;
flex-shrink: 0;
color: #fff;
background: linear-gradient(135deg, #b45309 0%, #d97706 52%, #fbbf24 100%);
box-shadow: 0 4px 14px rgba(180,83,9,.38), 0 0 0 0 rgba(251,191,36,.32);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
animation: feedbackAmberPulse 2.4s ease-in-out infinite;
}
#feedbackTopbarBtn:hover,
.feedback-topbar-bubble:hover {
transform: scale(1.08);
box-shadow: 0 6px 18px rgba(180,83,9,.48), 0 0 0 5px rgba(251,191,36,.18);
filter: brightness(1.06);
}
#feedbackTopbarBtn:active,
.feedback-topbar-bubble:active {
transform: scale(.96);
}
@keyframes feedbackAmberPulse {
0%,100% { box-shadow: 0 4px 14px rgba(180,83,9,.38), 0 0 0 0 rgba(251,191,36,.32); }
50% { box-shadow: 0 4px 18px rgba(180,83,9,.48), 0 0 0 6px rgba(251,191,36,.14); }
}
.feedback-topbar-icon {
color: #fff;
display: block;
filter: drop-shadow(0 1px 1px rgba(0,0,0,.12));
}
.feedback-topbar-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 16px;
height: 16px;
border-radius: 999px;
background: #dc2626;
border: 2px solid #fff;
font-size: .6rem;
font-weight: 700;
color: #fff;
padding: 0 4px;
line-height: 12px;
text-align: center;
box-sizing: border-box;
}
/* ══════════════════════════════════════════════════════════════
PATRIMÔNIO MODAL — bar chart row hover
══════════════════════════════════════════════════════════════ */
#patrimonioModal .modal { animation: slideUpFadeIn .22s ease both; }
/* ══════════════════════════════════════════════════════════════
FORECAST DRILL MODAL
══════════════════════════════════════════════════════════════ */
#forecastDrillModal .modal,
#rptDrillModal .modal {
animation: slideUpFadeIn .22s ease both;
}
/* ══════════════════════════════════════════════════════════════
AI PARAMS — responsive collapse auto on mobile
══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
.ai2-params-toggle { font-size: .75rem; padding: 7px 12px; }
}
/* ══════════════════════════════════════════════════════════════
ALERT DURATION OPTIONS — profile prefs
══════════════════════════════════════════════════════════════ */
.alert-dur-opt {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: .78rem;
font-weight: 500;
color: var(--text2);
cursor: pointer;
padding: 5px 10px;
border-radius: 20px;
border: 1.5px solid var(--border);
background: var(--surface);
transition: border-color .14s, background .14s;
user-select: none;
}
.alert-dur-opt:has(input:checked) {
border-color: var(--accent);
background: var(--accent-lt);
color: var(--accent);
font-weight: 700;
}
.alert-dur-opt input[type="radio"] {
accent-color: var(--accent);
width: 13px;
height: 13px;
flex-shrink: 0;
}
/* TOAST MODAL ALERT */
#alertModalOverlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.45);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn .18s ease;
}
#alertModalBox {
background: var(--surface);
border-radius: 16px;
box-shadow: 0 16px 48px rgba(0,0,0,.28);
padding: 28px 28px 20px;
max-width: 360px;
width: calc(100vw - 40px);
text-align: center;
animation: slideUpFadeIn .22s ease;
}
#alertModalIcon {
font-size: 2.2rem;
line-height: 1;
margin-bottom: 10px;
}
#alertModalMsg {
font-size: .9rem;
font-weight: 600;
color: var(--text);
margin-bottom: 18px;
line-height: 1.4;
}
#alertModalBtn {
min-width: 100px;
padding: 9px 22px;
}
/* Family modal — better padding/spacing */
.mfm-pane {
display: none;
padding: 18px 24px 12px;
}
.mfm-pane.active { display: block; }
.mfm-pane-intro {
padding: 0 0 14px;
}
.mfm-pane-intro-title {
font-size: .88rem;
font-weight: 700;
color: var(--text);
}
.mfm-pane-intro-sub {
font-size: .73rem;
color: var(--muted);
margin-top: 2px;
}
.mfm-tab-bar {
display: flex;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--bg2);
overflow-x: auto;
scrollbar-width: none;
}
.mfm-tab-bar::-webkit-scrollbar { display: none; }
.mfm-tab {
flex: 1;
min-width: 60px;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 8px 4px 7px;
font-size: .65rem;
font-weight: 600;
color: var(--muted);
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: color .14s, border-color .14s;
white-space: nowrap;
}
.mfm-tab:hover { color: var(--text); }
.mfm-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.mfm-add-card {
background: var(--bg2);
border: 1.5px solid var(--border);
border-radius: var(--r-sm);
padding: 16px 18px;
margin-top: 12px;
}
.mfm-add-tabs-bar {
display: flex;
border-radius: 8px;
overflow: hidden;
border: 1.5px solid var(--border);
margin-bottom: 12px;
}
.mfm-add-body { display: flex; flex-direction: column; gap: 8px; }
.mfm-field-lbl {
font-size: .76rem;
font-weight: 600;
color: var(--text2);
display: block;
margin-bottom: 4px;
}
.mfm-select {
width: 100%;
font-size: .83rem;
}
/* MFM members list gap */
.mfm-members-list { display: flex; flex-direction: column; gap: 8px; }
/* ══════════════════════════════════════════════════════════════
DASHBOARD — fav type group headers (uniform with app fmt)
══════════════════════════════════════════════════════════════ */
.dash-fav-type-group { margin-bottom: 4px; }
.dash-fav-type-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 2px 10px;
}
.dash-fav-type-label {
font-size: .68rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--muted);
display: flex;
align-items: center;
gap: 5px;
}
.dash-fav-type-total {
font-size: .88rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -.01em;
}
.dash-fav-type-divider {
height: 1px;
background: var(--border);
margin: 12px 0 14px;
}
/* Desktop: wider grid for fav cards */
@media (min-width: 1024px) {
.dash-favs-grid {
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 14px;
}
.dash-fav-card {
padding: 18px 20px 20px;
}
.dash-fav-card__balance {
font-size: 1.45rem;
}
.dash-fav-card__icon {
width: 40px;
height: 40px;
border-radius: 11px;
}
}
/* Mobile: always 2 columns */
@media (max-width: 480px) {
.dash-favs-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px;
}
}
/* ═══════════════════════════════════════════════════════════════════
MÓDULO SONHOS — Dreams Module CSS (redesign 2026)
═══════════════════════════════════════════════════════════════════ */
/* ── Hero summary ────────────────────────────────────────────────── */
.drm-summary-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin: 0 0 20px;
}
.drm-summary-item {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 14px 14px 12px;
text-align: center;
transition: transform .15s, box-shadow .15s;
}
.drm-summary-item:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.drm-summary-label {
display: block;
font-size: .63rem;
color: var(--muted);
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: .07em;
font-weight: 600;
}
.drm-summary-value {
display: block;
font-size: 1.05rem;
font-weight: 800;
color: var(--text);
letter-spacing: -.01em;
}
.drm-summary-value.accent { color: var(--accent); }
/* ── Group label ─────────────────────────────────────────────────── */
.drm-group-label {
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--muted);
margin: 22px 0 10px;
display: flex;
align-items: center;
gap: 8px;
}
.drm-group-label::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
/* ── Cards grid ──────────────────────────────────────────────────── */
.drm-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 14px;
margin-bottom: 16px;
}
/* ── Dream card ──────────────────────────────────────────────────── */
.drm-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 18px 18px 14px;
cursor: pointer;
transition: transform .18s, box-shadow .18s, border-color .18s;
position: relative;
overflow: hidden;
}
.drm-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
border-radius: 16px 16px 0 0;
}
.drm-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.10); border-color: var(--accent); }
.drm-card--viagem::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.drm-card--automovel::before { background: linear-gradient(90deg, #f97316, #fb923c); }
.drm-card--imovel::before { background: linear-gradient(90deg, #22c55e, #4ade80); }
.drm-card-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.drm-card-icon {
width: 44px; height: 44px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 1.35rem; flex-shrink: 0;
background: var(--surface2);
border: 1px solid var(--border);
}
.drm-card--viagem .drm-card-icon { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.2); }
.drm-card--automovel .drm-card-icon { background: rgba(249,115,22,.1); border-color: rgba(249,115,22,.2); }
.drm-card--imovel .drm-card-icon { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.2); }
.drm-card-info { flex: 1; min-width: 0; }
.drm-card-title {
font-size: .93rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 3px;
}
.drm-card-type { font-size: .7rem; color: var(--muted); font-weight: 500; }
.drm-card-status {
font-size: .65rem;
font-weight: 700;
flex-shrink: 0;
padding: 3px 8px;
border-radius: 20px;
background: var(--surface2);
border: 1px solid var(--border);
}
/* ── Progress bar ────────────────────────────────────────────────── */
.drm-card-progress-wrap { margin-bottom: 12px; }
.drm-card-progress-bar {
height: 8px;
background: var(--surface2);
border-radius: 100px;
overflow: hidden;
margin-bottom: 6px;
}
.drm-card-progress-fill { height: 100%; border-radius: 100px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.drm-card-progress-labels {
display: flex;
justify-content: space-between;
font-size: .68rem;
color: var(--muted);
font-weight: 500;
}
/* ── Meta chips ──────────────────────────────────────────────────── */
.drm-card-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.drm-meta-chip {
font-size: .66rem;
font-weight: 600;
padding: 3px 9px;
border-radius: 20px;
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text2);
}
.drm-meta-chip.accent {
background: rgba(var(--accent-rgb, 22,107,79), .10);
color: var(--accent);
border-color: rgba(var(--accent-rgb, 22,107,79), .20);
}
.drm-card-desc { font-size: .75rem; color: var(--muted); line-height: 1.45; margin-bottom: 14px; }
/* ── Card actions ────────────────────────────────────────────────── */
.drm-card-actions {
display: flex;
gap: 6px;
margin-top: 10px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.drm-action-btn {
flex: 1;
padding: 7px 10px;
font-size: .74rem;
font-weight: 600;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface2);
color: var(--text2);
cursor: pointer;
transition: all .15s;
text-align: center;
}
.drm-action-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.drm-action-btn--icon { flex: 0 0 auto; padding: 7px 12px; }
/* ── Empty state ─────────────────────────────────────────────────── */
.drm-empty {
text-align: center;
padding: 60px 24px;
max-width: 380px;
margin: 0 auto;
}
.drm-empty-icon {
font-size: 3.2rem;
margin-bottom: 16px;
animation: dreamFloat 3s ease-in-out infinite;
}
@keyframes dreamFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.drm-empty-title {
font-size: 1.05rem;
font-weight: 800;
color: var(--text);
margin-bottom: 8px;
}
.drm-empty-desc { font-size: .82rem; color: var(--muted); line-height: 1.55; margin-bottom: 24px; }
/* ── Detail modal ────────────────────────────────────────────────── */
.drm-detail-modal {
max-width: 580px;
max-height: 88dvh;
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
}
.drm-detail-header {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 20px 22px 16px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
background: var(--surface);
}
.drm-detail-emoji {
font-size: 2rem;
width: 52px; height: 52px;
border-radius: 14px;
background: var(--surface2);
border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.drm-detail-title-block { flex: 1; min-width: 0; }
.drm-detail-title { font-size: 1.1rem; font-weight: 800; color: var(--text); margin: 0 0 4px; }
.drm-detail-subtitle { font-size: .76rem; color: var(--muted); }
.drm-detail-body {
flex: 1;
overflow-y: auto;
padding: 18px 22px;
display: flex;
flex-direction: column;
gap: 16px;
}
.drm-detail-footer {
display: flex;
gap: 8px;
padding: 14px 22px;
border-top: 1px solid var(--border);
flex-shrink: 0;
background: var(--surface);
}
.drm-btn-right { margin-left: auto; }
/* ── Progress hero ───────────────────────────────────────────────── */
.drm-detail-hero {
background: var(--surface2);
border-radius: 14px;
border: 1px solid var(--border);
padding: 16px 18px;
}
.drm-detail-hero-amounts {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.drm-hero-label { font-size: .68rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.drm-hero-value { font-size: 1.05rem; font-weight: 800; color: var(--text); }
.drm-hero-value.accent { color: var(--accent); }
.drm-hero-pct { font-size: 1.6rem; font-weight: 900; letter-spacing: -.02em; }
.drm-detail-progress-bar { height: 10px; background: var(--surface); border-radius: 100px; overflow: hidden; margin-bottom: 10px; border: 1px solid var(--border); }
.drm-detail-progress-fill { height: 100%; border-radius: 100px; transition: width .6s cubic-bezier(.4,0,.2,1); background: var(--accent); }
.drm-hero-timeline { display: flex; justify-content: space-between; font-size: .73rem; color: var(--muted); flex-wrap: wrap; gap: 4px; }
/* ── Detail sections ─────────────────────────────────────────────── */
.drm-detail-section { /* wrapper */ }
.drm-section-title {
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--muted);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
}
.drm-ai-badge-sm {
font-size: .62rem;
background: linear-gradient(135deg, #7c3aed, #a855f7);
color: #fff;
padding: 1px 6px;
border-radius: 10px;
font-weight: 700;
}
/* ── Scenarios ───────────────────────────────────────────────────── */
.drm-scenarios {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.drm-scenario {
border-radius: 12px;
padding: 12px 12px 10px;
text-align: center;
border: 1px solid var(--border);
}
.drm-scenario--conservative { background: rgba(59,130,246,.06); border-color: rgba(59,130,246,.18); }
.drm-scenario--balanced { background: rgba(22,163,74,.07); border-color: rgba(22,163,74,.22); }
.drm-scenario--aggressive { background: rgba(249,115,22,.06); border-color: rgba(249,115,22,.18); }
.drm-scenario-label { font-size: .68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.drm-scenario-desc { font-size: .88rem; font-weight: 800; color: var(--text); margin-bottom: 3px; }
.drm-scenario-period { font-size: .68rem; color: var(--muted); }
/* ── Dream type specific meta grid ──────────────────────────────── */
.drm-meta-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 8px;
margin-top: 4px;
}
.drm-meta-item {
display: flex;
flex-direction: column;
gap: 2px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 12px;
}
.drm-meta-label {
font-size: .68rem;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
.drm-meta-value {
font-size: .88rem;
font-weight: 600;
color: var(--text);
}
/* ── Items list ──────────────────────────────────────────────────── */
.drm-items-list { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.drm-item-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 14px;
border-bottom: 1px solid var(--border);
font-size: .81rem;
gap: 10px;
}
.drm-item-row:last-child { border-bottom: none; }
.drm-item-row--total { background: var(--surface2); font-weight: 700; }
.drm-item-name { color: var(--text); display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.drm-item-amount { color: var(--accent); font-weight: 700; flex-shrink: 0; }
.drm-ai-badge { font-size: .68rem; background: rgba(124,58,237,.12); color: #7c3aed; padding: 1px 5px; border-radius: 8px; flex-shrink: 0; }
/* ── AI analysis ─────────────────────────────────────────────────── */
.drm-ai-analysis-box { background: var(--surface2); border-radius: 12px; border: 1px solid var(--border); padding: 14px; }
.drm-ai-placeholder { text-align: center; padding: 8px 0; }
.drm-ai-hint { font-size: .74rem; color: var(--muted); margin-top: 8px; }
.drm-btn-ai {
background: linear-gradient(135deg, #7c3aed, #a855f7);
color: #fff;
border: none;
border-radius: 8px;
padding: 7px 14px;
font-size: .77rem;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
transition: opacity .15s;
}
.drm-btn-ai:hover { opacity: .88; }
.drm-ai-loading { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--muted); padding: 6px 0; }
.drm-ai-spinner {
width: 16px; height: 16px;
border: 2px solid var(--border);
border-top-color: #7c3aed;
border-radius: 50%;
animation: spin .8s linear infinite;
flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.drm-ai-error { font-size: .78rem; color: var(--red, #dc2626); padding: 6px 0; }
.drm-ai-result { font-size: .8rem; }
.drm-ai-text { color: var(--text2); line-height: 1.5; margin-bottom: 8px; }
.drm-ai-section { margin-bottom: 8px; }
.drm-ai-section strong { display: block; margin-bottom: 4px; }
.drm-ai-section ul { margin: 0; padding-left: 16px; }
.drm-ai-section li { margin-bottom: 2px; color: var(--text2); }
.drm-ai-meta { font-size: .74rem; color: var(--muted); margin-top: 4px; }
.drm-ai-motivacao { margin-top: 10px; padding: 10px 14px; background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(168,85,247,.06)); border-radius: 10px; border: 1px solid rgba(124,58,237,.14); font-size: .79rem; color: #7c3aed; font-weight: 500; font-style: italic; }
.drm-ai-viab { font-size: .9rem; }
.drm-ai-footer { font-size: .66rem; color: var(--muted); margin-top: 10px; text-align: right; }
/* ── Contributions ───────────────────────────────────────────────── */
.drm-contribs-list { display: flex; flex-direction: column; gap: 6px; }
.drm-contrib-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: var(--surface2);
border-radius: 9px;
font-size: .78rem;
}
.drm-contrib-date { color: var(--muted); font-size: .72rem; flex-shrink: 0; }
.drm-contrib-amount { font-weight: 700; color: var(--accent); margin-left: auto; flex-shrink: 0; }
.drm-contrib-badge { font-size: .62rem; padding: 1px 6px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.drm-contrib-badge--tx { background: rgba(22,163,74,.1); color: var(--accent); border-color: rgba(22,163,74,.2); }
.drm-desc-text { font-size: .82rem; color: var(--text2); line-height: 1.55; margin: 0; }
/* ── Context menu ────────────────────────────────────────────────── */
.drm-ctx-menu { min-width: 165px; }
.drm-ctx-item {
padding: 8px 12px;
font-size: .79rem;
cursor: pointer;
border-radius: 7px;
color: var(--text);
display: flex;
align-items: center;
gap: 8px;
transition: background .12s;
}
.drm-ctx-item:hover { background: var(--surface2); }
.drm-ctx-item--danger { color: var(--red, #dc2626); }
.drm-ctx-sep { height: 1px; background: var(--border); margin: 4px 0; }
/* ── Wizard modal ────────────────────────────────────────────────── */
.drm-wizard-modal {
max-width: 520px;
max-height: 90dvh;
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
}
.drm-wizard-header { flex: 1; min-width: 0; }
.drm-wizard-steps {
display: flex;
gap: 4px;
align-items: center;
margin-top: 5px;
}
.drm-wizard-step {
width: 22px; height: 22px;
border-radius: 50%;
background: var(--surface2);
border: 1.5px solid var(--border);
display: inline-flex; align-items: center; justify-content: center;
font-size: .65rem;
font-weight: 700;
color: var(--muted);
transition: all .2s;
}
.drm-wizard-step.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.drm-wizard-step.done { background: rgba(22,163,74,.15); border-color: var(--accent); color: var(--accent); }
.drm-wizard-body { flex: 1; overflow-y: auto; padding: 20px 22px; }
.drm-wizard-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 22px;
border-top: 1px solid var(--border);
flex-shrink: 0;
background: var(--surface);
}
.drm-wiz-headline { font-size: 1rem; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.drm-wiz-subhead { font-size: .79rem; color: var(--muted); margin-bottom: 18px; line-height: 1.45; }
.drm-wiz-step1, .drm-wiz-step2, .drm-wiz-step3, .drm-wiz-step4 { display: flex; flex-direction: column; }
.drm-wiz-form { display: flex; flex-direction: column; gap: 14px; }
.drm-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.drm-wiz-section-title {
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--accent);
margin-top: 4px;
margin-bottom: 12px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
/* ── Step 1: Type cards ──────────────────────────────────────────── */
.drm-type-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 18px;
}
.drm-type-card {
border: 1.5px solid var(--border);
border-radius: 14px;
padding: 16px 12px 14px;
background: var(--surface);
cursor: pointer;
text-align: center;
transition: all .18s;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.drm-type-card:hover { border-color: var(--accent); background: var(--surface2); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.drm-type-card.selected { border-color: var(--accent); background: rgba(22,163,74,.07); box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
.drm-type-emoji { font-size: 1.8rem; }
.drm-type-label { font-size: .79rem; font-weight: 700; color: var(--text); }
.drm-type-desc { font-size: .67rem; color: var(--muted); }
.drm-wiz-divider {
display: flex;
align-items: center;
gap: 10px;
margin: 18px 0 12px;
font-size: .72rem;
color: var(--muted);
}
.drm-wiz-divider::before, .drm-wiz-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.drm-wiz-free-input { display: flex; gap: 8px; align-items: flex-end; }
.drm-wiz-free-input .form-input { flex: 1; }
.drm-wiz-ai-hint { font-size: .75rem; color: var(--accent); background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.18); border-radius: 9px; padding: 8px 12px; margin-top: 10px; }
/* ── Step 3: Items ───────────────────────────────────────────────── */
.drm-wiz-items-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.drm-items-total-label { font-size: .79rem; color: var(--muted); }
.drm-wizard-items { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.drm-wiz-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: var(--surface2);
border-radius: 9px;
border: 1px solid var(--border);
}
.drm-wiz-item-name { flex: 2; min-width: 0; }
.drm-wiz-item-amt { flex: 1; min-width: 0; }
.drm-item-del {
background: none; border: none; color: var(--muted);
cursor: pointer; font-size: .8rem; padding: 4px; border-radius: 5px; flex-shrink: 0;
transition: color .12s, background .12s;
}
.drm-item-del:hover { color: var(--red, #dc2626); background: rgba(220,38,38,.08); }
.drm-wiz-add-item { display: grid; grid-template-columns: 1fr .6fr auto; gap: 8px; align-items: end; margin-top: 10px; }
/* ── Step 4: Review ──────────────────────────────────────────────── */
.drm-review-card {
border: 1px solid var(--border);
border-radius: 14px;
padding: 16px 18px;
background: var(--surface2);
margin-bottom: 14px;
}
.drm-review-hero {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
}
.drm-review-emoji { font-size: 1.8rem; }
.drm-review-title { font-size: .95rem; font-weight: 800; color: var(--text); margin-bottom: 2px; }
.drm-review-type { font-size: .72rem; color: var(--muted); }
.drm-review-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.drm-review-item { /* container for a label + value pair */ }
.drm-review-label { font-size: .65rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.drm-review-value { font-size: .86rem; font-weight: 700; color: var(--text); }
.drm-review-value.accent { color: var(--accent); }
.drm-review-items-preview { border-top: 1px solid var(--border); padding-top: 10px; }
.drm-review-item-row { display: flex; justify-content: space-between; font-size: .78rem; padding: 3px 0; color: var(--text); gap: 8px; }
.drm-review-more { font-size: .72rem; color: var(--muted); text-align: center; padding-top: 5px; }
.drm-review-note { font-size: .75rem; color: var(--muted); text-align: center; line-height: 1.45; background: var(--surface2); border-radius: 10px; padding: 10px; }
/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
.drm-summary-bar { grid-template-columns: repeat(2, 1fr); }
.drm-cards-grid { grid-template-columns: 1fr; }
.drm-type-cards { grid-template-columns: repeat(3, 1fr); }
.drm-scenarios { grid-template-columns: 1fr; }
.drm-form-row { grid-template-columns: 1fr; }
.drm-detail-hero-amounts { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.drm-hero-timeline { flex-direction: column; gap: 3px; }
.drm-wiz-add-item { grid-template-columns: 1fr; }
.drm-review-grid { grid-template-columns: 1fr; }
.drm-detail-footer { flex-wrap: wrap; }
}
@media (max-width: 380px) {
.drm-type-label { font-size: .72rem; }
.drm-type-desc { display: none; }
.drm-type-emoji { font-size: 1.5rem; }
}
/* ═══════════════════════════════════════════════════════════════════
AI INSIGHTS — Premium visual polish (2026 update)
═══════════════════════════════════════════════════════════════════ */
/* Tab bar — glass premium */
.ai2-tabbar {
background: linear-gradient(135deg, #0f5132 0%, #166534 60%, #15803d 100%) !important;
border-bottom: none !important;
padding: 12px 18px 0 !important;
gap: 4px !important;
}
.ai2-tab {
color: rgba(240,253,244,.7) !important;
border-radius: 10px 10px 0 0 !important;
padding: 9px 18px 11px !important;
font-size: .79rem !important;
font-weight: 600 !important;
transition: all .18s !important;
}
.ai2-tab svg { opacity: .7 !important; }
.ai2-tab:hover:not(.active) {
background: rgba(255,255,255,.12) !important;
color: #f0fdf4 !important;
}
.ai2-tab.active {
background: var(--surface) !important;
color: var(--accent) !important;
box-shadow: 0 -2px 0 var(--accent) inset !important;
}
.ai2-tab.active svg { opacity: 1 !important; }
/* Filter panel */
.ai2-filter-panel {
border-radius: 0 0 14px 14px !important;
border: 1px solid var(--border) !important;
border-top: none !important;
background: var(--surface) !important;
margin-bottom: 18px !important;
}
.ai2-params-toggle {
font-size: .77rem !important;
font-weight: 600 !important;
color: var(--text2) !important;
border: none !important;
background: transparent !important;
}
.ai2-params-toggle:hover {
background: var(--surface2) !important;
color: var(--accent) !important;
}
/* Analyze button — premium gradient */
.ai2-btn-analyze {
background: linear-gradient(135deg, #0f5132, #16a34a) !important;
border: none !important;
box-shadow: 0 4px 14px rgba(22,163,74,.30), inset 0 1px 0 rgba(255,255,255,.08) !important;
font-size: .84rem !important;
letter-spacing: .01em !important;
border-radius: 12px !important;
}
.ai2-btn-analyze:hover {
background: linear-gradient(135deg, #166534, #15803d) !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 24px rgba(22,163,74,.38) !important;
}
.ai2-btn-icon {
border-radius: 9px !important;
font-size: .74rem !important;
}
/* Result wrapper */
.ai2-result-wrap {
animation: aiResultFadeIn .3s ease both !important;
}
@keyframes aiResultFadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Empty state premium */
.ai-empty-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 56px 24px !important;
gap: 8px !important;
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 16px !important;
}
/* Chat send button green */
.ai-chat-send-btn {
background: linear-gradient(135deg, #15803d, #16a34a) !important;
border-radius: 10px !important;
}
/* Snapshots header */
.ai-snapshots-header {
background: linear-gradient(135deg, rgba(15,81,50,.06), rgba(22,163,74,.04)) !important;
border: 1px solid rgba(22,163,74,.14) !important;
border-radius: 14px !important;
margin-bottom: 14px !important;
}
/* ═══════════════════════════════════════════════════════════════════
PROGRAMADOS — Modal redesign (2026 update)
═══════════════════════════════════════════════════════════════════ */
/* Context tab bar — pill style */
#scContextTabBar {
background: var(--surface2) !important;
border-bottom: none !important;
border-radius: 0 !important;
padding: 10px 16px !important;
gap: 4px !important;
margin-top: 12px !important;
}
#scContextTabBar .tx-ctx-tab {
border-radius: 8px !important;
border-bottom: none !important;
margin-bottom: 0 !important;
padding: 7px 14px !important;
font-size: .77rem !important;
font-weight: 600 !important;
transition: all .15s !important;
}
#scContextTabBar .tx-ctx-tab.active {
background: var(--accent) !important;
color: #fff !important;
border-bottom: none !important;
box-shadow: 0 2px 8px rgba(22,163,74,.28) !important;
}
#scContextTabBar .tx-ctx-tab:hover:not(.active) {
background: var(--border) !important;
color: var(--text) !important;
}
/* Type tabs at top */
#scTypeTabs .tab {
font-size: .78rem !important;
font-weight: 600 !important;
padding: 7px 14px !important;
}
/* Category picker modernized */
.cat-picker-btn {
border-radius: 9px !important;
transition: border-color .15s, box-shadow .15s !important;
}
.cat-picker-btn:hover {
border-color: var(--accent) !important;
box-shadow: 0 0 0 3px rgba(22,163,74,.10) !important;
}
/* Notification channel cards — more modern */
.sc-channel-card {
border-radius: 12px !important;
padding: 14px !important;
transition: border-color .15s, box-shadow .15s !important;
background: var(--surface) !important;
border: 1.5px solid var(--border) !important;
}
.sc-channel-card:has(input[type=checkbox]:checked) {
border-color: var(--accent) !important;
background: rgba(22,163,74,.04) !important;
box-shadow: 0 0 0 3px rgba(22,163,74,.09) !important;
}
.sc-channel-title {
font-size: .84rem !important;
font-weight: 700 !important;
}
/* Frequency grid — pill buttons */
.sc-recurrence-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 7px !important;
}
.sc-freq-opt {
border-radius: 9px !important;
padding: 8px 10px !important;
font-size: .76rem !important;
font-weight: 600 !important;
text-align: center !important;
transition: all .15s !important;
border: 1.5px solid var(--border) !important;
}
.sc-freq-opt:has(input:checked) {
background: var(--accent) !important;
color: #fff !important;
border-color: var(--accent) !important;
box-shadow: 0 2px 8px rgba(22,163,74,.25) !important;
}
.sc-freq-opt:hover:not(:has(input:checked)) {
border-color: var(--accent) !important;
background: var(--surface2) !important;
}
/* Modal larger on desktop */
#scheduledModal .modal {
max-width: 600px !important;
}
/* Section header for recurrence */
#scCtxRecorrencia .form-group:first-child label,
#scCtxDetalhes .form-group:first-child label {
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
}
/* ═══════════════════════════════════════════════════════════════════
TRANSAÇÕES — Entrada modo Abas modernizado (2026 update)
═══════════════════════════════════════════════════════════════════ */
/* Tx context tab bar */
#txContextTabBar {
background: var(--surface2) !important;
border-bottom: none !important;
padding: 10px 16px !important;
gap: 4px !important;
margin-top: 10px !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
scrollbar-width: none !important;
}
#txContextTabBar .tx-ctx-tab {
border-radius: 8px !important;
border-bottom: none !important;
margin-bottom: 0 !important;
padding: 7px 13px !important;
font-size: .76rem !important;
font-weight: 600 !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
transition: all .15s !important;
}
#txContextTabBar .tx-ctx-tab.active {
background: var(--accent) !important;
color: #fff !important;
border-bottom: none !important;
box-shadow: 0 2px 8px rgba(22,163,74,.28) !important;
}
#txContextTabBar .tx-ctx-tab:hover:not(.active) {
background: var(--border) !important;
color: var(--text) !important;
}
/* Tx type tabs */
#txTypeTabs .tab {
font-size: .77rem !important;
font-weight: 600 !important;
padding: 7px 14px !important;
}
/* Date field prominence in Principal tab */
#txCtxPrincipal .form-group input[type="date"] {
border-color: var(--accent) !important;
border-width: 1.5px !important;
}
/* ═══════════════════════════════════════════════════════════════════
PROGRAMADOS — Próximos 10 dias: fixes de overflow + contorno (2026)
═══════════════════════════════════════════════════════════════════ */
/* Label "Hoje" / "Amanhã" com subtítulo de data */
.sup-group-dow-wrap {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.sup-group-dow--special {
font-size: .92rem;
font-weight: 800;
color: var(--accent);
line-height: 1.2;
}
.sup-group-date-sub {
font-size: .68rem;
font-weight: 500;
color: var(--muted);
line-height: 1.2;
white-space: nowrap;
}
/* Pill "Hoje" destacado com ícone de pulso */
.sup-day-pill--today {
animation: supTodayPulse 2.5s ease-in-out infinite;
}
@keyframes supTodayPulse {
0%, 100% { box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 40%, transparent); }
50% { box-shadow: 0 2px 18px color-mix(in srgb, var(--accent) 60%, transparent); }
}
/* Garantir que pill nunca extrapole o grupo-hdr */
.sup-group-left {
flex: 1;
min-width: 0;
overflow: hidden;
}
.sup-group-hdr {
flex-wrap: nowrap; /* evita quebra de linha */
}
/* Painel flutuante — contorno e sombra premium */
#scUpcomingPanel {
border: 1.5px solid color-mix(in srgb, var(--accent) 32%, var(--border)) !important;
border-radius: 16px !important;
box-shadow:
0 4px 6px -1px rgba(0,0,0,.06),
0 8px 24px -4px color-mix(in srgb, var(--accent) 14%, transparent),
inset 0 1px 0 rgba(255,255,255,.6) !important;
overflow: hidden !important;
}
/* Header do painel — gradiente sutil verde */
#scUpcomingPanel .sc-panel__header {
background: linear-gradient(
135deg,
color-mix(in srgb, var(--accent) 10%, var(--surface2)) 0%,
color-mix(in srgb, var(--accent) 4%, var(--surface2)) 100%
) !important;
border-bottom: 1.5px solid color-mix(in srgb, var(--accent) 20%, var(--border)) !important;
padding: 12px 16px 10px !important;
}
/* Barra lateral esquerda colorida no header */
#scUpcomingPanel .sc-panel__header::before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--accent);
border-radius: 0 2px 2px 0;
}
#scUpcomingPanel .sc-panel__header { position: relative; }
/* Badge de total — mais destacado */
#scUpcomingPanel .sc-panel__badge {
background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
color: var(--accent) !important;
border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent) !important;
font-weight: 700 !important;
border-radius: 20px !important;
padding: 3px 10px !important;
}
/* Grupo "Hoje" — header mais destacado */
.sup-group:has(.sup-item--today) .sup-group-hdr {
background: linear-gradient(
135deg,
color-mix(in srgb, var(--accent) 12%, var(--surface2)) 0%,
color-mix(in srgb, var(--accent) 5%, var(--surface2)) 100%
);
border-left: 3px solid var(--accent);
border-bottom: 1.5px solid color-mix(in srgb, var(--accent) 25%, var(--border));
}
/* Mobile: pill "Amanhã" mais compacto */
@media (max-width: 480px) {
.sup-day-pill--today,
.sup-day-pill--tmrw { padding: 5px 8px; }
.sup-day-pill--today span,
.sup-day-pill--tmrw span { font-size: .7rem !important; }
.sup-group-date-sub { display: none; } /* muito pouco espaço no mobile */
.sup-group-dow--special { font-size: .85rem; }
}
/* ══════════════════════════════════════════════════════════════════
LOGIN SCREEN — Grid quadriculado + Orbs (mesma linguagem da landing)
Fonte única de verdade: reutilizar exatamente as mesmas cores/proporções
do .hgrid e .hbg da landing page (index.html)
══════════════════════════════════════════════════════════════════ */
/* Grid quadriculado — idêntico ao .hgrid da landing */
.login-hgrid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(125,194,66,.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(125,194,66,.07) 1px, transparent 1px);
background-size: 48px 48px;
pointer-events: none;
z-index: 0;
}
/* Orbs — mesma linguagem dos .o1/.o2/.o3 da landing */
.login-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
z-index: 0;
animation: login-orb-drift 20s ease-in-out infinite alternate;
}
.login-orb1 {
width: 480px; height: 480px;
background: rgba(45,106,68,.22);
top: -140px; left: -100px;
animation-duration: 24s;
}
.login-orb2 {
width: 360px; height: 360px;
background: rgba(125,194,66,.08);
bottom: -60px; right: -80px;
animation-duration: 18s;
animation-direction: alternate-reverse;
}
.login-orb3 {
width: 240px; height: 240px;
background: rgba(26,61,39,.18);
top: 42%; left: 55%;
animation-duration: 20s;
}
@keyframes login-orb-drift {
0% { transform: translate(0,0); }
100% { transform: translate(28px,-22px); }
}
/* Card do login — assegura que fique acima do fundo */
.login-card { position: relative; z-index: 1; }
/* ── Inputs fintech modernos ── */
.login-card-a input[type="email"],
.login-card-a input[type="password"],
.login-card-a input[type="text"],
.login-input {
width: 100%;
padding: 12px 16px !important;
border: 1.5px solid #e5e7eb !important;
border-radius: 12px !important;
font-size: .9rem !important;
font-family: var(--font-sans) !important;
outline: none !important;
box-sizing: border-box !important;
background: #ffffff !important;
color: #1a1714 !important;
transition: border-color .18s, box-shadow .18s !important;
box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
.login-card-a input[type="email"]:focus,
.login-card-a input[type="password"]:focus,
.login-card-a input[type="text"]:focus,
.login-input:focus {
border-color: #2a6049 !important;
box-shadow: 0 0 0 3px rgba(42,96,73,.12), 0 1px 3px rgba(0,0,0,.04) !important;
background: #ffffff !important;
}
/* Labels dos campos */
.login-card-a .form-group label,
#loginPanelPassword label {
font-size: .78rem !important;
font-weight: 700 !important;
color: #374151 !important;
letter-spacing: .01em;
margin-bottom: 6px !important;
display: block !important;
}
/* Botão Entrar */
.login-btn,
#loginBtn {
width: 100%;
padding: 13px !important;
background: linear-gradient(135deg, #1e5c42, #2a6049) !important;
color: #fff !important;
border: none !important;
border-radius: 12px !important;
font-size: .95rem !important;
font-weight: 700 !important;
cursor: pointer !important;
font-family: var(--font-sans) !important;
letter-spacing: .01em;
box-shadow: 0 4px 16px rgba(30,92,66,.28) !important;
transition: background .18s, box-shadow .18s, transform .12s !important;
}
.login-btn:hover,
#loginBtn:hover {
background: linear-gradient(135deg, #16493a, #1e5c42) !important;
box-shadow: 0 6px 24px rgba(30,92,66,.38) !important;
transform: translateY(-1px) !important;
}
.login-btn:active,
#loginBtn:active {
transform: translateY(0) !important;
box-shadow: 0 2px 8px rgba(30,92,66,.2) !important;
}
/* ══════════════════════════════════════════════════════════════════
DARK MODE — Toggle + Variáveis + Topbar
══════════════════════════════════════════════════════════════════ */
/* Variáveis dark mode — aplicadas via body.dark ou html.dark */
body.dark, html.dark body {
--bg: #0f1a12;
--bg2: #162219;
--surface: #1c2e20;
--surface2: #233627;
--border: #2d4433;
--border2: #3a5540;
--text: #e8f0eb;
--text2: #b8ccbf;
--muted: #7a9e86;
--muted2: #5a7a65;
--accent-lt: rgba(42,96,73,.25);
--shadow-sm: 0 1px 4px rgba(0,0,0,.24), 0 2px 12px rgba(0,0,0,.16);
--shadow: 0 4px 24px rgba(0,0,0,.32), 0 1px 4px rgba(0,0,0,.20);
--shadow-lg: 0 12px 48px rgba(0,0,0,.48), 0 4px 16px rgba(0,0,0,.28);
}
body.dark {
background: var(--bg);
color: var(--text);
}
/* Topbar em dark mode: manter fundo verde escuro com contraste correto */
body.dark .topbar {
background: linear-gradient(135deg, #0a2d1a 0%, #0f4023 52%, #165c33 100%);
border-bottom-color: rgba(255,255,255,.08);
box-shadow: 0 8px 24px rgba(0,0,0,.36);
}
/* Topbar em light mode — já ok com verde escuro, mas garantir contraste */
.topbar {
color: #ffffff;
}
.topbar .hamburger { color: rgba(255,255,255,.8); }
.topbar .hamburger:hover { background: rgba(255,255,255,.12); color: #fff; }
/* Superfícies em dark mode */
body.dark .modal,
body.dark .modal-overlay > .modal { background: var(--surface); border: 1px solid var(--border); }
body.dark .cfg-card { background: var(--surface2); border-color: var(--border); }
body.dark .table-wrap { background: var(--surface); border-color: var(--border); }
body.dark input,
body.dark select,
body.dark textarea {
background: var(--surface2);
border-color: var(--border);
color: var(--text);
}
body.dark input::placeholder,
body.dark textarea::placeholder { color: var(--muted); }
/* Cards e painéis */
body.dark .card,
body.dark .stat-card,
body.dark .acc-card { background: var(--surface); border-color: var(--border); }
/* Sidebar — já é verde escuro, ajuste sutil */
body.dark .sidebar {
background: linear-gradient(160deg, #071a0f 0%, #10321c 60%, #081509 100%);
}
/* Botão dark mode toggle no menu do usuário */
.dark-mode-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 9px 12px;
background: none;
border: none;
cursor: pointer;
font-size: .85rem;
font-weight: 500;
color: var(--text);
border-radius: 8px;
text-align: left;
transition: background .12s;
font-family: var(--font-sans);
}
.dark-mode-toggle:hover { background: var(--bg2); }
.dark-mode-toggle-track {
width: 36px; height: 20px;
border-radius: 100px;
background: var(--border2);
position: relative;
transition: background .2s;
flex-shrink: 0;
}
body.dark .dark-mode-toggle-track { background: var(--accent); }
.dark-mode-toggle-thumb {
width: 14px; height: 14px;
border-radius: 50%;
background: #fff;
position: absolute;
top: 3px; left: 3px;
transition: transform .2s;
box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
body.dark .dark-mode-toggle-thumb { transform: translateX(16px); }
/* ══════════════════════════════════════════════════════════════════
2FA — Tela de verificação de código
══════════════════════════════════════════════════════════════════ */
#twoFaArea {
display: none;
}
.twofa-title {
font-size: 1rem;
font-weight: 700;
color: #1a1714;
margin-bottom: 6px;
text-align: center;
}
.twofa-sub {
font-size: .82rem;
color: #6b7280;
text-align: center;
line-height: 1.55;
margin-bottom: 22px;
}
.twofa-code-input {
width: 100%;
padding: 16px !important;
font-size: 1.6rem !important;
font-weight: 700 !important;
letter-spacing: .32em !important;
text-align: center !important;
border: 2px solid #e5e7eb !important;
border-radius: 14px !important;
background: #fff !important;
color: #1a1714 !important;
outline: none !important;
transition: border-color .18s, box-shadow .18s !important;
font-family: 'Courier New', monospace !important;
box-sizing: border-box !important;
}
.twofa-code-input:focus {
border-color: #2a6049 !important;
box-shadow: 0 0 0 3px rgba(42,96,73,.14) !important;
}
.twofa-actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 18px;
}
.twofa-trust-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
}
.twofa-trust-row label {
font-size: .8rem;
color: #6b7280;
cursor: pointer;
user-select: none;
}
.twofa-resend {
background: none;
border: none;
color: #2a6049;
font-size: .8rem;
cursor: pointer;
text-align: center;
text-decoration: underline;
font-family: var(--font-sans);
padding: 4px 0;
}
.twofa-back {
background: none;
border: none;
color: #6b7280;
font-size: .78rem;
cursor: pointer;
text-align: center;
font-family: var(--font-sans);
padding: 4px 0;
}
/* ══════════════════════════════════════════════════════════════════
AGENTE — Chips de capacidades (guia "O que posso fazer")
══════════════════════════════════════════════════════════════════ */
.agent-cap-chip {
display: block;
width: 100%;
text-align: left;
padding: 7px 10px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 8px;
font-size: .8rem;
font-family: var(--font-sans);
color: var(--text);
cursor: pointer;
transition: background .12s, border-color .12s;
font-weight: 500;
}
.agent-cap-chip:hover {
background: var(--accent-lt);
border-color: var(--accent);
color: var(--accent);
}
.agent-chip--highlight {
font-weight: 700;
}
|