/* ==========================================================
   Nimbus Trust Bank — Design tokens & shared UI
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root{
  --ink: #0B1F3A;
  --ink-2: #142C52;
  --emerald: #0F7A5C;
  --emerald-dark: #0B5C45;
  --gold: #C9A24B;
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --text: #1C2430;
  --text-muted: #5B6474;
  --border: #E3E6EC;
  --danger: #B3261E;
  --danger-bg: #FBEAE9;
  --success-bg: #E9F5EF;
  --radius: 10px;
  --shadow: 0 4px 24px rgba(11,31,58,0.08);
  --font-display: 'Source Serif 4', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; max-width:100%; overflow-x:hidden; }
body{
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; color: var(--ink); margin:0 0 .5em; }
a{ color: var(--emerald-dark); text-decoration:none; }
img{ max-width:100%; display:block; }
:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }

.container{ max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- Site header (login/admin/customer pages) ---------- */
.site-header{
  background: rgba(11,31,58,0.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color:#fff;
  position: sticky; top:0; z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 68px;
}
.site-header .brand{ display:flex; align-items:center; gap:10px; }
.site-header nav{ display:flex; align-items:center; gap:22px; }
.site-header nav a{ color: #D7DCE6; font-size:.92rem; font-weight:500; }
.site-header nav a:hover, .site-header nav a.active{ color:#fff; }
.site-header .user-chip{ display:flex; align-items:center; gap:10px; font-size:.85rem; color:#B9C1D1; }
.site-header .logout-btn{
  background: rgba(255,255,255,0.08); color:#fff; border:1px solid rgba(255,255,255,0.18);
  padding:7px 14px; border-radius:8px; font-size:.85rem;
}
.site-header .logout-btn:hover{ background: rgba(255,255,255,0.16); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color:#B9C1D1; padding: 56px 0 22px; margin-top: 60px; }
.site-footer small{ display:block; margin-top: 24px; color:#7C8AA3; }
.footer-rights-line,
.footer-copyright-line{ display:block; }

/* Mega-footer link grid: 4 columns, each with stacked sub-sections */
.footer-links-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-bottom: 56px; }
.footer-link-section{ margin-bottom: 30px; }
.footer-link-section:last-child{ margin-bottom:0; }
.footer-link-section h4{ color: var(--gold); font-size:.92rem; font-weight:700; margin-bottom:14px; }
.footer-link-section a{ display:block; color:#fff; font-size:.88rem; font-weight:500; line-height:2.1; }
.footer-link-section a:hover{ text-decoration:underline; }
@media (max-width: 900px){
  .footer-links-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-links-grid{ grid-template-columns: 1fr; }
}

/* Brand row: logo, social icons, branch address — sits below the link grid */
.footer-brand-row{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding-top:28px; border-top:1px solid rgba(255,255,255,0.1); }
.footer-branch{ font-size:.8rem; color:#7C8AA3; margin:0; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); color:#D7DCE6;
  transition: background .15s ease, color .15s ease;
}
.footer-social a svg{ width:16px; height:16px; }
.footer-social a:hover{ background: var(--emerald); color:#fff; }

.footer-clock-row{ display:flex; justify-content:flex-end; margin-top:36px; }
.footer-clock{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.footer-clock .time{
  font-family: Arial, Helvetica, sans-serif;
  font-weight:400; font-size:50px; line-height:1; color:#fff; letter-spacing:.01em;
}
.footer-clock select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:transparent; border:none; color: var(--gold);
  font-size:.85rem; font-weight:700; letter-spacing:.02em;
  text-align:right; text-align-last:right; padding:0 2px; cursor:pointer;
}
.footer-clock select:focus{ outline:none; text-decoration:underline; }
.footer-clock select option{ color: var(--ink); background:#fff; }
@media (max-width: 560px){
  .footer-clock-row{ justify-content:flex-start; }
  .footer-clock{ align-items:flex-start; }
  .footer-clock .time{ font-size:2.6rem; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 11px 22px; border-radius: 8px; border:none; cursor:pointer;
  font-family: var(--font-body); font-weight:600; font-size:.92rem;
  text-decoration:none; transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn-primary{ background: var(--emerald); color:#fff; }
.btn-primary:hover{ background: var(--emerald-dark); }
.btn-gold{ background: var(--gold); color: var(--ink); }
.btn-gold:hover{ filter: brightness(0.94); }
.btn-outline{ background: transparent; color: var(--ink); border:1.5px solid var(--border); }
.btn-outline:hover{ border-color: var(--ink); }
.btn-danger{ background: var(--danger-bg); color: var(--danger); }
.btn-danger:hover{ background:#f5d8d6; }
.btn-sm{ padding: 7px 14px; font-size:.82rem; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- Forms ---------- */
.field{ margin-bottom: 18px; }
.field label{ display:block; font-size:.85rem; font-weight:600; color: var(--ink); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; padding: 11px 13px; border:1.5px solid var(--border); border-radius:8px;
  font-family: var(--font-body); font-size:.95rem; background:#fff; color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--emerald); }
.field .hint{ font-size:.78rem; color: var(--text-muted); margin-top:4px; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width:640px){ .form-grid{ grid-template-columns: 1fr; } }

/* ---------- Cards / panels ---------- */
.card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 20px; flex-wrap:wrap; gap:10px; }
.panel-head h1{ font-size:1.4rem; margin:0; }
.panel-head p{ color: var(--text-muted); margin:4px 0 0; font-size:.9rem; }

/* ---------- Alerts ---------- */
.alert{ padding: 13px 16px; border-radius: 8px; font-size:.9rem; margin-bottom: 18px; }
.alert-success{ background: var(--success-bg); color: var(--emerald-dark); border:1px solid #BFE3D2; }
.alert-error{ background: var(--danger-bg); color: var(--danger); border:1px solid #F1C6C3; }

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius: var(--radius); background:#fff; }
table{ width:100%; border-collapse: collapse; font-size:.88rem; }
th,td{ padding: 12px 16px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
th{ background:#FAFBFC; color: var(--text-muted); font-weight:600; font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; }
tr:last-child td{ border-bottom:none; }
.badge{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:.74rem; font-weight:600; }
.badge-approved,.badge-active,.badge-credit{ background: var(--success-bg); color: var(--emerald-dark); }
.badge-pending{ background:#FFF3DE; color:#8A5B00; }
.badge-rejected,.badge-blocked,.badge-debit{ background: var(--danger-bg); color: var(--danger); }
.badge-mode-wire{ background:#EAF1FB; color:#1E4E8C; }
.badge-mode-swift{ background:#F4EAFB; color:#6A2E9C; }
.mono{ font-family: var(--font-mono); font-size:.85rem; }

/* ---------- Layout: sidebar shell for admin/customer panels ---------- */
.shell{ display:flex; min-height: calc(100vh - 68px); }
.sidebar{ width: 232px; flex-shrink:0; background: var(--ink); color:#D7DCE6; padding: 24px 14px; }
.sidebar a{ display:block; padding: 10px 14px; border-radius: 8px; color:#C4CCDC; font-size:.9rem; font-weight:500; margin-bottom:4px; }
.sidebar a:hover{ background: rgba(255,255,255,0.06); color:#fff; }
.sidebar a.active{ background: var(--emerald); color:#fff; }
.main{ flex:1; padding: 32px 30px; max-width: 1100px; }
@media (max-width: 860px){
  .shell{ flex-direction:column; }
  .sidebar{ width:100%; display:flex; overflow-x:auto; gap:4px; padding:12px; }
  .sidebar a{ white-space:nowrap; margin-bottom:0; }
}

/* ---------- Stat cards ---------- */
.stats-row{ display:grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap:16px; margin-bottom: 26px; }
.stat-card{ background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding:20px; }
.stat-card-center{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.stat-card .label{ font-size:.78rem; color: var(--text-muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.stat-card .value{ font-family: var(--font-display); font-size:1.7rem; color: var(--ink); margin-top:6px; }

/* ---------- Login shell (used by both login pages) ---------- */
.login-shell{ min-height:100vh; width:100%; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; padding: 24px; }
.login-card{ position:relative; z-index:2; width:100%; max-width:360px; background: rgba(255,255,255,0.97); border-radius: 14px; padding: 36px 32px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); margin: 0 auto; }
.login-card .brand{ display:flex; align-items:center; margin-bottom: 22px; }
.login-card h1{ font-size:1.25rem; margin-bottom:4px; }
.login-card .sub{ color: var(--text-muted); font-size:.86rem; margin-bottom: 22px; }
.login-shell .bg-video, .login-shell .bg-fallback{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.login-shell .bg-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,31,58,0.75), rgba(11,31,58,0.55)); z-index:1; }
.login-shell .back-link{
  position:absolute; top:24px; left:24px; z-index:3; color:#fff; font-size:.85rem;
  background: rgba(11,31,58,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,0.15); padding:8px 16px; border-radius:20px;
}
.login-shell .back-link:hover{ background: rgba(11,31,58,0.75); }
@media (max-width: 420px){
  .login-card{ padding: 28px 22px; max-width: 100%; }
}

/* ---------- Print statement page ---------- */
.statement-doc{ background:#fff; max-width: 860px; margin: 30px auto; padding: 40px 46px; border:1px solid var(--border); border-radius:10px; }
.statement-doc .doc-head{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid var(--ink); padding-bottom:18px; margin-bottom:22px; }
.statement-doc .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap: 18px; margin-bottom: 24px; }
.statement-doc .box{ border:1px solid var(--border); border-radius:8px; padding:14px 16px; }
.statement-doc .box h4{ font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color: var(--text-muted); margin-bottom:8px; }
.statement-doc .box p{ margin:2px 0; font-size:.88rem; }
.print-bar{ max-width:860px; margin: 18px auto 0; display:flex; justify-content:flex-end; gap:10px; }

@page{
  size: A4;
  margin: 14mm 12mm;
}
@media print{
  .no-print, .site-header, .sidebar, .site-footer, .print-bar{ display:none !important; }
  html, body{ background:#fff; height:auto; overflow:visible; }
  .statement-doc{
    border:none; margin:0 auto; box-shadow:none; max-width:none; width:100%;
    padding: 0; font-size:.82rem;
  }
  .statement-doc .box p{ font-size:.78rem; }
  .table-wrap{ overflow:visible !important; border:none; }
  table{ font-size:.76rem; }
  th, td{ padding:6px 8px; }
  tr, .box{ page-break-inside: avoid; }
  thead{ display: table-header-group; }
}

/* ---------- Customer profile photo (35mm x 45mm passport-photo ratio) ---------- */
.profile-photo-row{ display:flex; align-items:center; gap:18px; margin-bottom:24px; }
.profile-photo{
  width:132px; height:170px; border-radius:6px; object-fit:cover;
  border:3px solid #fff; box-shadow: var(--shadow); flex-shrink:0;
}
.profile-photo-fallback{
  width:132px; height:170px; border-radius:6px; flex-shrink:0;
  background: linear-gradient(135deg, var(--emerald), var(--gold));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size:1.8rem; font-weight:700;
  border:3px solid #fff; box-shadow: var(--shadow);
}
.profile-photo-actions{ display:flex; flex-direction:column; gap:6px; }
.profile-photo-actions form{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.profile-photo-actions input[type="file"]{
  font-size:.8rem; max-width:220px;
}
.profile-photo-hint{ font-size:.76rem; color: var(--text-muted); }

.profile-detail-list{ display:flex; flex-direction:column; gap:10px; flex:1; min-width:220px; }
.profile-detail-row{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; border-bottom:1px solid var(--border); padding-bottom:8px; }
.profile-detail-row:last-child{ border-bottom:none; padding-bottom:0; }
.profile-detail-label{ font-size:.78rem; font-weight:600; color: var(--text-muted); min-width:140px; text-transform:uppercase; letter-spacing:.03em; }
.profile-detail-value{ font-size:.95rem; font-weight:600; color: var(--ink); }

.header-avatar{ width:26px; height:34px; border-radius:3px; object-fit:cover; }
.header-avatar-fallback{
  width:26px; height:34px; border-radius:3px; display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--emerald), var(--gold)); color:#fff; font-size:.6rem; font-weight:700;
}
.site-header .user-chip{ gap:8px; }

/* ---------- "Want to know more?" CTA band (start of footer) ---------- */
.know-more-band{
  position:relative; overflow:hidden; min-height: 420px; display:flex;
  /* JPG fallback: swap assets/images/know-more-bg.jpg for your own photo
     any time. If the video below fails to load, this image shows
     instead; if that's also missing, the dark background color shows. */
  background: #05060B url('../images/know-more-bg.jpg') center / cover no-repeat;
}
.know-more-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.know-more-overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(90deg, rgba(5,6,11,0.55) 0%, rgba(5,6,11,0.15) 45%, rgba(5,6,11,0.55) 100%);
}
.know-more-inner{
  position:relative; z-index:2; width:100%; padding: 44px 24px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.know-more-heading{ color:#fff; font-size:1.9rem; max-width:420px; }
.know-more-bottom{ max-width:420px; }
.know-more-bottom p{ color:#D7DCE6; font-size:.92rem; line-height:1.6; margin-bottom:22px; }
.btn-outline-white{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.6); }
.btn-outline-white:hover{ background:rgba(255,255,255,0.12); border-color:#fff; }
@media (max-width: 700px){
  .know-more-band{ min-height: 360px; }
  .know-more-heading{ font-size:1.5rem; }
}