@import url('https://fonts.cdnfonts.com/css/solaimanlipi');

:root {
	--brand: #064e3b;
	--brand2: #16a34a;
	--bg: #f6f7fb;
	--card: #ffffff;

	/* better light-mode contrast */
	--txt: #0b1220;
	--muted: #334155;
	--border: rgba(2, 6, 23, .10);
	--ring: rgba(6, 95, 70, .20);
}

html,
body {
	height: 100%;
}

body {
	font-family: 'SolaimanLipi', sans-serif;
	background: var(--bg);
	color: var(--txt);
	overflow-x: hidden;
}

/* force better contrast for common muted text in light mode */
.text-slate-500 {
	color: var(--muted) !important;
}

.text-slate-400 {
	color: rgba(15, 23, 42, .55) !important;
}

.text-slate-600 {
	color: rgba(15, 23, 42, .78) !important;
}

.card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 14px;
}

.btn {
	border-radius: 12px;
	font-weight: 900;
}

.inp {
	border-radius: 12px;
	padding: .55rem .75rem;
	background: #ffffff;
	border: 1px solid var(--border);
	outline: none;
	font-weight: 800;
	color: var(--txt);
}

.inp:focus {
	box-shadow: 0 0 0 3px var(--ring);
	border-color: rgba(6, 95, 70, .35);
}

/* Tabs / pills */
.pill {
	border-radius: 999px;
	padding: .35rem .7rem;
	font-weight: 900;
	font-size: 12px;
	border: 1px solid rgba(2, 6, 23, .12);
	background: #fff;
	color: var(--txt);
}

.pill.active {
	background: #064e3b;
	color: #fff;
	border-color: transparent;
}

.chip {
	border-radius: 999px;
	padding: .2rem .55rem;
	font-weight: 900;
	font-size: 11px;
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 60;
	background: #fff;
	border-bottom: 1px solid var(--border);
}

/* Bottom nav ALWAYS dark dream */
.bottom-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 10px 10px;
	z-index: 70;
	background: linear-gradient(135deg, rgba(2, 6, 23, .96), rgba(6, 78, 59, .78));
	border-top: 1px solid rgba(255, 255, 255, .14);
	box-shadow: 0 -12px 28px rgba(2, 6, 23, .18);
	backdrop-filter: blur(10px);
}

.nav-btn {
	border-radius: 14px;
	padding: 10px 8px;
	font-weight: 900;
	font-size: 11px;
	border: 1px solid rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .10);
	color: rgba(255, 255, 255, .92);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.nav-btn i {
	color: rgba(255, 255, 255, .92);
}

.nav-btn.active {
	background: rgba(255, 255, 255, .92);
	color: #064e3b;
	border-color: rgba(255, 255, 255, .92);
}

.nav-btn.active i {
	color: #064e3b;
}

@media (min-width: 1024px) {
	#shell {
		display: grid;
		grid-template-columns: 250px 1fr;
	}

	#sidebar {
		position: sticky;
		top: 0;
		height: 100vh;
	}

	.bottom-nav {
		display: none;
	}
}

@media (max-width: 1023px) {
	#sidebar {
		display: none;
	}

	#content {
		padding-bottom: 92px;
	}
}

.sec {
	display: none;
}

.sec.active {
	display: block;
}

.search-results {
	max-height: 240px;
	overflow: auto;
	position: absolute;
	width: 100%;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: 0 16px 28px rgba(2, 6, 23, .10);
	z-index: 999;
}

#toast {
	position: fixed;
	left: 50%;
	top: 14px;
	transform: translateX(-50%) translateY(-90px);
	transition: .35s ease;
	z-index: 9999;
}

#toast.show {
	transform: translateX(-50%) translateY(0);
}

.dark body {
	background: #0b1220;
	color: #e2e8f0;
}

.dark .topbar {
	background: rgba(2, 6, 23, .85);
	border-bottom: 1px solid rgba(148, 163, 184, .15);
}

.dark .card {
	background: rgba(15, 23, 42, .75);
	border-color: rgba(148, 163, 184, .14);
}

.dark .inp {
	background: rgba(2, 6, 23, .55);
	border-color: rgba(148, 163, 184, .14);
	color: #e2e8f0;
}

.dark .pill {
	background: rgba(2, 6, 23, .35);
	border-color: rgba(148, 163, 184, .14);
	color: #e2e8f0;
}

.dark .search-results {
	background: rgba(2, 6, 23, .96);
	border-color: rgba(148, 163, 184, .14);
	color: #e2e8f0;
}

.dark .bottom-nav {
	background: linear-gradient(135deg, rgba(2, 6, 23, .96), rgba(6, 78, 59, .68));
	border-top: 1px solid rgba(148, 163, 184, .14);
}

.dark .text-slate-500 {
	color: rgba(226, 232, 240, .72) !important;
}

.dark .text-slate-400 {
	color: rgba(226, 232, 240, .55) !important;
}

/* Mobile KPI: 3-up compact */
@media (max-width: 767px) {
	.kpi-grid {
		gap: 8px !important;
	}

	.kpi-card {
		padding: 10px !important;
		border-radius: 12px !important;
	}

	.kpi-title {
		font-size: 9px !important;
	}

	.kpi-value {
		font-size: 16px !important;
		line-height: 1.1 !important;
	}

	.kpi-card canvas {
		height: 42px !important;
	}
}

@media print {

	.no-print,
	.bottom-nav,
	#sidebar,
	.topbar {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
	}

	.card {
		box-shadow: none !important;
	}

	#content {
		padding: 0 !important;
	}
}

/* ---------------------------
   Dashboard: color communication
---------------------------- */

/* KPI cards accent strip + soft glow */
.kpi-card{
  position: relative;
  overflow: hidden;
}
.kpi-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(6,78,59,.18), rgba(22,163,74,.10), rgba(2,6,23,0));
}
.kpi-card::after{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background: linear-gradient(180deg, rgba(6,78,59,.9), rgba(22,163,74,.55));
  opacity:.9;
}

/* Make icons inside KPI a bit nicer */
.kpi-card i{
  padding:10px;
  border-radius:14px;
  background: rgba(6,78,59,.10);
  border: 1px solid rgba(2,6,23,.08);
}

/* Normal cards: subtle border + hover */
.card{
  box-shadow: 0 10px 26px rgba(2, 6, 23, .06);
}
.card:hover{
  box-shadow: 0 14px 34px rgba(2, 6, 23, .10);
}


/* ---------------------------
   Topbar: brand tint
---------------------------- */
.topbar{
  background: linear-gradient(180deg, rgba(6,78,59,.06), rgba(255,255,255,1));
  border-bottom: 1px solid rgba(6, 78, 59, .14);
}

/* Dark mode topbar already exists; slightly enrich */
.dark .topbar{
  background: linear-gradient(180deg, rgba(6,78,59,.20), rgba(2,6,23,.85));
  border-bottom: 1px solid rgba(16,185,129,.14);
}


/* ---------------------------
   Bottom Nav: solid dark green + stylish
---------------------------- */
.bottom-nav{
  background: #064e3b !important; /* no gradient */
  border-top: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 -14px 34px rgba(2,6,23,.28);
}

.nav-btn{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  transition: transform .15s ease, background .15s ease;
}
.nav-btn:active{
  transform: scale(.98);
}
.nav-btn.active{
  background: rgba(255,255,255,.92);
  color: #064e3b;
  border-color: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(2,6,23,.20);
}

/* small active indicator dot */
.nav-btn.active::after{
  content:"";
  width:6px; height:6px;
  border-radius:999px;
  background:#064e3b;
  display:block;
  margin-top:4px;
}


/* ---------------------------
   Auth page: always white (even in dark)
---------------------------- */
#auth_layer{
  background:#ffffff !important;
  color:#0b1220 !important;
}
.dark #auth_layer{
  background:#ffffff !important;
  color:#0b1220 !important;
}

/* auth card keep clean */
#auth_layer .card{
  background:#ffffff !important;
  border-color: rgba(2,6,23,.10) !important;
  box-shadow: 0 18px 40px rgba(2,6,23,.10);
}
#auth_layer .text-slate-500{
  color: rgba(15,23,42,.70) !important;
}
#auth_layer .inp{
  background:#fff !important;
  color:#0b1220 !important;
}
/* ---------------------------
   Compact spacing (global)
---------------------------- */

/* main container padding reduce */
#content .max-w-6xl{
  padding-left: 10px !important;
  padding-right: 10px !important;
}
@media (min-width:768px){
  #content .max-w-6xl{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* card padding reduce (override tailwind p-4/p-3) */
.card.p-4{ padding: .80rem !important; }
.card.p-3{ padding: .65rem !important; }
.card.p-2{ padding: .50rem !important; }

/* inputs/buttons slightly tighter */
.inp{ padding: .48rem .68rem; }
.btn{ padding-top: .55rem; padding-bottom: .55rem; }

/* KPI grid tighter */
.kpi-grid{ gap: 8px !important; }
@media (min-width:768px){ .kpi-grid{ gap: 10px !important; } }

/* table cells tighter */
table td, table th{ padding-top: .50rem; padding-bottom: .50rem; }

/* Entry/Report list cards tighten */
#ui_last10 > div,
#ui_ledger > div,
#ui_bal_list > div{
  padding: .65rem !important;
}

/* ---------------------------
   Sidebar active readability
---------------------------- */
#sidebar .nav-active{
  background: #064e3b !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.10) !important;
}
#sidebar .nav-active i{
  color: #ffffff !important;
}
/* ===== FIX: Category Tree Active Visibility ===== */

/* Left category tree active button */
#ui_cat_tree .nav-active {
  background: #0f172a !important;   /* slate-900 */
  color: #ffffff !important;
  border-color: #0f172a !important;
}

/* Active item title */
#ui_cat_tree .nav-active .font-black {
  color: #ffffff !important;
}

/* Active item meta text */
#ui_cat_tree .nav-active .text-slate-500,
#ui_cat_tree .nav-active .text-white\/80 {
  color: #e5e7eb !important; /* slate-200 */
}

/* Active badge (count chip) */
#ui_cat_tree .nav-active .chip {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}


/* Desktop tabs for Accounts sub-sections */
.acc-tabsbar{align-items:center;}
@media (min-width: 768px){
  .acc-tabsbar{width:100%;}
  .acc-tabsbar .pill{flex:1; text-align:center; padding:.55rem 1rem;}
}

/* =============================
   Mobile keyboard friendly modal
   ============================= */
#party_add_layer, #acc_edit_layer{
  align-items: flex-start; /* so the card can move up when keyboard opens */
}
.modal-card{
  margin-top: 10px;
  max-height: calc(100vh - 20px);
  overflow: auto;
}