/* ============================================================
   GlobalTrust Bank — Dashboard & App Layout
   ============================================================ */

/* ── LAYOUT ─────────────────────────────────────────────── */
.layout { display:flex; min-height:100vh; overflow-x:hidden; }

/* ── SIDEBAR ────────────────────────────────────────────── */
.sidebar { width:240px; flex-shrink:0; background:var(--navy); display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:200; transition:transform .25s ease; overflow:hidden; }
.sidebar__logo { padding:1.25rem 1.25rem 1rem; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; gap:.625rem; flex-shrink:0; }
.sidebar__logo-mark { width:32px; height:32px; background:var(--gold); border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:.85rem; color:var(--navy); flex-shrink:0; }
.sidebar__logo-text { display:flex; flex-direction:column; min-width:0; }
.sidebar__logo-text span:first-child { font-family:var(--font-display); font-weight:600; font-size:.9375rem; color:var(--white); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar__logo-text span:last-child { font-size:.55rem; font-family:var(--font-body); font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-light); }
.sidebar__nav { flex:1; overflow-y:auto; overflow-x:hidden; padding:.75rem 0; scrollbar-width:none; }
.sidebar__nav::-webkit-scrollbar { display:none; }
.sidebar__section { margin-bottom:.5rem; }
.sidebar__section-label { font-size:.625rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.25); padding:.75rem 1.25rem .25rem; display:block; }
.sidebar__link { display:flex; align-items:center; gap:.75rem; padding:.5rem 1.25rem; font-size:.8125rem; font-weight:400; color:rgba(255,255,255,.6); border-left:2px solid transparent; transition:all .15s ease; white-space:nowrap; text-decoration:none; }
.sidebar__link:hover { color:var(--white); background:rgba(255,255,255,.06); }
.sidebar__link.is-active { color:var(--white); background:rgba(201,168,76,.1); border-left-color:var(--gold); font-weight:500; }
.sidebar__link svg { flex-shrink:0; opacity:.7; width:16px; height:16px; }
.sidebar__link.is-active svg { opacity:1; }
.sidebar__footer { padding:.875rem 1.25rem; border-top:1px solid rgba(255,255,255,.08); flex-shrink:0; display:flex; align-items:center; gap:.5rem; }
.sidebar__user { display:flex; align-items:center; gap:.625rem; flex:1; min-width:0; }
.sidebar__avatar { width:30px; height:30px; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; color:var(--navy); flex-shrink:0; }
.sidebar__user-info { flex:1; min-width:0; }
.sidebar__user-name { font-size:.8125rem; font-weight:500; color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar__user-role { font-size:.65rem; color:rgba(255,255,255,.35); text-transform:capitalize; }
.sidebar__logout { width:28px; height:28px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; opacity:.4; transition:opacity .15s,background .15s; }
.sidebar__logout:hover { opacity:1; background:rgba(255,255,255,.08); }

/* ── MAIN ───────────────────────────────────────────────── */
.main { flex:1; margin-left:240px; min-width:0; min-height:100vh; background:var(--off-white); display:flex; flex-direction:column; overflow-x:hidden; }

/* ── TOPBAR ─────────────────────────────────────────────── */
.topbar { background:var(--white); border-bottom:1px solid var(--gray-200); padding:0 1.5rem; height:60px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; flex-shrink:0; gap:1rem; }
.topbar__left { display:flex; align-items:center; gap:.875rem; min-width:0; flex:1; }
.topbar__title { font-family:var(--font-display); font-size:1.125rem; font-weight:600; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar__menu-btn { display:none; width:36px; height:36px; border-radius:var(--radius-sm); align-items:center; justify-content:center; color:var(--gray-500); flex-shrink:0; transition:background var(--transition); }
.topbar__menu-btn:hover { background:var(--gray-100); }
.topbar__actions { display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.topbar__date { font-size:.75rem; color:var(--gray-400); white-space:nowrap; }
.topbar__notif-btn { position:relative; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gray-500); transition:background var(--transition); flex-shrink:0; }
.topbar__notif-btn:hover { background:var(--gray-100); }
.topbar__notif-dot { position:absolute; top:5px; right:5px; width:8px; height:8px; background:var(--red); border-radius:50%; border:2px solid var(--white); }
.topbar__avatar { width:34px; height:34px; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; font-size:.8125rem; font-weight:700; color:var(--navy); text-decoration:none; flex-shrink:0; }

/* ── PAGE CONTENT ───────────────────────────────────────── */
.page-content { padding:1.5rem; flex:1; min-width:0; overflow-x:hidden; }

/* ── WELCOME BANNER ─────────────────────────────────────── */
.welcome-banner { background:linear-gradient(120deg,var(--navy) 0%,var(--navy-light) 100%); border-radius:var(--radius-xl); padding:1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1.25rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.welcome-banner__text { min-width:0; flex:1; }
.welcome-banner__greeting { font-size:.75rem; color:var(--gold-light); font-weight:500; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.25rem; }
.welcome-banner__name { font-family:var(--font-display); font-size:1.375rem; font-weight:600; color:var(--white); margin-bottom:.125rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.welcome-banner__sub { font-size:.8125rem; color:rgba(255,255,255,.45); }
.welcome-banner__quick-actions { display:flex; gap:.625rem; flex-wrap:wrap; flex-shrink:0; }
.quick-action { display:flex; flex-direction:column; align-items:center; gap:.375rem; text-decoration:none; transition:transform .15s; }
.quick-action:hover { transform:translateY(-2px); }
.quick-action__icon { width:44px; height:44px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:var(--white); transition:background .15s; }
.quick-action:hover .quick-action__icon { background:rgba(201,168,76,.2); border-color:rgba(201,168,76,.4); }
.quick-action span { font-size:.7rem; color:rgba(255,255,255,.55); font-weight:500; white-space:nowrap; }

/* ── STATS GRID ─────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.25rem; }
.stat-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:1.25rem; }
.stat-card__label { font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-400); margin-bottom:.5rem; }
.stat-card__value { font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--navy); line-height:1.1; margin-bottom:.375rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stat-card__change { font-size:.75rem; display:flex; align-items:center; gap:.25rem; color:var(--gray-400); }
.stat-card__change.positive { color:var(--green); }
.stat-card__change.negative { color:var(--red); }

/* ── DASH GRID ──────────────────────────────────────────── */
.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.dash-section { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:1.25rem; min-width:0; }
.dash-section--accounts     { grid-column:1; grid-row:1; }
.dash-section--transactions { grid-column:2; grid-row:1/3; }
.dash-section--chart        { grid-column:1; grid-row:2; }
.dash-section--kyc          { grid-column:1/3; grid-row:3; padding:0; border:none; background:none; }
.dash-section__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; gap:.5rem; }
.dash-section__header h3 { font-size:.9375rem; font-weight:600; color:var(--navy); }
.dash-section__link { font-size:.75rem; color:var(--navy); font-weight:500; text-decoration:underline; text-underline-offset:2px; text-decoration-color:transparent; transition:text-decoration-color .15s; white-space:nowrap; flex-shrink:0; }
.dash-section__link:hover { text-decoration-color:var(--navy); }

/* ── ACCOUNT CARDS ──────────────────────────────────────── */
.account-cards-scroll { display:flex; gap:.875rem; overflow-x:auto; padding-bottom:.5rem; margin-bottom:.875rem; scrollbar-width:thin; scrollbar-color:var(--gray-200) transparent; }
.account-cards-scroll::-webkit-scrollbar { height:4px; }
.account-cards-scroll::-webkit-scrollbar-thumb { background:var(--gray-200); border-radius:2px; }
.account-card { min-width:195px; max-width:215px; flex-shrink:0; border-radius:var(--radius-lg); padding:1.25rem; display:flex; flex-direction:column; gap:.875rem; position:relative; overflow:hidden; }
.account-card__type { font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-light); }
.account-card__balance { font-family:var(--font-display); font-size:1.375rem; font-weight:700; color:var(--white); }
.account-card__number { font-size:.75rem; color:rgba(255,255,255,.5); font-family:monospace; }
.account-card-skeleton { min-width:195px; height:130px; border-radius:var(--radius-lg); flex-shrink:0; }
.dash-new-account { width:100%; display:flex; align-items:center; justify-content:center; gap:.5rem; border:1.5px dashed var(--gray-200) !important; color:var(--gray-500) !important; font-size:.8125rem; padding:.625rem; border-radius:var(--radius-md); background:transparent !important; }
.dash-new-account:hover { border-color:var(--navy) !important; color:var(--navy) !important; }

/* ── TRANSACTION LIST ───────────────────────────────────── */
.tx-skeleton-list { display:flex; flex-direction:column; gap:.75rem; }
.tx-skeleton { height:48px; border-radius:var(--radius-sm); }
.tx-item { display:flex; align-items:center; gap:.75rem; padding:.625rem 0; border-bottom:1px solid var(--gray-100); min-width:0; }
.tx-item:last-child { border-bottom:none; }
.tx-item__icon { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.65rem; font-weight:700; }
.tx-item__icon--credit   { background:var(--green-light); color:var(--green); }
.tx-item__icon--debit    { background:var(--red-light); color:var(--red); }
.tx-item__icon--transfer { background:var(--blue-light); color:var(--blue); }
.tx-item__info { flex:1; min-width:0; }
.tx-item__desc { font-size:.8125rem; font-weight:500; color:var(--gray-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tx-item__date { font-size:.7rem; color:var(--gray-400); margin-top:.125rem; }
.tx-item__amount { font-size:.875rem; font-weight:600; text-align:right; flex-shrink:0; }
.tx-item__amount.credit { color:var(--green); }
.tx-item__amount.debit  { color:var(--gray-900); }
.tx-empty { text-align:center; padding:2rem 1rem; color:var(--gray-400); font-size:.875rem; }

/* ── CHART ──────────────────────────────────────────────── */
.chart-wrap { position:relative; height:190px; width:100%; }

/* ── KYC ALERT ──────────────────────────────────────────── */
.kyc-alert { display:flex; align-items:center; gap:1rem; background:linear-gradient(120deg,#FFFDF5 0%,#FFF8E8 100%); border:1px solid #E5D48A; border-radius:var(--radius-lg); padding:1.125rem 1.25rem; flex-wrap:wrap; }
.kyc-alert__icon { width:40px; height:40px; background:var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--navy); flex-shrink:0; }
.kyc-alert__text { flex:1; min-width:180px; }
.kyc-alert__text h4 { font-size:.9rem; color:var(--navy); margin-bottom:.125rem; }
.kyc-alert__text p { font-size:.8rem; color:var(--gray-500); }

/* ── ACCOUNT TYPE MODAL ─────────────────────────────────── */
.account-type-grid { display:flex; flex-direction:column; gap:.625rem; }
.account-type-card { display:flex; align-items:center; gap:.875rem; padding:.875rem; border:1.5px solid var(--gray-200); border-radius:var(--radius-md); cursor:pointer; transition:all .15s; }
.account-type-card:hover { border-color:var(--navy); background:var(--gray-100); }
.account-type-card.is-selected { border-color:var(--navy); background:var(--blue-light); }
.account-type-card__icon { width:40px; height:40px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.account-type-card h5 { font-size:.875rem; color:var(--navy); margin-bottom:.125rem; }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:1200px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1024px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.is-open { transform:translateX(0); box-shadow:4px 0 24px rgba(0,0,0,.15); }
  .main { margin-left:0; }
  .topbar__menu-btn { display:flex; }
  .dash-grid { grid-template-columns:1fr; }
  .dash-section--accounts,.dash-section--transactions,.dash-section--chart,.dash-section--kyc { grid-column:1; grid-row:auto; }
}
@media (max-width:768px) {
  .page-content { padding:1rem; }
  .topbar { padding:0 1rem; }
  .topbar__date { display:none; }
  .welcome-banner { padding:1.25rem; }
  .welcome-banner__name { font-size:1.125rem; }
  .stats-grid { grid-template-columns:1fr 1fr; gap:.75rem; }
  .stat-card { padding:1rem; }
  .stat-card__value { font-size:1.25rem; }
}
@media (max-width:480px) {
  .welcome-banner__quick-actions { gap:.5rem; }
  .quick-action__icon { width:38px; height:38px; }
}