/*
============================================================
STATMANA — LIQUID GLASS V4
Targets actual STATMANA content containers.
============================================================
*/

:root{
  --lg-aqua:#73CEDF;
  --lg-blue:#2C6883;
  --lg-deep:#1A323C;

  --lg-border:
    rgba(151,229,241,.32);

  --lg-border-soft:
    rgba(255,255,255,.08);

  --lg-shadow:
    rgba(0,0,0,.42);
}


/* =========================================================
   1. BACKGROUND LIGHT BEHIND GLASS
   This is what makes backdrop-filter visible.
   ========================================================= */

.content,
.main-content,
.page-content,
main{

  position:relative !important;
  isolation:isolate;
}


.content::before,
.main-content::before,
.page-content::before,
main::before{

  content:"";

  position:absolute;

  z-index:-2;

  pointer-events:none;

  inset:0;

  min-height:100%;

  background:

    radial-gradient(
      700px 420px
      at 9% 9%,
      rgba(115,206,223,.18),
      rgba(115,206,223,.055) 38%,
      transparent 70%
    ),

    radial-gradient(
      700px 500px
      at 88% 28%,
      rgba(44,104,131,.16),
      rgba(44,104,131,.04) 42%,
      transparent 73%
    ),

    radial-gradient(
      650px 400px
      at 42% 83%,
      rgba(115,206,223,.075),
      transparent 70%
    );

  opacity:.9;
}


/* =========================================================
   2. REAL STATMANA GLASS CONTAINERS
   ========================================================= */

.dashboard-income,
#dashboardIncomeBox,

.dashboard-expense-block,

.wide-expense,
.expense-panel,

.filter-card,

.report-group,
.report-kpi,

.expense-report-table,
.dashboard-expense-table,

.dashboard-kpis .card,

#incomeForm,
#expenseForm,
#transferForm,
#transfersTable,

.card,
.panel,

.hookah-chart-box,
.hookah-chart-wide,

.chart-card,
.chart-box,
.chart-wrap,

.kpi-card,
.stat-card,
.metric-card,
.summary-card {

  position:relative !important;

  overflow:hidden;

  background:

    radial-gradient(
      120% 180%
      at -10% -30%,
      rgba(190,244,252,.18) 0%,
      rgba(115,206,223,.09) 25%,
      rgba(115,206,223,.025) 48%,
      transparent 70%
    ),

    linear-gradient(
      135deg,
      rgba(255,255,255,.065) 0%,
      rgba(255,255,255,.026) 28%,
      rgba(8,13,15,.42) 60%,
      rgba(4,7,8,.55) 100%
    )

    !important;


  border:
    1px solid
    var(--lg-border)
    !important;


  box-shadow:

    inset 0 1px 0
      rgba(255,255,255,.20),

    inset 1px 0 0
      rgba(174,236,246,.075),

    inset 0 -1px 0
      rgba(0,0,0,.34),

    0 18px 46px
      var(--lg-shadow),

    0 0 28px
      rgba(115,206,223,.035)

    !important;


  backdrop-filter:
    blur(26px)
    saturate(180%)
    brightness(1.08);

  -webkit-backdrop-filter:
    blur(26px)
    saturate(180%)
    brightness(1.08);
}


/* =========================================================
   3. LIQUID TOP REFLECTION
   ========================================================= */

.dashboard-income::before,
#dashboardIncomeBox::before,

.dashboard-expense-block::before,

.wide-expense::before,
.expense-panel::before,

.filter-card::before,

.report-group::before,
.report-kpi::before,

.expense-report-table::before,
.dashboard-expense-table::before,

.dashboard-kpis .card::before,

.card::before,
.panel::before,

.hookah-chart-box::before,
.hookah-chart-wide::before,

.chart-card::before,
.chart-box::before,
.chart-wrap::before {

  content:"";

  position:absolute;

  z-index:0;

  pointer-events:none;

  top:-1px;
  left:1px;
  right:1px;

  height:44%;

  border-radius:inherit;

  background:

    linear-gradient(
      180deg,
      rgba(230,251,255,.14) 0%,
      rgba(173,232,241,.060) 26%,
      rgba(115,206,223,.018) 61%,
      transparent 100%
    );

  opacity:.82;
}


/* =========================================================
   4. REFRACTIVE EDGE
   ========================================================= */

.dashboard-income::after,
#dashboardIncomeBox::after,

.dashboard-expense-block::after,

.wide-expense::after,
.expense-panel::after,

.filter-card::after,

.report-group::after,
.report-kpi::after,

.expense-report-table::after,
.dashboard-expense-table::after,

.dashboard-kpis .card::after,

.card::after,
.panel::after,

.hookah-chart-box::after,
.hookah-chart-wide::after,

.chart-card::after,
.chart-box::after,
.chart-wrap::after {

  content:"";

  position:absolute;

  z-index:20;

  pointer-events:none;

  inset:0;

  border-radius:inherit;

  box-shadow:

    inset 0 0 0 1px
      rgba(255,255,255,.03),

    inset 0 1px 2px
      rgba(231,252,255,.10),

    inset 12px 0 30px
      rgba(115,206,223,.025),

    inset -12px 0 26px
      rgba(255,255,255,.012);
}


/* =========================================================
   5. KEEP CONTENT ABOVE GLASS REFLECTION
   ========================================================= */

.dashboard-income > *,
#dashboardIncomeBox > *,

.dashboard-expense-block > *,

.wide-expense > *,
.expense-panel > *,

.filter-card > *,

.report-group > *,
.report-kpi > *,

.expense-report-table > *,
.dashboard-expense-table > *,

.dashboard-kpis .card > *,

.card > *,
.panel > *,

.hookah-chart-box > *,
.hookah-chart-wide > *,

.chart-card > *,
.chart-box > *,
.chart-wrap > * {

  position:relative;
  z-index:2;
}


/* =========================================================
   6. KPI / SMALL CELLS
   ========================================================= */

.dashboard-kpis .card,
.report-kpi,
.kpi-card,
.stat-card,
.metric-card,
.summary-card {

  background:

    radial-gradient(
      100% 120%
      at 0% 0%,
      rgba(151,229,241,.14),
      rgba(115,206,223,.035) 45%,
      transparent 68%
    ),

    linear-gradient(
      135deg,
      rgba(255,255,255,.055),
      rgba(5,9,10,.56)
    )

    !important;


  box-shadow:

    inset 0 1px 0
      rgba(255,255,255,.17),

    0 12px 30px
      rgba(0,0,0,.34)

    !important;
}


/* =========================================================
   7. EXPENSE / INCOME BIG FORMS
   Stronger glass because these are the blocks you showed.
   ========================================================= */

.dashboard-income,
#dashboardIncomeBox,
.dashboard-expense-block,
.wide-expense,
.expense-panel {

  background:

    radial-gradient(
      80% 140%
      at -4% -12%,
      rgba(181,239,248,.22) 0%,
      rgba(115,206,223,.10) 28%,
      rgba(115,206,223,.025) 53%,
      transparent 72%
    ),

    radial-gradient(
      75% 120%
      at 102% 120%,
      rgba(44,104,131,.15),
      transparent 62%
    ),

    linear-gradient(
      135deg,
      rgba(255,255,255,.072),
      rgba(10,16,18,.43) 48%,
      rgba(4,7,8,.56)
    )

    !important;


  border-color:
    rgba(144,223,236,.34)
    !important;


  box-shadow:

    inset 0 1px 0
      rgba(255,255,255,.22),

    inset 1px 0 0
      rgba(173,235,245,.08),

    0 20px 48px
      rgba(0,0,0,.42),

    0 0 34px
      rgba(115,206,223,.035)

    !important;
}


/* =========================================================
   8. INPUTS / BUTTONS / SIDEBAR — DO NOT GLASSIFY
   ========================================================= */

button,
.btn,
.button,
input,
select,
textarea{

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}


.sidebar,
aside,
nav,
header,
.topbar,
.top-bar,
.page-header{

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}


/* =========================================================
   9. TABLE CELLS — NORMAL
   ========================================================= */

table,
thead,
tbody,
tr,
th,
td{

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}


/* =========================================================
   10. MOBILE
   ========================================================= */

@media(max-width:900px){

  .dashboard-income,
  #dashboardIncomeBox,
  .dashboard-expense-block,
  .wide-expense,
  .expense-panel,
  .filter-card,
  .report-group,
  .report-kpi,
  .card,
  .panel,
  .hookah-chart-box,
  .hookah-chart-wide{

    backdrop-filter:
      blur(16px)
      saturate(145%);

    -webkit-backdrop-filter:
      blur(16px)
      saturate(145%);
  }

}