:root{
  --bg0:#070b14;
  --bg1:#0b1222;
  --card:#0f1b33;
  --card2:#0b152b;
  --txt:#eaf0ff;
  --mut:#92a2c7;
  --pri:#64d6c6;
  --pri2:#6aa9ff;
  --line:rgba(255,255,255,.10);
  --radius:18px;
}

*{box-sizing:border-box}
body.bg-app{background:radial-gradient(1200px 600px at 15% 10%, rgba(100,214,198,.18), transparent 55%),
  radial-gradient(900px 500px at 80% 10%, rgba(106,169,255,.20), transparent 60%),
  linear-gradient(180deg, var(--bg0), var(--bg1));
  color:var(--txt);
  min-height:100vh;
}

.app-shell{display:flex; min-height:100vh;}
.app-sidebar{
  width:290px; background:rgba(7,11,20,.65); border-right:1px solid var(--line);
  position:sticky; top:0; height:100vh; overflow:auto;
  backdrop-filter: blur(12px);
}
.app-main{flex:1; display:flex; flex-direction:column; min-width:0;}
.app-topbar{
  position:sticky; top:0; z-index:10;
  background:rgba(11,18,34,.65); border-bottom:1px solid var(--line);
  backdrop-filter: blur(12px);
  padding:12px 14px; display:flex; gap:12px; align-items:center;
}
.app-content{flex:1; min-height:0;}
.app-footer{border-top:1px solid var(--line); background:rgba(7,11,20,.35);}

.brand{padding:14px 12px 10px;}
.brand-link{display:flex; gap:10px; text-decoration:none; color:var(--txt); align-items:center;}
.brand-logo{height:34px; width:auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));}
.brand-name{font-weight:700; line-height:1.1}
.brand-sub{font-size:12px; color:var(--mut); margin-top:2px}

.nav-link{
  color:rgba(234,240,255,.82);
  border:1px solid transparent;
  border-radius:14px;
  padding:10px 12px;
  display:flex; align-items:center;
}
.nav-link:hover{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.06); color:var(--txt);}
.nav-link.active{
  background:linear-gradient(90deg, rgba(100,214,198,.22), rgba(106,169,255,.18));
  border-color:rgba(255,255,255,.14);
  color:var(--txt);
}
.sidebar-sep{height:1px; background:var(--line); margin:10px 10px;}
.sidebar-footer{padding:12px; border-top:1px solid var(--line); margin-top:10px;}

.card{
  background:rgba(15,27,51,.58);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  box-shadow:0 18px 40px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
}
.card .card-header{background:transparent; border-bottom:1px solid rgba(255,255,255,.08);}
.table{color:rgba(234,240,255,.90)}
.table thead th{color:rgba(234,240,255,.75); border-color:rgba(255,255,255,.10)}
.table td, .table th{border-color:rgba(255,255,255,.08)}
.form-control, .form-select{
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  color:var(--txt)!important;
  border-radius:14px!important;
}
.form-control::placeholder{color:rgba(234,240,255,.45)}
.btn{border-radius:14px}
.btn-primary{
  background:linear-gradient(90deg, rgba(100,214,198,.85), rgba(106,169,255,.85));
  border:none;
  color:#071014;
  font-weight:700;
}
.btn-primary:hover{filter:brightness(1.05)}
.badge-soft{
  background:rgba(100,214,198,.16);
  border:1px solid rgba(100,214,198,.25);
  color:rgba(234,240,255,.92)!important;
}

/* Dashboard mini chart box (compact, no extra page height) */
.dash-chart-sm{
  height:120px;
  width:100%;
}
.dash-chart-sm canvas{width:100%; height:100%;}
.kpi{
  display:flex; gap:12px; align-items:center;
}
.kpi .ico{
  height:44px; width:44px; border-radius:16px;
  background:linear-gradient(135deg, rgba(100,214,198,.20), rgba(106,169,255,.20));
  border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
}
.kpi .num{font-size:20px; font-weight:800;}
.kpi .lbl{color:var(--mut); font-size:12px;}

@media (max-width: 992px){
  .app-sidebar{position:fixed; left:-310px; transition:left .2s ease; z-index:100; }
  .app-sidebar.open{left:0}
  .app-main{width:100%}
}


/* Readability patch */
.text-muted, .small.text-muted, .form-text{
  color: rgba(234,240,255,.78) !important;
}
.form-label{
  color: rgba(234,240,255,.90) !important;
}
.card{
  background: rgba(15,27,51,.78) !important;
  border-color: rgba(255,255,255,.16) !important;
}
.brand-sub{
  color: rgba(234,240,255,.70) !important;
}


/* ============================================================
   Global Readability Override (Dark UI)
   - fixes low-contrast text on cards, tables, badges, accordions
   ============================================================ */
:root{
  --txt:#eaf0ff;
  --mut:#b9c6e6; /* brighter muted */
  --mut2:#d7e0ff;
}

/* generic text helpers */
.text-muted,
.small.text-muted,
.form-text,
.text-secondary{
  color: var(--mut) !important;
}
h1,h2,h3,h4,h5,h6,
.card-header,
.fw-semibold,
.nav-link,
.app-topbar .topbar-title .fw-semibold{
  color: var(--txt) !important;
}

/* KPI numbers */
.kpi .num{ color: var(--txt) !important; }
.kpi .lbl{ color: var(--mut) !important; }

/* Cards */
.card{
  background: rgba(15,27,51,.82) !important;
  border-color: rgba(255,255,255,.16) !important;
}
.card .card-header{
  border-bottom-color: rgba(255,255,255,.12) !important;
}

/* Tables (Bootstrap vars) */
.table{
  --bs-table-bg: transparent;
  --bs-table-color: rgba(234,240,255,.92);
  --bs-table-striped-color: rgba(234,240,255,.92);
  --bs-table-hover-color: rgba(234,240,255,.98);
  --bs-table-border-color: rgba(255,255,255,.12);
  color: rgba(234,240,255,.92) !important;
}
.table thead th{
  color: rgba(234,240,255,.88) !important;
  border-color: rgba(255,255,255,.14) !important;
}
.table tbody td, .table tbody th{
  color: rgba(234,240,255,.92) !important;
}

/* Badges used in UI (bg-dark-subtle + text-dark was unreadable) */
.badge.bg-dark-subtle,
.badge.bg-dark-subtle.text-dark,
.bg-dark-subtle.text-dark{
  background: rgba(255,255,255,.08) !important;
  color: rgba(234,240,255,.92) !important;
  border-color: rgba(255,255,255,.14) !important;
}

/* Buttons */
.btn-outline-light{
  border-color: rgba(255,255,255,.22) !important;
  color: rgba(234,240,255,.92) !important;
}
.btn-outline-light:hover{
  background: rgba(255,255,255,.08) !important;
}

/* Forms */
.form-label{ color: rgba(234,240,255,.90) !important; }
.form-control::placeholder{ color: rgba(234,240,255,.55) !important; }
.form-control:disabled, .form-select:disabled{
  opacity: .85;
}

/* Accordion (monthly report) */
.accordion-button{
  background: rgba(255,255,255,.06) !important;
  color: rgba(234,240,255,.92) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
}
.accordion-button:not(.collapsed){
  background: rgba(255,255,255,.10) !important;
  color: rgba(234,240,255,.98) !important;
}
.accordion-button::after{
  filter: invert(1) opacity(.9);
}
.accordion-body{
  color: rgba(234,240,255,.92) !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-top: 0 !important;
  border-radius: 0 0 14px 14px !important;
  margin-top: -12px;
  padding-top: 18px;
}

/* Sidebar subtitles */
.brand-sub{ color: rgba(234,240,255,.72) !important; }

/* Links */
a{ color: rgba(150,205,255,.95); }
a:hover{ color: rgba(190,225,255,.98); }


/* ============================================================
   FULL CONTRAST PATCH (force readable everywhere)
   ============================================================ */
:root{
  --txt:#f2f6ff;
  --mut:#c9d3ee;
  --mut2:#e3eaff;
  --line2:rgba(255,255,255,.16);
}

/* Force body + common containers */
body, .app-main, .app-content, .app-topbar, .app-sidebar{
  color: var(--txt) !important;
}

/* Any element that bootstrap might dim */
.text-muted, .text-secondary, .text-body-secondary, .small.text-muted,
.navbar-text, .form-text, .dropdown-item-text{
  color: var(--mut) !important;
}

/* Headings and titles */
h1,h2,h3,h4,h5,h6,
.card-title, .card-header, .modal-title,
.table thead th, .breadcrumb, .breadcrumb-item,
.topbar-title, .brand-name{
  color: var(--txt) !important;
}

/* Sidebar links */
.app-sidebar .nav-link{
  color: rgba(242,246,255,.88) !important;
}
.app-sidebar .nav-link:hover{
  color: rgba(242,246,255,.96) !important;
}
.app-sidebar .nav-link.active{
  color: rgba(242,246,255,.98) !important;
}

/* Cards */
.card{
  background: rgba(15,27,51,.86) !important;
  border: 1px solid var(--line2) !important;
}
.card .card-header{
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}

/* Tables */
.table, .table *{
  color: rgba(242,246,255,.92) !important;
}
.table thead th{
  color: rgba(242,246,255,.92) !important;
  border-color: rgba(255,255,255,.18) !important;
}
.table td, .table th{
  border-color: rgba(255,255,255,.14) !important;
}
.table tbody tr:hover td{
  background: rgba(255,255,255,.03) !important;
}

/* Badges */
.badge, .badge * {
  color: #000 !important;
}
.badge.bg-dark-subtle,
.badge.bg-dark-subtle.text-dark,
.bg-dark-subtle.text-dark{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(242,246,255,.92) !important;
}
.badge.bg-secondary{ background: rgba(255,255,255,.12) !important; }

/* Buttons */
.btn, .btn *{ color: inherit; }
.btn-outline-light{
  border-color: rgba(255,255,255,.26) !important;
  color: rgba(242,246,255,.92) !important;
}
.btn-outline-light:hover{
  background: rgba(255,255,255,.10) !important;
  color: rgba(242,246,255,.98) !important;
}
.btn-outline-secondary{
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(242,246,255,.82) !important;
}
.btn-outline-secondary:hover{
  background: rgba(255,255,255,.08) !important;
  color: rgba(242,246,255,.96) !important;
}

/* Forms */
.form-label{ color: rgba(242,246,255,.90) !important; }
.form-control, .form-select, textarea{
  color: rgba(242,246,255,.92) !important;
}
.form-control::placeholder, textarea::placeholder{
  color: rgba(242,246,255,.58) !important;
}
.form-control:focus, .form-select:focus, textarea:focus{
  box-shadow: 0 0 0 .2rem rgba(100,214,198,.15) !important;
}

/* Alerts */
.alert{ border-color: rgba(255,255,255,.14) !important; }
.alert-danger{
  color: #000 !important;
}
.alert-success{ color: rgba(255,255,255,.92) !important; }

/* Accordion */
.accordion-button, .accordion-button *{
  color: rgba(242,246,255,.92) !important;
}
.accordion-button{
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
.accordion-button:not(.collapsed){
  background: rgba(255,255,255,.11) !important;
}
.accordion-body, .accordion-body *{
  color: rgba(242,246,255,.92) !important;
}

/* Dropdowns / Modals if used later */
.dropdown-menu, .modal-content{
  background: rgba(15,27,51,.92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
.dropdown-item{
  color: rgba(242,246,255,.86) !important;
}
.dropdown-item:hover{
  background: rgba(255,255,255,.08) !important;
  color: rgba(242,246,255,.96) !important;
}


/* ============================================================
   EXTRA FIXES (observed on screenshots)
   - Top balances list labels were dim
   - Masters tab (btn-group) active state was low-contrast
   ============================================================ */

/* Ensure all text inside cards stays readable unless explicitly overridden */
.card, .card .card-body, .card .card-body *{
  color: rgba(145,149,159,.92);
}

/* Exception: allow icon buttons to inherit normally */
.card .btn, .card .btn *{
  color: inherit;
}

/* Fix "Top Bakiyeler" left labels (plain divs) */
.card .card-body .text-truncate,
.card .card-body .text-break{
  color: rgba(242,246,255,.92) !important;
}

/* Bootstrap btn-group active (Masters tabs) */
.btn-group .btn.active,
.btn-group .btn:active,
.btn-outline-light.active,
.btn-outline-light:active{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.22) !important;
  color: rgba(242,246,255,.96) !important;
}
.btn-group .btn{
  color: rgba(242,246,255,.86) !important;
}


/* Chart canvases */
canvas{display:block; width:100% !important; height:260px !important;}

canvas[data-chart]{display:block;width:100%!important;height:260px!important;}

/* ============================================================
   Light background class overrides
   Some Bootstrap utility classes (bg-body-tertiary, bg-light, bg-white)
   can create white cards where the UI text is light -> unreadable.
   Force these backgrounds to the app's dark card tone.
   ============================================================ */
.bg-white,
.bg-light,
.bg-body,
.bg-body-secondary,
.bg-body-tertiary,
.table-light,
.modal-content.bg-white,
.dropdown-menu.bg-white{
  background: rgba(15,27,51,.86) !important;
  color: rgba(242,246,255,.92) !important;
}

/* When someone uses text-dark on our dark UI, make it readable */
.text-dark{ color: rgba(242,246,255,.92) !important; }

/* ============================================================
   Subtle contextual backgrounds (Bootstrap)
   Some pages show low contrast when Bootstrap uses light pastel
   backgrounds with our light text. We re-map these subtle
   backgrounds to dark translucent tones so text stays readable.
   ============================================================ */
.bg-primary-subtle{ background: rgba(106,169,255,.16) !important; }
.bg-secondary-subtle{ background: rgba(255,255,255,.10) !important; }
.bg-success-subtle{ background: rgba(25,135,84,.16) !important; }
.bg-info-subtle{ background: rgba(13,202,240,.14) !important; }
.bg-warning-subtle{ background: rgba(255,193,7,.16) !important; }
.bg-danger-subtle{ background: rgba(220,53,69,.16) !important; }

.bg-primary-subtle, .bg-secondary-subtle, .bg-success-subtle,
.bg-info-subtle, .bg-warning-subtle, .bg-danger-subtle{
  color: rgba(242,246,255,.92) !important;
}

/* Badges with contextual colors (prevent pale bg + pale text) */
.badge.bg-warning, .badge.bg-warning-subtle{
  background: rgba(255,193,7,.18) !important;
  color: rgba(242,246,255,.96) !important;
  border: 1px solid rgba(255,193,7,.25) !important;
}
.badge.bg-danger, .badge.bg-danger-subtle{
  background: rgba(220,53,69,.18) !important;
  color: rgba(242,246,255,.96) !important;
  border: 1px solid rgba(220,53,69,.25) !important;
}
.badge.bg-success, .badge.bg-success-subtle{
  background: rgba(25,135,84,.18) !important;
  color: rgba(242,246,255,.96) !important;
  border: 1px solid rgba(25,135,84,.25) !important;
}
.badge.bg-info, .badge.bg-info-subtle{
  background: rgba(13,202,240,.16) !important;
  color: rgba(242,246,255,.96) !important;
  border: 1px solid rgba(13,202,240,.22) !important;
}

/* Inputs marked invalid sometimes get a light pink fill; keep it dark & readable */
.is-invalid, .was-validated .form-control:invalid, .was-validated .form-select:invalid{
  background-color: rgba(220,53,69,.08) !important;
  border-color: rgba(220,53,69,.35) !important;
}