/* ================================
   Flowpesa — App CSS (Bootstrap-friendly)
   Controls: theming, surfaces, inputs, layout, responsive helpers
   Place AFTER bootstrap.min.css
   ================================= */

/* ----------  Design Tokens ---------- */
:root {
  /* Brand */
  --fp-accent: #1682f9;
  --fp-accent-600: #0f63c3;
  --fp-accent-50: #e8f3fe;

  /* Radius & spacing */
  --fp-radius-sm: 10px;
  --fp-radius-md: 12px;
  --fp-radius-lg: 16px;
  --fp-gap-sm: 10px;
  --fp-gap-md: 12px;
  --fp-gap-lg: 16px;

  /* Shadows */
  --fp-shadow-1: 0 6px 18px rgba(0,0,0,.18);
  --fp-shadow-2: 0 12px 28px rgba(0,0,0,.28);

  /* Safe area */
  --fp-safe-bottom: env(safe-area-inset-bottom);
}

/* ----------  Theme Mapping  ----------
   Toggle with: <html data-theme="dark"> or "light"
   We also map to Bootstrap CSS variables so components adapt automatically.
--------------------------------------- */

/* LIGHT */
html[data-theme="light"] {
  --fp-bg: #f7f8fa;
  --fp-surface: #ffffff;
  --fp-surface-2: #f2f3f6;
  --fp-stroke: #e5e7eb;

  --fp-text: #0c0d0e;
  --fp-text-2: #4b5563;
  --fp-text-3: #6b7280;

  /* Bootstrap vars */
  --bs-body-bg: var(--fp-bg);
  --bs-body-color: var(--fp-text);
  --bs-border-color: var(--fp-stroke);
  --bs-tertiary-bg: var(--fp-surface-2);
  --bs-link-color: var(--fp-accent);
  --bs-link-hover-color: var(--fp-accent-600);
}

/* DARK */
html[data-theme="dark"] {
  --fp-bg: #0f1012;
  --fp-surface: #17181b;
  --fp-surface-2: #121316;
  --fp-stroke: #232428;

  --fp-text: #f1f3f5;
  --fp-text-2: #c9cbd0;
  --fp-text-3: #a9abb0;

  --bs-body-bg: var(--fp-bg);
  --bs-body-color: var(--fp-text);
  --bs-border-color: var(--fp-stroke);
  --bs-tertiary-bg: #1b1c1f;
  --bs-link-color: var(--fp-accent);
  --bs-link-hover-color: var(--fp-accent-50);
}

/* Respect device preference on first load if you don't set data-theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) { color-scheme: light; }
}

/* ----------  Base & layout ---------- */
html, body {
  height: 100%;
  background: var(--fp-bg);
  color: var(--fp-text);
}

.fp-container {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* Top bar / header (works with Bootstrap .navbar too) */
.fp-topbar {
  position: sticky;
  top: 0;
  z-index: 1040;
  background: color-mix(in oklab, var(--fp-bg) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--fp-stroke);
}

/* Bottom nav with safe area */
.fp-bottomnav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: color-mix(in oklab, var(--fp-bg) 92%, transparent);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--fp-stroke);
  padding-bottom: max(8px, var(--fp-safe-bottom));
}

/* Section spacing helper */
.fp-section { margin-block: 16px; }

/* ----------  Surfaces & cards ---------- */
.fp-card {
  background: var(--fp-surface);
  border: 1px solid var(--fp-stroke);
  border-radius: var(--fp-radius-lg);
  box-shadow: var(--fp-shadow-1);
}

.fp-surface-ghost {
  background: var(--fp-surface-2);
  border: 1px solid var(--fp-stroke);
  border-radius: var(--fp-radius-md);
}

/* Wallet-ish gradient (can be reused) */
.fp-wallet {
  color: var(--fp-text);
  border-radius: var(--fp-radius-lg);
  overflow: hidden;
  box-shadow: var(--fp-shadow-2);
  background:
    radial-gradient(120% 140% at 100% 0%, #0d2a5f 0%, var(--fp-surface-2) 50%, #0a5bd6 100%);
}

/* ----------  Inputs & pills ---------- */
.fp-pill-input {
  display: flex;
  align-items: center;
  height: 56px;
  padding-inline: 14px;
  background: var(--fp-surface);
  border: 1px solid var(--fp-stroke);
  border-radius: var(--fp-radius-lg);
  gap: 8px;
}

.fp-pill-input > input,
.fp-pill-input > select,
.fp-pill-input > .form-control {
  background: transparent !important;
  border: 0 !important;
  color: var(--fp-text) !important;
  outline: none !important;
  box-shadow: none !important;
}

.fp-pill-input:focus-within {
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--fp-accent) 35%, transparent);
  border-color: color-mix(in oklab, var(--fp-accent) 35%, var(--fp-stroke));
}

/* Clear button inside pill */
.fp-clear-btn {
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--fp-text-2);
  background: color-mix(in oklab, var(--fp-surface) 70%, #000);
  border: 1px solid var(--fp-stroke);
}

/* Small label above input */
.fp-label {
  font-size: 12px;
  color: var(--fp-text-3);
  margin-inline: 4px;
  margin-bottom: 6px;
}

/* Error text */
.fp-error { color: #ff6b6b; font-size: 14px; }

/* ----------  Buttons ---------- */
.fp-btn {
  height: 56px;
  border-radius: var(--fp-radius-lg);
  font-weight: 600;
  border: 0;
}

.fp-btn-primary {
  background: var(--fp-accent);
  color: #fff;
}
.fp-btn-primary:disabled {
  background: color-mix(in oklab, var(--fp-accent) 35%, #cfe3ff);
  color: #2b2b2b;
}
.fp-btn-outline {
  background: transparent;
  border: 1px solid var(--fp-stroke);
  color: var(--fp-text);
}

/* ----------  Utilities ---------- */
/* Responsive grid helpers for small forms */
.fp-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fp-gap-md);
}
@media (max-width: 420px) {
  .fp-grid-2 { grid-template-columns: 1fr; }
}

/* Clamp heading sizes for consistent look */
.fp-h1 { font-weight: 700; font-size: clamp(26px, 6.5vw, 36px); line-height: 1.25; }
.fp-h2 { font-weight: 700; font-size: clamp(22px, 5.8vw, 30px); line-height: 1.3; }
.fp-sub { color: var(--fp-text-2); font-size: clamp(13px, 3.6vw, 16px); }

/* Avatars, icons */
.fp-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--fp-stroke); }

/* Divider with label */
.fp-divider {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  color: var(--fp-text-3); font-size: 12px;
}
.fp-divider::before, .fp-divider::after { content:""; height:1px; background: var(--fp-stroke); }

/* Safe area page padding helper */
.fp-page {
  min-height: 100dvh;
  padding: calc(72px + 16px) 16px calc(24px + var(--fp-safe-bottom));
}

/* ----------  Theme toggle button ---------- */
.theme-toggle {
  background: var(--fp-surface);
  border: 1px solid var(--fp-stroke);
  border-radius: var(--fp-radius-md);
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fp-text);
}
.theme-toggle i { font-size: 1.1rem; }

/* ----------  Small device tweaks ---------- */
@media (max-width: 360px) {
  .fp-btn { height: 52px; }
  .fp-pill-input { height: 52px; }
}

/* ----------  Desktop polish ---------- */
@media (min-width: 1024px) {
  .fp-container { max-width: 860px; }
}


/* ===== Toolbar layout ===== */
.fp-toolbar{
  display:flex; align-items:center; gap:8px;
  padding:8px 0;
}

/* buttons */
.fp-icon-btn{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:12px; border:1px solid var(--bs-border-color);
  background: var(--fp-surface);
  color: var(--bs-body-color);
}
.fp-icon-btn:focus{ outline:0; box-shadow:0 0 0 2px color-mix(in oklab, var(--fp-accent) 35%, transparent); }

/* search grows, actions stay compact */
.fp-toolbar-search{ flex:1 1 auto; min-width:0; }
.fp-toolbar-actions{ display:flex; gap:8px; flex:0 0 auto; }

/* pill input overrides (works with Bootstrap) */
.fp-search{
  height:40px; padding:0 10px; border-radius:12px;
  background: var(--fp-surface);
  border:1px solid var(--bs-border-color);
}
.fp-search .form-control{
  padding:0 8px; height:38px; line-height:38px;
  background:transparent; border:0; box-shadow:none !important; color: var(--bs-body-color);
  min-width:0; /* prevent overflow on narrow screens */
}
.fp-search .input-group-text{
  background:transparent; border:0; padding:0; color: var(--fp-text-2);
}

/* ===== Small-device behaviour (Galaxy S8+ ~360px) ===== */
@media (max-width: 380px){
  .fp-toolbar{ flex-wrap:wrap; }
  .fp-toolbar-actions{ order:2; }
  .fp-toolbar-search{
    order:3; width:100%;
  }
  .fp-search{ height:44px; }           /* slightly taller tap target */
  .fp-search .form-control{ height:42px; line-height:42px; }
}

/* Optional: tighten for ultra-narrow (≤340px) */
@media (max-width: 340px){
  .fp-icon-btn{ width:36px; height:36px; border-radius:10px; }
}
