/* =========================================================================
   CBNA DASHBOARD — Professional Banking App Skin (scoped to .ft-app only)
   Community Bank N.A. · CBNA light palette (navy #003E7E / poppy #CB4A20 /
   Figtree) · zero collision: every selector here is prefixed `.ft-app`.
   This file is loaded ONLY on user pages via @push('style').
   ========================================================================= */

:root{
    --ft-dash-bg: url(data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M 0 0 L 120 0 L 120 120 Z' fill='%23F4F6F9'/%3E%3C/svg%3E);
}

.ft-app{
    --ft-accent: #003E7E;          /* CBNA navy  */
    --ft-accent2: #CB4A20;         /* CBNA poppy */
    --ft-bg: #F4F6F9;
    --ft-card: #FFFFFF;
    --ft-card-2: #F8FAFC;
    --ft-border: #E6EAF0;
    --ft-text: rgba(17,27,41,.92);
    --ft-muted: rgba(17,27,41,.56);
    --ft-success: #1E7B5B;
    --ft-danger: #C0392B;
    --ft-warn: #B45309;
    --ft-shadow: 0 12px 34px rgba(17,27,41,.08);
    --ft-shadow-lg: 0 24px 60px rgba(17,27,41,.14);
    --ft-radius: 18px;
    --ft-radius-lg: 22px;
}

/* ---------- Desktop: hero balance card (CBNA navy panel + glass on top) ---------- */
.ft-app .user-profile-card{
    position: relative;
    border: none !important;
    border-radius: var(--ft-radius-lg) !important;
    background: linear-gradient(135deg, #003E7E 0%, #0A4F97 45%, #CB4A20 125%) !important;
    box-shadow: var(--ft-shadow-lg) !important;
    color: #fff !important;
    overflow: hidden;
}
.ft-app .user-profile-card::before{
    content: "";
    position: absolute;
    inset: -220px -120px auto auto;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.18), transparent 55%);
}
.ft-app .user-profile-card::after{
    content: "";
    position: absolute;
    inset: auto auto -160px -120px;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle at 40% 60%, rgba(203,74,32,.35), transparent 60%);
}
.ft-app .user-profile-card *{ position: relative; z-index: 1; }
.ft-app .user-profile-card .title{
    color: rgba(255,255,255,.78) !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
}
.ft-app .user-profile-card .acc-balance{
    color: #fff !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
}
.ft-app .user-profile-card .acc-num{
    color: rgba(255,255,255,.82) !important;
    border-top: 1px solid rgba(255,255,255,.18) !important;
    padding-top: 12px;
}
.ft-app .user-profile-card .acc-num strong{ color:#fff; }
.ft-app .user-profile-card .buttons a{
    border-radius: 14px !important;
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    color: #fff !important;
    backdrop-filter: blur(6px);
}
.ft-app .user-profile-card .buttons a:hover{
    background: rgba(255,255,255,.2) !important;
}

/* ---------- Stat tiles (light, flat, CBNA-accent right border) ---------- */
.ft-app .single-spec-stat,
.ft-app .single-spec-stat .single-spec-stat,
.ft-app .single-user-stat-card{
    border: 1px solid var(--ft-border) !important;
    border-radius: var(--ft-radius) !important;
    background: var(--ft-card) !important;
    box-shadow: var(--ft-shadow) !important;
}
.ft-app .single-spec-stat{ border-left: 4px solid var(--ft-accent) !important; }
.ft-app .single-spec-stat:hover{ transform: translateY(-2px); transition: .18s ease; }
.ft-app .single-spec-stat .top .icon{
    background: rgba(0,62,126,.08) !important;
    border-radius: 12px !important;
    border: none !important;
}
.ft-app .single-spec-stat .top .title{ font-weight: 700; color: var(--ft-text); }
.ft-app .single-spec-stat .text p{ color: var(--ft-muted); }
.ft-app .single-spec-stat .bottom .amount{ font-weight: 800; color: var(--ft-accent); }

/* ---------- Quick deposit / Get Paid cards ---------- */
.ft-app .qd-dash-card{
    border-radius: var(--ft-radius) !important;
    background: var(--ft-card) !important;
    border: 1px solid var(--ft-border) !important;
    box-shadow: var(--ft-shadow) !important;
}
.ft-app .qd-dash-icon{
    border-radius: 14px !important;
    border: 1px solid rgba(0,62,126,.14) !important;
    background: rgba(0,62,126,.06) !important;
}
.ft-app .qd-dash-title{ color: var(--ft-text) !important; font-weight: 700; }
.ft-app .qd-dash-sub{ color: var(--ft-muted) !important; }

/* ---------- App-style quick actions strip (desktop + mobile) ---------- */
.ft-app .qd-dash-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- Recent transactions: professional list ---------- */
.ft-app .ft-tx-card{
    background: var(--ft-card) !important;
    border: 1px solid var(--ft-border) !important;
    border-radius: var(--ft-radius) !important;
    box-shadow: var(--ft-shadow) !important;
    color: var(--ft-text) !important;
}
.ft-app .ft-tx-ico{
    background: rgba(0,62,126,.07) !important;
    border: 1px solid rgba(0,62,126,.12) !important;
    color: var(--ft-accent);
}
.ft-app .ft-tx-title{ color: var(--ft-text) !important; font-weight: 700; }
.ft-app .ft-tx-meta, .ft-app .ft-tx-meta span, .ft-app .ft-tx-meta .ft-tag{
    color: var(--ft-muted) !important;
}
.ft-app .ft-tag{
    background: rgba(17,27,41,.05) !important;
    border: 1px solid rgba(17,27,41,.08) !important;
}

/* ---------- Status pills (CBNA) ---------- */
.ft-app .badge-success, .ft-app .badge-pending, .ft-app .badge-failed{
    border-radius: 999px !important;
    padding: 5px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: capitalize;
}
.ft-app .badge-success{ background: rgba(30,123,91,.12) !important; color: #1E7B5B !important; }
.ft-app .badge-pending{ background: rgba(180,83,9,.12) !important; color: #B45309 !important; }
.ft-app .badge-failed{ background: rgba(192,57,43,.12) !important; color: #C0392B !important; }

/* ---------- Site cards reused (scope to ft-app only) ---------- */
.ft-app .site-card{
    background: var(--ft-card) !important;
    border: 1px solid var(--ft-border) !important;
    border-radius: var(--ft-radius) !important;
    box-shadow: var(--ft-shadow) !important;
}
.ft-app .site-card-header .title-small{ color: var(--ft-text) !important; font-weight: 800; }
.ft-app .site-card-header .card-header-links a{ color: var(--ft-accent) !important; }
.ft-app .site-card-header-link{ color: var(--ft-accent) !important; }

/* ---------- Desktop stats band ---------- */
.ft-app .single-user-stat-card{
    border-left: 4px solid var(--ft-accent) !important;
}
.ft-app .single-user-stat-card .icon img{ filter: none; }
.ft-app .single-user-stat-card .number{ color: var(--ft-text) !important; font-weight: 800; }
.ft-app .single-user-stat-card .title{ color: var(--ft-muted) !important; }

/* ---------- Links / arrows ---------- */
.ft-app .ex-link, .ft-app .ex-arrow{ color: var(--ft-accent) !important; }
.ft-app .ft-tx-amt .green-color{ color: var(--ft-success) !important; }
.ft-app .ft-tx-amt .red-color{ color: var(--ft-danger) !important; }

/* ---------- Mobile polish ---------- */
@media (max-width: 768px){
    .ft-app .user-profile-card .acc-balance{ font-size: 28px !important; }
    .ft-app .ft-topbar{ background:#fff; border-bottom:1px solid var(--ft-border); }
    .ft-app .ft-topbar .ft-greet .name{ color: var(--ft-text); }
    .ft-app .ft-topbar .ft-greet .sub{ color: var(--ft-muted); }
}