/* ────────────────────────────────────────────────────────────────────────── */
/*  global.css — Gorilla Bank master stylesheet                              */
/* ────────────────────────────────────────────────────────────────────────── */

/* 1 · Font import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* 2 · Colour + layout variables */
:root {
  --gb-charcoal-900: #121212;
  --gb-charcoal-800: #181818;
  --gb-charcoal-700: #1e1e1e;
  --gb-charcoal-600: #2a2a2a;
  --gb-gray-400:     #8e8e8e;
  --gb-white:        #ffffff;

  --sidebar-open:       220px;  /* full width  */
  --sidebar-collapsed:    0px;  /* fully hidden */
}

/* 3 · Reset & base type */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  background: var(--gb-charcoal-900);
  color: var(--gb-white);
}
body { margin: 0; min-height: 100vh; }

/* ─────────────────────────── Layout wrapper ────────────────────────────── */
.layout {
  display: flex;
  min-height: 100vh;
}

/* ─────────────────────────── Sidebar styles ────────────────────────────── */
#sidebar {
  background: var(--gb-charcoal-700);
  width: var(--sidebar-open);
  overflow: hidden;
  transition: width 0.25s ease;
  flex: 0 0 var(--sidebar-open);
  display: flex;
  flex-direction: column;
}

body.sidebar-collapsed #sidebar {
  width: var(--sidebar-collapsed);
  flex: 0 0 var(--sidebar-collapsed);
}

/* Hide logo & nav when collapsed */
body.sidebar-collapsed #sidebar .logo,
body.sidebar-collapsed #sidebar nav { display: none; }

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.2rem 1.35rem;
  text-decoration: none;
  color: var(--gb-white);
}
/* ⬇️  add this at the very end of global.css */
#sidebar .logo img {
  width: 40px !important;   /* override any inline or later rules */
  height: 40px !important;
  object-fit: contain;
  object-position: center;
  display: block;           /* removes stray baseline whitespace */
}
.logo-text .line1,
.logo-text .line2 {
  display: block;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* Nav links */
#sidebar nav { flex-grow: 1; display: flex; flex-direction: column; }
#sidebar nav a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.2rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--gb-white);
  white-space: nowrap;
}
#sidebar nav a:hover { background: var(--gb-charcoal-600); }

/* ─────────────────────────── Main content area ─────────────────────────── */
#content {
  flex: 1;
  padding: 2.5rem 3rem;
}

/* ─────────────────────────────── Hero (landing) ────────────────────────── */
.hero { position: relative; height: 420px; }
.hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.55);
}
.hero-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
}
.btn-primary {
  margin-top: 1.5rem;
  padding: 0.75rem 1.8rem;
  font-weight: 600;
  background: var(--gb-white);
  color: var(--gb-charcoal-900);
  border-radius: 6px;
  text-decoration: none;
  transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.85; }

/* ─────────────────────────────── Dashboard grid ────────────────────────── */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}
.card {
  background: var(--gb-charcoal-600);
  border-radius: 8px;
  padding: 1.5rem;
}
.card h2 { font-size: 1.15rem; margin-bottom: 0.75rem; }
.card.balance  { grid-column: span 4; }
.card.transfer { grid-column: span 4; }
.card.recent   { grid-column: span 4; }
.big-number {
  font-size: 2rem;
  font-weight: 700;
  margin: 0.25em 0;
}

/* ─────────────────────────────── Tables ──────────────────────────────── */
.table-minimal {
  width: 100%;
  border-collapse: collapse;
}
.table-minimal th,
.table-minimal td {
  padding: 0.65rem 0.9rem;
  text-align: left;
}
.table-minimal tr:nth-child(even) {
  background: var(--gb-charcoal-700);
}

/* ─────────────────────────────── Utility ─────────────────────────────── */
.text-muted { color: var(--gb-gray-400); }

/* ─────────────────────────────── Flashes ────────────────────────────── */
.flashes { margin: 1rem 0; }
.flash { padding: 0.75rem 1rem; border-radius: .5rem; font-weight: 500; }
.flash.success {
  background: #065f46;  /* Deep green */
  color: #d1fae5;        /* Light mint text */
}

.flash.error {
  background: #7f1d1d;  /* Deep red */
  color: #fee2e2;        /* Light red-pink text */
}

.flash.warning {
  background: #92400e;  /* Deep amber */
  color: #fef3c7;        /* Pale yellow text */
}

.flash.info {
  background: #1e40af;  /* Deep blue */
  color: #dbeafe;        /* Light blue text */
}