/* =====================================================
   Easy Choice Finance — Visual Theme
   Layered on top of Bootstrap 5.3. Focuses on visual
   polish (color, depth, rounding); layout/responsive
   behavior stays in mobile.css.
   ===================================================== */

:root {
  --ecf-primary:      #0d6efd;
  --ecf-primary-2:    #3b8cff;   /* lighter top of gradient */
  --ecf-primary-dark: #0b5ed7;

  --ecf-ink:          #1f2a37;   /* primary text */
  --ecf-muted:        #667085;
  --ecf-bg:           #f3f6fb;   /* app background */
  --ecf-surface:      #ffffff;
  --ecf-border:       #e6e9f0;

  --ecf-radius:       16px;      /* cards / large surfaces */
  --ecf-radius-md:    12px;      /* inputs, alerts */
  --ecf-radius-sm:    10px;      /* buttons */

  --ecf-shadow-xs:    0 1px 2px rgba(16, 24, 40, .06);
  --ecf-shadow-sm:    0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --ecf-shadow:       0 6px 18px rgba(16, 24, 40, .08);
  --ecf-shadow-lg:    0 16px 40px rgba(16, 24, 40, .12);
}

/* ---------- Base ---------- */
body {
  background: var(--ecf-bg);
  color: var(--ecf-ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
body.bg-light { background: var(--ecf-bg) !important; }

h1, h2, h3, h4, h5, h6 { color: var(--ecf-ink); font-weight: 700; letter-spacing: -0.01em; }
a { text-decoration: none; }
.text-muted { color: var(--ecf-muted) !important; }

/* ---------- Buttons: rounded + soft 3D ---------- */
.btn {
  --bs-btn-border-radius: var(--ecf-radius-sm);
  border-radius: var(--ecf-radius-sm);
  font-weight: 600;
  padding: .5rem 1.1rem;
  border-width: 1px;
  box-shadow: var(--ecf-shadow-xs);
  transition: transform .07s ease, box-shadow .16s ease, background-color .16s ease, filter .16s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--ecf-shadow-sm); }
.btn:active { transform: translateY(0); box-shadow: inset 0 2px 4px rgba(16, 24, 40, .16); }
.btn:focus-visible { box-shadow: 0 0 0 .22rem rgba(13, 110, 253, .28); }
.btn-sm { border-radius: 9px; padding: .34rem .7rem; }
.btn-lg { border-radius: 13px; }

/* Solid variants get a subtle top-light gradient + colored shadow for depth */
.btn-primary {
  background-image: linear-gradient(180deg, var(--ecf-primary-2), var(--ecf-primary));
  border-color: var(--ecf-primary-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 5px rgba(13, 110, 253, .35);
}
.btn-primary:hover { background-image: linear-gradient(180deg, #2f83fb, #0b63e6); border-color: var(--ecf-primary-dark); }
.btn-primary:active { background-image: linear-gradient(180deg, var(--ecf-primary), var(--ecf-primary-dark)); }

.btn-success {
  background-image: linear-gradient(180deg, #29c26b, #16a34a);
  border-color: #128a3e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 5px rgba(22, 163, 74, .32);
}
.btn-success:hover { background-image: linear-gradient(180deg, #24b463, #12903f); }

.btn-danger {
  background-image: linear-gradient(180deg, #f2545b, #dc3545);
  border-color: #c02a39;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 5px rgba(220, 53, 69, .32);
}
.btn-danger:hover { background-image: linear-gradient(180deg, #ec464e, #cc2f3e); }

.btn-warning {
  background-image: linear-gradient(180deg, #ffc247, #fd9e14);
  border-color: #e8890a;
  color: #4a2c00;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 5px rgba(253, 126, 20, .3);
}
.btn-warning:hover { background-image: linear-gradient(180deg, #ffb838, #f59310); }

.btn-secondary {
  background-image: linear-gradient(180deg, #7a8595, #616a78);
  border-color: #545c68;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 5px rgba(97, 106, 120, .3);
}

/* Outline buttons: clean, gentle hover fill */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-success { background-color: #fff; box-shadow: var(--ecf-shadow-xs); }
.btn-outline-secondary { color: #52606d; border-color: var(--ecf-border); }
.btn-outline-secondary:hover { background-color: #f1f4f9; color: var(--ecf-ink); border-color: #d4dae4; }

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--ecf-border);
  border-radius: var(--ecf-radius);
  box-shadow: var(--ecf-shadow-sm);
  background: var(--ecf-surface);
}
.card.shadow-sm { box-shadow: var(--ecf-shadow-sm) !important; }
.card.shadow, .card.shadow-lg { box-shadow: var(--ecf-shadow) !important; }
.card-header {
  background: var(--ecf-surface);
  border-bottom: 1px solid var(--ecf-border);
  font-weight: 700;
  padding: .9rem 1.15rem;
  border-radius: var(--ecf-radius) var(--ecf-radius) 0 0 !important;
}
.card-body { padding: 1.15rem; }

/* ---------- Navbar ---------- */
.navbar.bg-primary {
  background-image: linear-gradient(180deg, #1477ff, var(--ecf-primary-dark)) !important;
  box-shadow: 0 2px 12px rgba(13, 110, 253, .28);
}
.navbar-brand { font-weight: 800; letter-spacing: -0.02em; }
.navbar .nav-link { border-radius: 9px; padding-inline: .8rem; transition: background-color .15s ease; }
.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus { background-color: rgba(255, 255, 255, .14); color: #fff; }
.navbar .btn-outline-light,
.navbar .btn-light { border-radius: 9px; }

/* Pin notifications + Logout to the top-right so the crowded link row
   cannot shove them past the viewport (Bootstrap expand uses nowrap). */
.navbar-actions {
  flex-shrink: 0;
  white-space: nowrap;
  gap: .65rem;
  z-index: 2;
}
@media (min-width: 992px) {
  .navbar.navbar-expand-lg > .container {
    flex-wrap: wrap;
  }
  .navbar-actions {
    order: 2;
    margin-left: auto !important;
  }
  .navbar.navbar-expand-lg .navbar-collapse {
    order: 3;
    flex-basis: 100%;
  }
}

/* ---------- Forms ---------- */
.form-control, .form-select {
  border-radius: var(--ecf-radius-md);
  border-color: var(--ecf-border);
  padding: .55rem .8rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
  border-color: #9cc0ff;
  box-shadow: 0 0 0 .22rem rgba(13, 110, 253, .16);
}
.input-group > .form-control, .input-group > .form-select { border-radius: var(--ecf-radius-md); }
.form-label { font-weight: 600; color: #3a4552; }

/* ---------- Badges ---------- */
.badge { border-radius: 8px; font-weight: 600; padding: .42em .62em; letter-spacing: .01em; }
.rounded-pill { border-radius: 999px !important; }

/* ---------- Alerts ---------- */
.alert {
  border: 1px solid transparent;
  border-radius: var(--ecf-radius-md);
  box-shadow: var(--ecf-shadow-xs);
}

/* ---------- List groups ---------- */
.list-group { border-radius: var(--ecf-radius-md); }
.list-group-item { border-color: var(--ecf-border); }
.list-group-item:first-child { border-top-left-radius: var(--ecf-radius-md); border-top-right-radius: var(--ecf-radius-md); }
.list-group-item:last-child { border-bottom-left-radius: var(--ecf-radius-md); border-bottom-right-radius: var(--ecf-radius-md); }

/* ---------- Dropdowns ---------- */
.dropdown-menu {
  border-radius: var(--ecf-radius-md);
  border-color: var(--ecf-border);
  box-shadow: var(--ecf-shadow);
  padding: .4rem;
}
.dropdown-item { border-radius: 8px; padding: .5rem .7rem; }

/* ---------- Tables ---------- */
.table { --bs-table-border-color: var(--ecf-border); }
.table > :not(caption) > * > * { padding: .7rem .75rem; }
.table thead th {
  text-transform: uppercase;
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--ecf-muted);
  font-weight: 700;
  border-bottom: 2px solid var(--ecf-border);
}
.table-hover > tbody > tr:hover > * { background-color: rgba(13, 110, 253, .04); }

/* ---------- Accordion (Help) ---------- */
.accordion {
  border-radius: var(--ecf-radius);
  overflow: hidden;
  border: 1px solid var(--ecf-border);
}
.accordion-item { border-color: var(--ecf-border); }
.accordion-button { font-weight: 600; }
.accordion-button:not(.collapsed) {
  color: var(--ecf-primary-dark);
  background-color: rgba(13, 110, 253, .07);
  box-shadow: none;
}
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .18); }

/* ---------- Bottom nav (mobile) ---------- */
.bottom-nav { box-shadow: 0 -4px 16px rgba(16, 24, 40, .08); }
.bottom-nav a.active {
  color: var(--ecf-primary);
  position: relative;
}
.bottom-nav a.active .bn-icon {
  background: rgba(13, 110, 253, .12);
  border-radius: 12px;
  padding: 2px 12px;
}

/* ---------- Misc ---------- */
.shadow-sm { box-shadow: var(--ecf-shadow-sm) !important; }
hr { color: var(--ecf-border); opacity: 1; }
code { background: #f2f4f8; padding: .12em .4em; border-radius: 6px; color: #b3306b; }