:root {
	/* color variables */
	--client-folio-05-lovable-app-geyser: #dae0e7;
	--client-folio-05-lovable-app-white-20: #fff;
	--client-folio-05-lovable-app-white: #fff;
	--client-folio-05-lovable-app-white-80: #fff;
	--client-folio-05-lovable-app-tory-blue: #0d4da5;
	--client-folio-05-lovable-app-mirage: #1d2530;
	--client-folio-05-lovable-app-slate-gray: #6c7c93;
	--client-folio-05-lovable-app-salem: #16a249;
	--client-folio-05-lovable-app-flamingo: #ef4343;
	--client-folio-05-lovable-app-buttercup: #f59f0a;
	--client-folio-05-lovable-app-aqua-haze-30: #f2f5f8;
	--client-folio-05-lovable-app-geyser-50: #dae0e7;
	--client-folio-05-lovable-app-buttercup-10: #f59f0a;
	--client-folio-05-lovable-app-buttercup-20: #f59f0a;
	--color-azure-35: #0d4da5;
	--color-white-solid: #fff;
	--color-azure-15: #1d2530;
	--color-spring-green-36: #16a249;
	--color-red-60: #ef4343;
	--color-orange-50: #f59f0a;
	--color-grey-98: #f9fafb;
	--color-orange-69: #ff8e63;
	--color-rose-75: #ff7eb0;
	--color-blue-65: #4b73ff;
	--color-magenta-70: #ff66f4;
	--color-red-50: #ff0105;
	--color-grey-96-80: rgba(242, 245, 248, 0.8);
	--color-grey-96: #f2f5f8;
	--color-azure-88: #dae0e7;
	--color-spring-green-36-20: rgba(22, 162, 73, 0.2);
	--color-spring-green-36-10: rgba(22, 162, 73, 0.1);
	--color-grey-96-50: rgba(242, 245, 248, 0.5);
	--color-azure-50: #6c7c93;
	--color-azure-35-90: rgba(13, 77, 165, 0.9);
	--color-grey-92: #d9ebfc;
	--color-orange-50-20: rgba(245, 159, 10, 0.2);
	--color-orange-50-10: rgba(245, 159, 10, 0.1);
	--color-azure-45: #1162d4;
	--color-white-20: rgba(255, 255, 255, 0.2);
	--color-white-80: rgba(255, 255, 255, 0.8);
	--color-grey-99: #fcfcfd;
	--color-grey-96-30: rgba(242, 245, 248, 0.3);
	--color-azure-88-50: rgba(218, 224, 231, 0.5);
	--color-black-solid: #000;
	--color-grey-65: #a1a1aa;

	/* string variables */
	--font-family-font-1: "Segoe UI Symbol";
	--font-family-font-2: "Consolas";
	--font-family-font-3: "Inter";

	/* number variables */
	--stroke-weight-1-67: 1.6666666269302368px;
	--opacity-100: 100px;
	--stroke-weight-1-33: 1.3333333730697632px;
	--stroke-weight-2: 2px;
	--stroke-weight-1: 1px;
	--stroke-weight-0-52: 0.517241358757019px;
	--font-size-18: 18px;
	--font-weight-400: 400px;
	--line-height-28: 28px;
	--font-size-12: 12px;
	--line-height-16: 16px;
	--font-size-14: 14px;
	--line-height-20: 20px;
	--item-spacing-xs: 8px;
	--height-1200: 1200px;
	--item-spacing-m: 32px;
	--width-1400: 1400px;
	--item-spacing-560-46: 560.4600219726562px;
	--item-spacing-s: 24px;
	--stroke-weight-4: 4px;
	--width-80: 80px;
	--font-size-30: 30px;
	--line-height-36: 36px;
	--letter-spacing-0-35: 0.3499999940395355px;
	--line-height-40: 40px;
	--letter-spacing-0-45: -0.44999998807907104px;
	--font-weight-700: 700px;
	--letter-spacing-0-5: -0.5px;
	--item-spacing-3-38: 3.375px;
	--line-height-22-75: 22.75px;
	--line-height-21: 21px;

	/* responsive margins / paddings */
	--margin-sm: 16px;
	--margin-md: 32px;
}

* {
	--min-screen-size: 430;
	--max-screen-size: 1440;
	--interpolate-diff: calc(var(--max-font-size) - var(--min-font-size));
	--interpolate: clamp(calc(var(--min-font-size) * 1px), calc((var(--min-font-size) * 1px) + var(--interpolate-diff) * ((100vw - calc(var(--min-screen-size) * 1px)) / (var(--max-screen-size) - var(--min-screen-size)))), calc(var(--max-font-size) * 1px));
}

html {
	height: 100%;
	font-size: 16px;
}



/* text utility classes */

.client-folio-05-lovable-app-segoe-ui-symbol-regular2 {
	color: var(--client-folio-05-lovable-app-white);
	font-size: 36px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.111;
	letter-spacing: 0px;
}

.client-folio-05-lovable-app-segoe-ui-symbol-regular1 {
	color: var(--client-folio-05-lovable-app-white-80);
	font-size: 17.72px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.58;
	letter-spacing: 0px;
}

.client-folio-05-lovable-app-semantic-cell2 {
	color: var(--client-folio-05-lovable-app-slate-gray);
	font-size: 13.56px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.475;
	letter-spacing: 0px;
}

.client-folio-05-lovable-app-segoe-ui-symbol-regular5 {
	color: var(--client-folio-05-lovable-app-slate-gray);
	font-size: 14px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.625;
	letter-spacing: 0px;
}

.client-folio-05-lovable-app-semantic-data {
	color: var(--client-folio-05-lovable-app-mirage);
	font-size: 13.67px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.463;
	letter-spacing: 0px;
}

.client-folio-05-lovable-app-semantic-heading1 {
	color: var(--client-folio-05-lovable-app-white);
	font-size: 30px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0px;
}

.client-folio-05-lovable-app-segoe-ui-symbol-regular3 {
	color: var(--client-folio-05-lovable-app-mirage);
	font-size: 18px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.556;
	letter-spacing: 0px;
}

.client-folio-05-lovable-app-semantic-strong {
	color: var(--client-folio-05-lovable-app-mirage);
	font-size: 14px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.429;
	letter-spacing: 0px;
}

.client-folio-05-lovable-app-semantic-cell1 {
	color: var(--client-folio-05-lovable-app-slate-gray);
	font-size: 13.89px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.44;
	letter-spacing: 0px;
}

.client-folio-05-lovable-app-semantic-heading2 {
	color: var(--client-folio-05-lovable-app-mirage);
	font-size: 16px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0px;
}

.client-folio-05-lovable-app-semantic-heading3 {
	color: var(--client-folio-05-lovable-app-mirage);
	--min-font-size: 16; --max-font-size: 20; font-size: var(--interpolate);
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.5px;
}

.client-folio-05-lovable-app-segoe-ui-symbol-regular4 {
	color: var(--client-folio-05-lovable-app-buttercup);
	font-size: 12px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.333;
	letter-spacing: 0px;
}

.client-folio-05-lovable-app-consolas-bold {
	color: var(--client-folio-05-lovable-app-mirage);
	font-size: 24px;
	font-family: var(--font-family-font-2);
	font-style: normal;
	font-weight: 700;
	line-height: 1.333;
	letter-spacing: 0px;
}

.client-folio-05-lovable-app-segoe-ui-symbol-regular-upper {
	color: var(--client-folio-05-lovable-app-white-80);
	font-size: 14px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.429;
	letter-spacing: 0.35px;
}

.sub-text-client-folio-05-lovable-app-mirage {
	color: var(--client-folio-05-lovable-app-mirage);
}



/* ui objects utility classes */

.card {
	box-shadow: 0px 1px 2px 0px #fff;
	width: 100%;
	display: flex;
	flex-direction: column;
	background-position: top left;
	background-size: auto auto;
	background-repeat: no-repeat;
	padding: 24px 24px 0 24px;
	border: var(--stroke-weight-1) solid var(--client-folio-05-lovable-app-geyser);
	border-radius: 8px;
}

.group {
	height: 0;
	border-top: 2px solid var(--client-folio-05-lovable-app-tory-blue);
	border-radius: 1.67px;
}

.btn-light {
	display: flex;
	background-color: #f2f5f8;
	padding: 9px 24px;
	border-radius: 9999px;
}



/* button hover utility classes */

.hover-bright:hover {
	filter: brightness(1.2);
}

.hover-dark:hover {
	filter: brightness(0.85);
}

.hover-zoom:hover {
	scale: 1.05;
}


/* ✅ Responsiveness */
@media (max-width: 1024px) {
  .dashboard-header {
    flex-direction: column;
    text-align: center;
  }
  .balance-info { text-align: center; margin-top: 10px; }
}

@media (max-width: 768px) {
  .quick-actions { flex-direction: column; }
  .transaction-table,
  .transaction-table thead,
  .transaction-table tbody,
  .transaction-table th,
  .transaction-table td,
  .transaction-table tr {
    display: block;
    width: 100%;
  }
  .transaction-table thead { display: none; }
  .transaction-table tr {
    margin-bottom: 15px;
    background: #fff;
    border-radius: 8px;
    padding: 10px;
  }
  .transaction-table td {
    border: none;
    display: flex;
    justify-content: space-between;
    padding: 8px 5px;
  }
  .transaction-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #6b7280;
    margin-right: 10px;
  }
}