/* Appel Bank layout identity layer — purpose-built banking workspace */
:root{
  --ab-gold:#c9a227;
  --ab-gold-soft:#f6efcf;
  --ab-ink:#0c1b33;
  --ab-navy:#07162c;
  --ab-blue:#143d6b;
  --ab-paper:#f7f8fb;
}

/* Global shell: denser, more bank-operations than generic SaaS */
.layout{grid-template-columns:228px minmax(0,1fr)}
.sidebar{padding:14px 10px 16px;background:#fbfcfe}
.sidebar a{min-height:35px;padding:0 11px;border-radius:6px;font-size:12.5px;margin-bottom:1px}
.nav-label{padding:16px 11px 6px;font-size:9px}
.content{max-width:none;padding:22px 26px 40px}

/* Account workspace */
.account-shell{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:18px;align-items:start}
.account-main{min-width:0}
.account-rail{position:sticky;top:98px;display:flex;flex-direction:column;gap:12px}

.account-banner{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;
  padding:18px 20px;margin:0 0 10px;border:1px solid #d7dfeb;border-left:5px solid var(--ab-gold);
  border-radius:10px;background:linear-gradient(135deg,#fff 0%,#f7f9fd 68%,#eef3fa 100%);
  box-shadow:0 4px 14px rgba(14,30,55,.05)
}
.account-banner .eyebrow{font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#68758a}
.account-number{display:flex;align-items:center;gap:12px;margin-top:4px}
.account-number h1{font-size:30px;margin:0;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.account-title-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;color:#667085;font-size:11px}
.account-title-meta span{padding-right:8px;border-right:1px solid #d7dde7}
.account-title-meta span:last-child{border-right:0}
.account-balance-stack{text-align:right;min-width:180px}
.account-balance-stack small{display:block;color:#7b8798;text-transform:uppercase;font-size:9.5px;font-weight:900;letter-spacing:.08em}
.account-balance-stack strong{display:block;font-size:27px;margin-top:3px;font-variant-numeric:tabular-nums;color:var(--ab-ink)}
.account-balance-stack .available{font-size:12px;color:#667085;margin-top:5px}

.account-tabs{
  display:flex;gap:0;overflow:auto;margin:0 0 14px;border:1px solid #dfe5ee;border-radius:8px;background:#fff;
  box-shadow:0 2px 6px rgba(15,23,42,.03)
}
.account-tabs a{padding:10px 14px;color:#455468;font-size:11.5px;font-weight:800;border-right:1px solid #e5e9f0;white-space:nowrap}
.account-tabs a:first-child{color:#fff;background:linear-gradient(180deg,#173d68,#0d2d51)}
.account-tabs a:hover{background:#f2f5f9;color:#0b1730}
.account-tabs a:first-child:hover{background:linear-gradient(180deg,#173d68,#0d2d51);color:#fff}

.account-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #dfe5ee;border-radius:8px;background:#fff;margin-bottom:14px;overflow:hidden}
.account-fact{padding:11px 13px;border-right:1px solid #e6eaf0;border-bottom:1px solid #e6eaf0;min-height:62px}
.account-fact:nth-child(4n){border-right:0}
.account-fact:nth-last-child(-n+4){border-bottom:0}
.account-fact span{display:block;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.075em;color:#7b8798}
.account-fact strong{display:block;margin-top:5px;font-size:13.5px;color:#17243a}

.bank-panel{border-radius:8px;box-shadow:0 3px 12px rgba(15,23,42,.04)}
.bank-panel .panel-head{padding:11px 14px;background:linear-gradient(180deg,#fbfcfe,#f4f7fb)}
.bank-panel .panel-head h2{font-size:15px;text-transform:uppercase;letter-spacing:.035em}

/* Real statement/ledger feel */
.ledger-panel{border-radius:8px;border-color:#d7dfea}
.ledger-head{background:linear-gradient(180deg,#102945,#0b1f38)!important;color:#fff;border-bottom:3px solid var(--ab-gold)!important}
.ledger-head h2{font-size:15px!important;letter-spacing:.06em;text-transform:uppercase}
.ledger-head .muted{color:rgba(255,255,255,.65)}
.ledger-head .queue-note{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.12)}
.ledger-table th{background:#edf1f6;color:#34445b;border-bottom:1px solid #cfd8e5;padding:8px 10px;font-size:9.5px}
.ledger-table td{padding:8px 10px;font-size:11.5px;font-variant-numeric:tabular-nums}
.ledger-table tbody tr:nth-child(even){background:#fbfcfe}
.ledger-table tbody tr:hover{background:#fff8dc}
.ledger-description strong{font-size:11.5px;color:#14213a}
.ledger-reference{font-size:9.5px;color:#7b8798;margin-top:2px}
.money-col{text-align:right!important;font-variant-numeric:tabular-nums}
.debit-col{color:#8d2b22}
.credit-col{color:#0d6b4b}
.balance-col{background:rgba(20,61,107,.035);border-left:1px solid #dce3ed}

/* Relationship block behaves like CIF ownership information, not generic table card */
.relationship-panel table th,.relationship-panel table td{font-size:11px;padding:8px 9px}
.relationship-panel .panel-head{border-bottom:2px solid #d6dde8}

/* Right-side operator rail */
.rail-card{background:#fff;border:1px solid #dce3ed;border-radius:8px;overflow:hidden;box-shadow:0 3px 10px rgba(15,23,42,.04)}
.rail-title{padding:9px 11px;background:#eef2f7;border-bottom:1px solid #dce3ed;font-size:9.5px;font-weight:900;text-transform:uppercase;letter-spacing:.09em;color:#526176}
.rail-body{padding:10px 11px}
.rail-actions{display:grid;gap:7px}
.rail-actions a{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;border:1px solid #dce3ed;border-radius:6px;background:#fff;color:#1d3553;font-size:11px;font-weight:800}
.rail-actions a:after{content:'›';color:var(--ab-gold);font-size:17px;line-height:1}
.rail-actions a:hover{background:#f7f9fc;border-color:#b9c7d9}
.rail-kv{display:grid;grid-template-columns:1fr auto;gap:7px 10px;font-size:10.5px}
.rail-kv span{color:#748095}
.rail-kv strong{text-align:right;color:#17243a}
.control-clear{display:flex;align-items:center;gap:8px;color:#0f6d4d;font-size:11px;font-weight:800}
.control-clear:before{content:'';width:8px;height:8px;border-radius:50%;background:#22a06b;box-shadow:0 0 0 3px #e0f4ec}

/* Mobile: actual usable phone layout */
@media(max-width:900px){
  .layout{display:block}
  .sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid #e1e6ee;display:flex;gap:4px;overflow:auto;padding:7px 8px}
  .sidebar-section,.nav-label,.sidebar-foot{display:none}
  .sidebar a{flex:0 0 auto;min-height:32px;padding:0 10px;border:1px solid #e4e9f0;background:#fff}
  .content{padding:14px 12px 30px}
  .account-shell{display:block}
  .account-rail{position:static;display:grid;grid-template-columns:1fr 1fr;margin-top:12px}
  .account-banner{grid-template-columns:1fr;padding:14px 15px}
  .account-balance-stack{text-align:left}
  .account-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .account-fact:nth-child(4n){border-right:1px solid #e6eaf0}
  .account-fact:nth-child(2n){border-right:0}
  .account-fact:nth-last-child(-n+4){border-bottom:1px solid #e6eaf0}
  .account-fact:nth-last-child(-n+2){border-bottom:0}
  .topbar{height:auto;min-height:72px;flex-wrap:wrap;gap:8px;padding:10px 12px}
  .global-search{order:3;width:100%;margin:0}
  .global-search input{width:100%;min-width:0}
  .env{font-size:9px}
}

@media(max-width:560px){
  .lab-banner{font-size:9px;padding:5px 8px}
  .brand{font-size:15px}
  .brand-mark{width:34px;height:34px}
  .subtitle{display:none}
  .account-number h1{font-size:23px}
  .account-tabs a{padding:9px 11px;font-size:10.5px}
  .account-rail{grid-template-columns:1fr}
  .account-facts{grid-template-columns:1fr 1fr}
}