/* TipTracker-like glass UI for SpendWise */

:root{
  --tt-radius: 22px;
  --tt-border-dark: rgba(255,255,255,.10);
  --tt-border-light: rgba(15,23,42,.10);

  --tt-card-dark: rgba(16, 22, 33, .62);
  --tt-card-light: rgba(255,255,255,.78);

  --tt-text-muted-dark: rgba(255,255,255,.66);
  --tt-text-muted-light: rgba(15,23,42,.62);
}

/* ------------------------------------------------------------------
   IMPORTANT: Make native form controls follow theme (select dropdown,
   date picker, etc). This fixes unreadable option lists on dark UI.
-------------------------------------------------------------------*/
html[data-bs-theme="dark"] { color-scheme: dark; }
html[data-bs-theme="light"] { color-scheme: light; }

/* fallback if you toggle on body (still fine to keep) */
body[data-bs-theme="dark"] { color-scheme: dark; }
body[data-bs-theme="light"] { color-scheme: light; }


/* Background like TipTracker (fixed, soft blobs) */
html, body { height: 100%; }
body{
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

[data-bs-theme="dark"] body{
  background-color: #070b12;
  background-image:
    radial-gradient(700px 420px at 12% 70%, rgba(34,197,94,.23), transparent 60%),
    radial-gradient(700px 420px at 86% 22%, rgba(168,85,247,.22), transparent 60%),
    radial-gradient(700px 420px at 55% 10%, rgba(14,165,233,.15), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.42));
}

[data-bs-theme="light"] body{
  background-color: #f6f7fb;
  background-image:
    radial-gradient(700px 420px at 12% 70%, rgba(34,197,94,.16), transparent 60%),
    radial-gradient(700px 420px at 86% 22%, rgba(168,85,247,.16), transparent 60%),
    radial-gradient(700px 420px at 55% 10%, rgba(14,165,233,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(246,247,251,.95));
}

/* Fixed-top navbar glass */
.navbar-glass{
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--tt-border-dark);
}
[data-bs-theme="dark"] .navbar-glass{
  background: rgba(8,12,18,.55);
}
[data-bs-theme="light"] .navbar-glass{
  background: rgba(255,255,255,.72);
  border-bottom-color: var(--tt-border-light);
}

/* Main spacing because navbar is fixed */
.app-main{ padding-top: 92px; padding-bottom: 36px; }

/* Glass card */
.card-glass{
  border-radius: var(--tt-radius);
  border: 1px solid var(--tt-border-dark);
  background: var(--tt-card-dark);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
[data-bs-theme="light"] .card-glass{
  background: var(--tt-card-light);
  border-color: var(--tt-border-light);
  box-shadow: 0 14px 40px rgba(15,23,42,.10);
}

.pagehead h1, .pagehead h2{
  letter-spacing: -0.02em;
}
[data-bs-theme="dark"] .text-secondary{ color: var(--tt-text-muted-dark) !important; }
[data-bs-theme="light"] .text-secondary{ color: var(--tt-text-muted-light) !important; }

/* Inputs to match glass style */
.form-control, .form-select{
  border-radius: 12px;
  border: 1px solid var(--tt-border-dark);
  background-color: rgba(255,255,255,.06);
  color: var(--bs-body-color);
}

/* ================================
   Receipt preview (fixed sizing + delete button)
================================== */

.receipt-preview .preview-box{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 10px;
  overflow: hidden;
}

[data-bs-theme="light"] .receipt-preview .preview-box{
  border-color: rgba(15,23,42,.12);
  background: rgba(255,255,255,.70);
}

.receipt-frame{
  position: relative;
  width: 100%;
  height: 230px;          /* keeps image inside boundary */
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.22);
}

[data-bs-theme="light"] .receipt-frame{
  background: rgba(15,23,42,.05);
}

@media (max-width: 576px){
  .receipt-frame{ height: 190px; }
}

.receipt-img{
  width: 100%;
  height: 100%;
  object-fit: contain;     /* shows full receipt nicely */
  display: block;
}

.btn-icon{
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

.receipt-remove{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  opacity: .95;
}

.receipt-remove:hover{ opacity: 1; }

.receipt-meta{
  margin-top: 8px;
  font-size: .85rem;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.receipt-pdf-inner{
  width: 100%;
  height: 100%;
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.receipt-pdf-inner i{
  font-size: 2rem;
}

/*---------end-------------*/

[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select{
  background: rgba(255,255,255,.75);
  border-color: var(--tt-border-light);
}
[data-bs-theme="dark"] .form-control::placeholder{ color: rgba(255,255,255,.45); }
[data-bs-theme="light"] .form-control::placeholder{ color: rgba(15,23,42,.50); }

/* ------------------------------------------------------------------
   FIX: dropdown option list readability (browser-dependent).
   color-scheme handles most cases; these help where allowed.
-------------------------------------------------------------------*/
html[data-bs-theme="dark"] select.form-select option{
  background-color: #0b1220;
  color: rgba(255,255,255,.92);
}
html[data-bs-theme="light"] select.form-select option{
  background-color: #ffffff;
  color: rgba(15,23,42,.95);
}

/* Also help focused select look consistent */
.form-select:focus,
.form-control:focus{
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
  border-color: rgba(13,110,253,.55);
}

/* Pill buttons like TipTracker */
.btn-pill{ border-radius: 999px; padding: .55rem .95rem; }
.btn-lg.btn-pill{ padding: .70rem 1.15rem; }

.btn-primary{
  box-shadow: 0 14px 30px rgba(13,110,253,.22);
}
.btn-outline-danger{
  border-color: rgba(220,53,69,.55);
}

/* Badge soft */
.badge-soft{
  border-radius: 999px;
  border: 1px solid rgba(13,110,253,.25);
  background: rgba(13,110,253,.14);
  color: var(--bs-body-color);
}

/* ================================
   FIX: Category pills visible in BOTH themes
================================== */
.badge-cat{
  border-radius: 999px;
  border: 1px solid rgba(13,110,253,.25);
  background: rgba(13,110,253,.14);
  color: rgba(255,255,255,.92);
  padding: .30rem .55rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.badge-cat i{
  font-size: .95em;
  opacity: .9;
}

/* slightly muted variant (for Uncategorized etc.) */
.badge-cat-muted{
  opacity: .88;
}

/* Light theme version */
[data-bs-theme="light"] .badge-cat{
  border: 1px solid rgba(13,110,253,.25);
  background: rgba(13,110,253,.14);
  color: rgba(15,23,42,.92);
}

/*----end-----------*/

/* Glass table */
.table-glass .table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--bs-body-color);
  margin-bottom: 0;
}
.table-glass thead th{
  opacity: .85;
  border-bottom-color: rgba(255,255,255,.12) !important;
}
[data-bs-theme="light"] .table-glass thead th{
  border-bottom-color: rgba(15,23,42,.12) !important;
}
.table-glass tbody td{
  border-top-color: rgba(255,255,255,.10) !important;
}
[data-bs-theme="light"] .table-glass tbody td{
  border-top-color: rgba(15,23,42,.10) !important;
}

/* Nice divider line inside cards */
.hr-soft{
  height: 1px;
  background: rgba(255,255,255,.10);
}
[data-bs-theme="light"] .hr-soft{
  background: rgba(15,23,42,.10);
}

/* ================================
   Receipt hover preview + modal
================================== */

.receipt-hover-pop{
  position: fixed;
  z-index: 1070;
  width: 280px;
  max-width: 80vw;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--tt-border-dark);
  background: var(--tt-card-dark);
  box-shadow: 0 18px 50px rgba(0,0,0,.38);
  backdrop-filter: blur(12px);
  display: none;
}

[data-bs-theme="light"] .receipt-hover-pop{
  background: var(--tt-card-light);
  border-color: var(--tt-border-light);
  box-shadow: 0 14px 40px rgba(15,23,42,.12);
}

.receipt-hover-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.receipt-hover-frame{
  width: 100%;
  height: 180px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-bs-theme="light"] .receipt-hover-frame{
  border-color: rgba(15,23,42,.12);
  background: rgba(15,23,42,.05);
}

.receipt-hover-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.receipt-hover-icon{
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 8px;
}

/* Modal glass */
.modal-glass{
  border-radius: var(--tt-radius);
  border: 1px solid var(--tt-border-dark);
  background: var(--tt-card-dark);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}

[data-bs-theme="light"] .modal-glass{
  background: var(--tt-card-light);
  border-color: var(--tt-border-light);
  box-shadow: 0 18px 55px rgba(15,23,42,.15);
}

.receipt-modal-body{
  min-height: 320px;
}

.receipt-modal-loading{
  padding: 18px 2px 6px 2px;
}

.receipt-modal-frame{
  width: 100%;
  height: min(72vh, 720px);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

[data-bs-theme="light"] .receipt-modal-frame{
  border-color: rgba(15,23,42,.12);
  background: rgba(15,23,42,.04);
}

.receipt-modal-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.receipt-modal-iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
}

/* Darken modal backdrop so page behind isn't readable */
.modal-backdrop.show{
  opacity: .92 !important;
}

/* Optional: make the backdrop a bit "inkier" */
[data-bs-theme="dark"] .modal-backdrop.show{
  background-color: #02040a !important;
}