/* === Brand gradient tokens (tweak freely) === */
:root{
  --bf-brand-1: #4f46e5; /* indigo */
  --bf-brand-2: #22c55e; /* green */
  --bf-grad-a-start: #6366f1;
  --bf-grad-a-end:   #22c55e;
  --bf-grad-b-start: #60a5fa;
  --bf-grad-b-end:   #3b82f6;
  --bf-grad-c-start: #fda4af;
  --bf-grad-c-end:   #fb7185;
}

/* BanglaFin CAGR – gradient overrides (test) */
:root{
  --bf-grad-b-start:#ffffff;  /* extremely light */
  --bf-grad-b-end:#0000ff;    /* strong blue */
  --bf-grad-c-start:#ffffff;  /* extremely light */
  --bf-grad-c-end:#ff0066;    /* strong pink */
}

/* Container */
.bf-card{background:#fff;border:1px solid #eaeaea;border-radius:14px;padding:16px;box-shadow:0 4px 16px rgba(0,0,0,.06);max-width:980px;margin:12px auto;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;transition:opacity .15s ease}
.bf-header{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.bf-switch{display:flex;align-items:center;gap:8px}
.bf-switch input{display:none}
.bf-slider{width:48px;height:26px;background:#ddd;border-radius:999px;position:relative;cursor:pointer;display:inline-block}
.bf-slider::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:all .2s}
.bf-switch input:checked + .bf-slider{background:#12b886}
.bf-switch input:checked + .bf-slider::after{transform:translateX(22px)}
.bf-switch-label{white-space:normal;font-size:14px;color:#444}

/* Grid */
.bf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px}
@media (max-width:720px){.bf-grid{grid-template-columns:1fr}}

/* FinBangla UI-like fields */
.bf-field{background:#eef2ff;border:1px solid #e5e7eb;border-radius:16px;padding:14px;box-shadow:0 1px 3px rgba(59,130,246,.08)}
.bf-field label{display:block;font-weight:700;margin-bottom:6px;color:#111827}
.bf-input-group{display:flex;align-items:center}
.bf-input-group .bf-prefix{background:#f3f4f6;border:1px solid #d1d5db;border-right:0;border-radius:10px 0 0 10px;padding:10px 12px;color:#111827;min-width:44px;text-align:center;height:44px;display:flex;align-items:center}
.bf-input-group input{border:1px solid #d1d5db;border-left:0;border-radius:0 10px 10px 0;height:44px;display:flex;align-items:center;padding:10px 12px;font-size:14px;width:100%;background:#fff;box-shadow:inset 0 1px 2px rgba(0,0,0,.04)}
.bf-input-group input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15)}

/* Duration grid */
.bf-period{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bf-period input{height:40px;padding:8px 12px;border:1px solid #d1d5db;border-radius:10px;font-size:14px;background:#fff;box-shadow:inset 0 1px 2px rgba(0,0,0,.04)}
.bf-period input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15)}

/* Buttons */
.bf-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.bf-btn{border:1px solid #d9d9d9;background:#fff;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer}
.bf-btn-success{background:linear-gradient(90deg,var(--bf-grad-a-start),var(--bf-grad-a-end));border-color:transparent;color:#fff}
.bf-btn-primary{background:linear-gradient(90deg,var(--bf-brand-1),var(--bf-grad-b-end));border-color:transparent;color:#fff}
.bf-btn-primary:hover{filter:brightness(1.03)}

/* KPI */
.bf-kpi{display:flex;gap:12px;flex-wrap:wrap}
.bf-kpi-item{flex:1 1 180px;background:#f8f9fa;border:1px solid #eee;border-radius:12px;padding:12px}
.bf-kpi-label{font-size:12px;color:#555}
.bf-kpi-value{font-size:22px;font-weight:800}
.bf-kpi-note{font-size:12px;color:#6b7280;margin-top:4px}

/* Tables */
.bf-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:14px}
.bf-table th,.bf-table td{border:1px solid #eee;padding:8px;text-align:left}
.bf-table th{background:#fafafa;font-weight:700}
.bf-table tbody tr:nth-child(even){background:#f7fafc}

/* Charts */
.bf-charts{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
.bf-chart-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:12px;overflow:hidden}
.bf-chart-title{margin:6px 0 8px}
#bf_bar{width:100% !important;height:auto !important;aspect-ratio: 2 / 1;display:block}
#bf_pie{width:100% !important;height:auto !important;aspect-ratio: 1 / 1;display:block}

/* Utilities */
.bf-hidden{display:none !important}
.bf-hint{display:block;color:#666;font-size:12px;margin-top:6px;opacity:.8;font-weight:500}

/* Toast */
.bf-toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#111827;color:#fff;padding:10px 14px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.25);z-index:9999;opacity:0;pointer-events:none;transition:opacity .2s ease}
.bf-toast.show{opacity:1}
@media (max-width:720px){.bf-toast{bottom:12px}}

/* Lang switcher */
.bf-lang-switcher{margin-left:auto; display:flex; align-items:center; gap:8px}
.bf-select{height:36px; border:1px solid #d1d5db; border-radius:10px; padding:6px 10px; background:#fff; box-shadow:inset 0 1px 2px rgba(0,0,0,.04)}
@media (max-width:720px){ .bf-lang-switcher{margin-left:0} }
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Modern segmented language switcher */
.bf-lang-switcher{margin-left:auto; display:flex; align-items:center; gap:10px}
.bf-lang-pill{display:none; align-items:center; background:#f3f4f6; border:1px solid #e5e7eb; border-radius:9999px; padding:4px; box-shadow:0 1px 2px rgba(0,0,0,.06)}
.bf-pill-btn{appearance:none; border:0; background:transparent; padding:6px 14px; border-radius:9999px; font-weight:700; font-size:13px; color:#374151; cursor:pointer; transition:transform .06s ease, background .15s ease}
.bf-pill-btn:hover{background:rgba(0,0,0,.04)}
.bf-pill-btn:active{transform:translateY(1px)}
.bf-pill-btn.active{background:linear-gradient(90deg,var(--bf-brand-1),var(--bf-grad-a-end)); color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2)}
.bf-pill-btn:focus-visible{outline:2px solid #4f46e5; outline-offset:2px}

/* Responsive behavior: desktop shows pill, mobile shows select */
@media (min-width: 900px){
  .bf-lang-pill{display:flex}
  .bf-select{display:none}
}
@media (max-width: 899.98px){
  .bf-lang-pill{display:none}
  .bf-select{display:block}
}

/* Universal pill switcher (all devices) */
.bf-lang-switcher{margin-left:auto; display:flex; align-items:center; gap:8px}
.bf-select{display:none !important} /* hide legacy select everywhere */
.bf-lang-pill{display:flex; align-items:center; background:#f3f4f6; border:1px solid #e5e7eb; border-radius:9999px; padding:3px; box-shadow:0 1px 2px rgba(0,0,0,.06)}
.bf-pill-btn{appearance:none; border:0; background:transparent; padding:5px 10px; border-radius:9999px; font-weight:700; font-size:12px; color:#374151; cursor:pointer; transition:transform .06s ease, background .15s ease}
.bf-pill-btn:hover{background:rgba(0,0,0,.04)}
.bf-pill-btn:active{transform:translateY(1px)}
.bf-pill-btn.active{background:linear-gradient(90deg,var(--bf-brand-1),var(--bf-grad-a-end)); color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2)}
.bf-pill-btn:focus-visible{outline:2px solid #4f46e5; outline-offset:2px}


/* Soft motion tokens */
:root{
  --bf-btn-shadow: 0 2px 8px rgba(0,0,0,.08);
  --bf-btn-shadow-hover: 0 8px 22px rgba(0,0,0,.14);
}

/* Base button motion */
.bf-btn{
  position: relative;
  box-shadow: var(--bf-btn-shadow);
  transition:
    transform .12s ease,
    box-shadow .25s ease,
    background-position .30s ease,
    filter .20s ease;
}

.bf-btn:hover{
  transform: scale(1.02);
  box-shadow: var(--bf-btn-shadow-hover);
}

.bf-btn:active{
  transform: translateY(0);
  filter: brightness(.96);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

/* Sliding gradient on the colored buttons */
.bf-btn-success,
.bf-btn-primary{
  background-size: 200% 100%;
  background-position: 0% 50%;
}

.bf-btn-success:hover,
.bf-btn-primary:hover{
  background-position: 100% 50%;
}

.bf-btn-success:active,
.bf-btn-primary:active{
  background-position: 50% 50%;
}

/* Accessible focus */
.bf-btn:focus-visible{
  outline: 2px solid var(--bf-brand-1);
  outline-offset: 2px;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .bf-btn{ transition: none; }
}