/* CashBari – Luxe Dark (White Titles Variant)
   All titles/headings are pure white; body/muted text slightly softer.
   Drop this file in /assets and include after Bootstrap (can replace old theme).
*/

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

:root{
  /* Base */
  --bg:#0b0f17;
  --bg-accent:
    radial-gradient(1200px 800px at -10% -10%, #0f2240 0%, transparent 60%),
    radial-gradient(900px 700px at 110% 0%, #201a44 0%, transparent 55%),
    radial-gradient(700px 600px at 50% 120%, #123247 0%, transparent 60%);
  --panel: rgba(16,22,32,.80);
  --panel-hover: rgba(22,30,44,.92);
  --text:#d7deea;          /* body text (softer than white) */
  --muted:#9fb2c8;
  --border:rgba(255,255,255,.10);

  /* Accents (more distinct) */
  --primary:#7aa8ff;       /* cornflower */
  --primary-strong:#5f8bff;
  --success:#2dd4bf;       /* teal */
  --warning:#fbbf24;       /* amber */
  --danger:#fb7185;        /* rose */
  --info:#60a5fa;          /* sky */

  --shadow-1:0 10px 30px rgba(0,0,0,.45);
  --shadow-2:0 20px 44px rgba(0,0,0,.55);
}

html,body{
  background:var(--bg)!important;
  background-image:var(--bg-accent);
  background-attachment:fixed;
  color:var(--text)!important;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.container{ max-width:1100px; }

/* Navbar */
.navbar-dark.bg-dark{
  background:linear-gradient(180deg, rgba(8,12,22,.92), rgba(8,12,22,.68))!important;
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(10px);
}
.navbar-brand{ font-weight:800; letter-spacing:.25px; color:#fff!important; }
.navbar-dark .nav-link{ color:#d7e6ff!important; opacity:.9; }
.navbar-dark .nav-link:hover,.navbar-dark .nav-link.active{ color:#fff!important; opacity:1; }

/* TITLES — all white */
h1,h2,h3,h4,h5,h6,
.page-title,
.card .card-title{
  color:#ffffff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.page-sub{ color:var(--muted); margin-top:.2rem; margin-bottom:1.25rem; }

/* Cards */
.card{
  background:var(--panel)!important;
  border:1px solid var(--border)!important;
  border-radius:16px!important;
  box-shadow:var(--shadow-1);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); background:var(--panel-hover); }

/* Stat helpers */
.stat{ position:relative; overflow:hidden; isolation:isolate; }
.stat::after{
  content:""; position:absolute; inset:auto -60% -60% auto; width:220px; height:220px;
  background:radial-gradient(closest-side, rgba(122,168,255,.28), transparent);
}
.stat .icon{
  width:42px;height:42px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; background:rgba(122,168,255,.20); color:#bcd5ff; margin-bottom:.5rem;
}

/* Tables */
.table{
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,.035);
  --bs-table-hover-bg: rgba(255,255,255,.06);
  color:var(--text);
}
.table thead th{ color:#a8bad1; border-bottom-color:var(--border); text-transform:uppercase; font-size:.78rem; letter-spacing:.06em; }
.table td,.table th{ border-color:var(--border)!important; }

/* Forms */
.form-control,.form-select{
  background:#0f1628!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
  border-radius:12px;
}
.form-control:focus,.form-select:focus{
  background:#101d38!important;
  border-color:#3b82f6!important;
  box-shadow:0 0 0 .25rem rgba(59,130,246,.25);
}

/* Buttons */
.btn{ border-radius:12px; border:1px solid transparent; font-weight:600; }
.btn-primary{
  background:linear-gradient(180deg, var(--primary), var(--primary-strong));
  border-color:#3c74ff;
  box-shadow:0 8px 16px rgba(95,139,255,.28);
}
.btn-primary:hover{ filter:brightness(1.05); }
.btn-success{ background:var(--success); border-color:#13c4ad; }
.btn-danger{ background:var(--danger); border-color:#f43f5e; }
.btn-outline-secondary{ color:#cfd6e3; border-color:#4b5563; }
.btn-outline-secondary:hover{ background:#4b5563; color:#fff; }

/* Alerts & badges (distinct accents) */
.alert{ border:1px solid var(--border); border-radius:14px; }
.alert-success{ background:rgba(45,212,191,.12); color:#c9fff2; }
.alert-info{ background:rgba(96,165,250,.12); color:#d7e8ff; }
.alert-warning{ background:rgba(251,191,36,.14); color:#ffe7b9; }
.alert-danger{ background:rgba(251,113,133,.14); color:#ffd2d9; }

.badge{ border-radius:10px; padding:.38em .6em; }
.badge.bg-warning{ background:#fbbf24!important; color:#1a1a1a!important; }
.badge.bg-success{ background:#22c55e!important; }
.badge.bg-danger{ background:#fb7185!important; }
.badge.bg-secondary{ background:#64748b!important; }

/* Subtle divider */
.hr-soft{ height:1px; border:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent); margin:1.25rem 0 1.75rem; }

/* Motion */
.fade-in{ animation:fade .45s ease both; }
@keyframes fade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

/* === Off‑white body text everywhere (keep titles pure white) === */
:root{ --text:#dfe5ef; } /* off‑white a bit brighter */
h1,h2,h3,h4,h5,h6,.page-title,.card .card-title{ color:#ffffff !important; }
body, p, span, li, label, small, .small, .card-text,
a:not(.btn), .dropdown-item, .navbar-dark .nav-link,
.table, .table td, .table th,
.form-label, .form-control, .form-select {
  color: var(--text) !important;
}
.navbar-dark .nav-link:hover, .navbar-dark .nav-link.active{
  color:#ffffff !important;
}
.text-muted{ color:#b8c3d3 !important; }

/* === FIX: Navbar dropdown in dark theme === */
.navbar-dark .dropdown-menu{
  background: rgba(16,22,32,.96);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .35rem;
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(12px);
}
.navbar-dark .dropdown-item{
  color: var(--text);
  border-radius: 10px;
  padding: .55rem .75rem;
}
.navbar-dark .dropdown-item:hover,
.navbar-dark .dropdown-item:focus{
  background: rgba(122,168,255,.18);
  color: #fff;
}
.navbar-dark .dropdown-divider{ border-top-color: var(--border); }
.navbar-dark .dropdown-menu .active,
.navbar-dark .dropdown-item.active{
  background: linear-gradient(180deg, var(--primary), var(--primary-strong));
  color: #fff;
}
.navbar-dark .dropdown-toggle::after{
  border-top-color: #fff; border-right-color: transparent; border-left-color: transparent;
}

/* === FIX: Number input spinners (consistent dark look / hide default) === */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
input[type=number]{ -moz-appearance: textfield; appearance: textfield; }

/* Slightly brighter input border on focus to match theme */
.form-control:focus, .form-select:focus{
  border-color:#5f8bff !important;
  box-shadow: 0 0 0 .25rem rgba(95,139,255,.28);
}


/* === Readability: Stat cards (Admin/User dashboards) ============== */
.card.stat{ background: rgba(18,22,32,.90) !important; }
.stat .card-title{ color:#ffffff !important; }
.stat .h3, .stat .display-6, .stat .value{
  color:#ffffff !important;
  letter-spacing:.2px;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
/* Make the small descriptor brighter than 'muted' */
.stat .text-muted{ color:#cfd8e7 !important; opacity: .95; }
/* Keep icons a bit brighter */
.stat .icon{ background: rgba(122,168,255,.22); color:#d7e6ff; }
/* Slight lift on hover for emphasis */
.card.stat:hover{ transform: translateY(-3px); box-shadow: 0 22px 48px rgba(0,0,0,.55); }


/* Boxed navbar: keep content inside the site container width */
.navbar .container{ max-width: 1100px; margin: 0 auto; }

/* === Softer Lighter-Dark Background Override ===================== */
:root{
  /* slightly lighter background */
  --bg:#141a24;
  --bg-accent:
    radial-gradient(1200px 800px at -10% -10%, #18243b 0%, transparent 60%),
    radial-gradient(900px 700px at 110% 0%, #262646 0%, transparent 55%),
    radial-gradient(700px 600px at 50% 120%, #1a2f44 0%, transparent 60%);
  /* panels a touch brighter too */
  --panel: rgba(26,34,48,.86);
  --panel-hover: rgba(30,40,56,.96);
  --border: rgba(255,255,255,.12);
}
/* navbar top a shade lighter to match */
.navbar-dark.bg-dark{
  background:linear-gradient(180deg, rgba(14,18,28,.90), rgba(14,18,28,.66))!important;
}

/* === Custom solid background (from sample image) ==================
   RGB(53,60,71) -> #353C47
*/
:root{
  --bg:#353C47;
  --bg-accent:none; /* no gradients, keep it solid */
  --panel: rgba(33, 38, 46, .88);       /* panels a touch darker than bg */
  --panel-hover: rgba(29, 34, 42, .96);
  --border: rgba(255,255,255,.14);
}
/* ensure no residual background-image */
html,body{ background-image:none !important; }
.navbar-dark.bg-dark{
  background: linear-gradient(180deg, rgba(33,38,46,.95), rgba(33,38,46,.80)) !important;
}

/* === Navbar: pill-style menu buttons ============================== */
:root{
  --nav-pill-border:#C3B37A;           /* soft gold */
  --nav-pill-hover-bg:rgba(195,179,122,.22);
  --nav-pill-active-bg:#C3B37A;
}
.navbar .navbar-nav{ align-items:center; gap:.35rem; }
.navbar .nav-link{
  position:relative;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.44rem .85rem;
  margin: .1rem 0;
  background:rgba(255,255,255,.03);
  border:1px solid var(--nav-pill-border);
  color:var(--text)!important;
  border-radius:14px;
  line-height:1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.28);
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
  text-decoration:none!important;
}
.navbar .nav-link:hover,
.navbar .show > .nav-link{
  background: var(--nav-pill-hover-bg);
  color:#fff !important;
  border-color:#D9C88F;
}
.navbar .nav-link.active{
  background: var(--nav-pill-active-bg);
  color:#1b1b1b !important;
  border-color: var(--nav-pill-active-bg);
  box-shadow: 0 3px 10px rgba(195,179,122,.25);
}
/* Brand as subtle pill */
.navbar-brand{
  padding:.42rem .85rem; margin-right:.65rem;
  border:1px solid var(--nav-pill-border);
  border-radius:14px; background:rgba(255,255,255,.03);
  color:#fff!important; font-weight:800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.28);
}
.navbar-brand:hover{ background: var(--nav-pill-hover-bg); color:#fff!important; }

/* Dropdown toggle also as pill */
.navbar .dropdown-toggle::after{ margin-left:.4rem; vertical-align:.15em; border-top-color:#fff; }
.navbar .nav-item.dropdown > .nav-link{ padding-right:1rem; }

/* Keep dropdown menu in dark theme (already added earlier) */

/* === Dropdown visibility hardening =============================== */
.navbar{ position: relative; z-index: 2000; overflow: visible; }
.navbar .container{ position: relative; z-index: 2000; overflow: visible; }
.navbar .nav-item, .navbar .nav-item.dropdown{ position: relative; overflow: visible; }
.navbar .nav-link{ overflow: visible; }
.navbar .dropdown-menu{ z-index: 3000; margin-top:.45rem; }


/* === Brand: logo + name (not a nav pill) ========================= */
.navbar-brand{
  display:flex; align-items:center; gap:.55rem;
  padding:0; margin-right:1rem;
  border:0 !important; background:transparent !important;
  box-shadow:none !important; color:#fff !important;
  font-weight:800; font-size:1.05rem; letter-spacing:.2px;
}
.navbar-brand .brand-logo{
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px;
  background:rgba(255,255,255,.04);
    overflow:hidden;
}
.navbar-brand .brand-logo img{ width:30px; height:30px; display:block; }
.navbar-brand .brand-text{ color:hwb(74 0% 3%);
font-size: 30px;  }
.navbar-brand:hover{ opacity:.96; }



/* ensure nav-link pill style doesn't leak to brand */
.navbar .nav-link{ border-radius:14px; }

.taka{font-size:1.15em;font-weight:600;}



/* CashBari App Download Button */
.app-download-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:9999px;border:1px solid rgba(209,185,115,.6);background:#2a2f3b;color:#fff;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.25);transition:transform .06s ease, box-shadow .2s ease}
.app-download-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.35);color:#fff}
.app-android-icon{width:18px;height:18px;display:inline-block;background:currentColor;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="white" viewBox="0 0 24 24"><path d="M17.6 9.48l1.76-3.05a.5.5 0 10-.87-.49l-1.8 3.12a7.1 7.1 0 00-7.38 0L6.5 5.94a.5.5 0 10-.87.49L7.4 9.48A6.48 6.48 0 005 15h14a6.48 6.48 0 00-1.4-5.52zM7 16v4a1 1 0 001 1h1v-5H7zm8 0v5h1a1 1 0 001-1v-4h-2zm-5 0v5h4v-5h-4z"/></svg>') center/contain no-repeat}
.app-text{font-weight:600;letter-spacing:.3px}
/* container helpers */
.nav-right, .navbar-right, .nav-actions{display:flex;align-items:center;gap:.75rem}



/* Improve placeholder visibility on dark inputs */
.form-control::placeholder,
.form-select::placeholder{
  color:#e5e7eba5 !important;  /* very light gray for dark bg */
  opacity:1 !important;
}
/* Firefox specific */
.form-control::-moz-placeholder{ color:#e5e7eb !important; opacity:1 !important; }
/* Edge/IE legacy (harmless in modern browsers) */
.form-control:-ms-input-placeholder{ color:#e5e7eb !important; }
.form-control::-ms-input-placeholder{ color:#e5e7eb !important; }

/* Ensure caret and text contrast inside inputs */
.form-control{ caret-color:#e5e7eb !important; color:var(--text)!important; }