:root{
  /* Paleta "qiell/pastel" - emrat e variablave mbeten si para (gjelbër/ar),
     por vlerat tani janë blu-qielli/pastel, që çdo shabllon ekzistues që i
     përdor këto variabla të ri-stilizohet automatikisht pa u prekur. */
  --green-950:#16314F; --green-900:#1C4B78; --green-800:#2B6CA3; --green-700:#2F9BE0;
  --gold-500:#F0A742; --gold-600:#D98F28; --gold-100:#FDF0DA;
  --gray-50:#F4F8FC; --gray-100:#EAF2FA; --gray-200:#DCE9F5; --gray-600:#5C7792; --gray-800:#243B52;
  --ink:#172A3E; --red-600:#C9506B; --red-100:#FBE3EA; --amber-600:#C07F16; --amber-100:#FDF0DA;
  --blue-600:#1E8CB8; --blue-100:#E1F4FA; --emerald-600:#1E9E63; --emerald-100:#E3F8EE;

  --violet-500:#4FB6F2;
  --cyan-text:#0E8CAD; --cyan-100:#E1F6FA; --cyan-200:#CDEFF6;
  --peach-text:#C07F16; --peach-100:#FDF0DA; --peach-200:#FBE6C4;
  --rose-text:#C9477A; --rose-100:#FCE8EE; --rose-200:#F9D2E0;
  --mint-text:#1E9E63; --mint-100:#E3F8EE; --mint-200:#CDF2DF;
  --lavender-text:#1D6FB8; --lavender-100:#E3F1FC; --lavender-200:#D2E8FA;

  --radius-lg:22px; --radius-md:16px; --radius-sm:12px;
}
/* Sfond fiks me "flluska" te buta ngjyrash, qe shtresat xhami (blur) te
   kene dicka pas vetes per t'u turbulluar - pa kete, backdrop-filter nuk
   duket pothuajse fare mbi nje sfond njengjyrësh. */
body{
  font-family:'Inter',sans-serif;color:var(--ink);
  background-color:var(--gray-50);
  background-image:
    radial-gradient(640px circle at 8% 0%, rgba(47,155,224,.16), transparent 60%),
    radial-gradient(560px circle at 95% 10%, rgba(14,140,173,.13), transparent 60%),
    radial-gradient(620px circle at 50% 100%, rgba(240,167,66,.12), transparent 60%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  min-height:100vh;
}
h1,h2,h3,.font-display{font-family:'Lora',serif;}
.tabular{font-variant-numeric:tabular-nums;}

/* Rrumbullakësi e theksuar kudo, pa prekur shabllonet - mbulon komponentët
   standarde të Bootstrap-it (butona, fusha, modale, tabela, badge-at). */
.btn{border-radius:var(--radius-sm)!important;}
.form-control,.form-select{border-radius:var(--radius-sm)!important;border:1.5px solid var(--gray-600)!important;background-color:#fff!important;opacity:1;}
.form-control:focus,.form-select:focus{border-color:var(--violet-500)!important;box-shadow:0 0 0 .2rem rgba(47,155,224,.18);background-color:#fff!important;}
.form-control::placeholder{color:var(--gray-600);opacity:.65;}
.modal-content{
  border-radius:var(--radius-lg)!important;
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 20px 50px rgba(42,36,81,.22);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
}
.modal-backdrop.show{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:.35;}
.badge{border-radius:999px!important;padding:5px 12px!important;font-weight:600;}
.alert{border-radius:var(--radius-md);border:none;}
.table thead th{color:var(--gray-600);font-size:12px;text-transform:uppercase;letter-spacing:.04em;border-bottom-width:1px;}

.sidebar{
  width:250px;flex-shrink:0;color:#eceeea;min-height:100vh;position:sticky;top:0;
  background:linear-gradient(185deg,rgba(22,49,79,.82),rgba(43,108,163,.82));
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-right:1px solid rgba(255,255,255,.08);
}
.sidebar-header{padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.1);}
.sidebar-header .mosque-name{font-family:'Lora',serif;font-size:17px;font-weight:600;color:#fff;line-height:1.3;}
.sidebar-header .app-tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-500);margin-top:4px;}
.nav-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.4);padding:14px 12px 6px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);font-size:14px;color:rgba(255,255,255,.82);text-decoration:none;margin-bottom:2px;}
.nav-item:hover{background:rgba(255,255,255,.1);color:#fff;}
.nav-item.active{background:#fff;color:var(--green-900);font-weight:600;}
.sidebar-footer{
  padding:14px 16px;border-top:1px solid rgba(255,255,255,.12);position:sticky;bottom:0;
  background:rgba(22,49,79,.55);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
}
.user-avatar{width:34px;height:34px;border-radius:50%;background:var(--gold-500);color:var(--green-950);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;}

.topbar{
  background:rgba(255,255,255,.65);border-bottom:1px solid rgba(225,222,242,.7);padding:16px 24px;
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  position:sticky;top:0;z-index:10;
}
.topbar-title{font-family:'Lora',serif;font-size:20px;font-weight:700;color:var(--ink);}
.topbar-sub{font-size:12.5px;color:var(--gray-600);}

.card-app{
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius-lg);
  box-shadow:0 1px 2px rgba(42,36,81,.04),0 8px 28px rgba(42,36,81,.08);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
}
.section-title{font-family:'Lora',serif;font-size:16px;font-weight:700;color:var(--ink);}

.btn-app-primary{background:var(--green-700);color:#fff;border:1px solid var(--green-700);}
.btn-app-primary:hover{background:var(--green-800);color:#fff;}
.btn-app-gold{background:var(--gold-500);color:#3a2a0d;border:1px solid var(--gold-500);font-weight:600;}
.btn-app-gold:hover{background:var(--gold-600);color:#3a2a0d;}

.badge-amber{background:var(--amber-100);color:var(--amber-600);}
.badge-blue{background:var(--blue-100);color:var(--blue-600);}
.badge-emerald{background:var(--emerald-100);color:var(--emerald-600);}
.badge-red{background:var(--red-100);color:var(--red-600);}
.badge-gray{background:var(--gray-100);color:var(--gray-600);}

.donor-header{background:linear-gradient(135deg,var(--green-900),var(--violet-500));border-radius:var(--radius-lg);padding:24px 26px;color:#fff;}
.donor-header .num{font-size:11.5px;letter-spacing:.08em;color:#fff;opacity:.8;text-transform:uppercase;font-weight:700;}

.progress-track{background:var(--gray-100);border-radius:99px;height:8px;overflow:hidden;}
.progress-fill{height:100%;background:var(--violet-500);}

.timeline-note{border-left:3px solid var(--gold-500);padding:8px 0 8px 14px;margin-bottom:10px;}

/* Kartat statistikore pastel (Paneli) - secila me ngjyrën/gradientin e vet,
   rrumbullakësi e theksuar, pa kufi të dukshëm - stili "glassmorphism i butë". */
.stat-tile{
  border-radius:var(--radius-lg);padding:20px 22px;
  border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 6px 18px rgba(42,36,81,.06);
}
.stat-tile .stat-label{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;margin-bottom:8px;}
.stat-tile .stat-value{font-family:'Lora',serif;font-size:30px;font-weight:700;color:var(--ink);}
.stat-tile-violet{background:linear-gradient(145deg,rgba(237,235,251,.75),rgba(223,218,248,.6));}
.stat-tile-violet .stat-label{color:var(--lavender-text);}
.stat-tile-cyan{background:linear-gradient(145deg,rgba(225,246,250,.75),rgba(205,239,246,.6));}
.stat-tile-cyan .stat-label{color:var(--cyan-text);}
.stat-tile-peach{background:linear-gradient(145deg,rgba(253,240,218,.75),rgba(251,230,196,.6));}
.stat-tile-peach .stat-label{color:var(--peach-text);}
.stat-tile-rose{background:linear-gradient(145deg,rgba(252,232,238,.75),rgba(249,210,224,.6));}
.stat-tile-rose .stat-label{color:var(--rose-text);}
.stat-tile-mint{background:linear-gradient(145deg,rgba(227,248,238,.75),rgba(205,242,223,.6));}
.stat-tile-mint .stat-label{color:var(--mint-text);}

@media (max-width:900px){
  .sidebar{position:fixed;z-index:50;height:100vh;transform:translateX(-100%);transition:.25s;}
  .sidebar.open{transform:translateX(0);}
}

/* Tabela me shumë kolona: rrëshqitje horizontale e qetë dhe e dukshme në telefon */
.table-responsive{
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.table-responsive::-webkit-scrollbar{height:8px;}
.table-responsive::-webkit-scrollbar-track{background:transparent;}
.table-responsive::-webkit-scrollbar-thumb{background-color:rgba(116,111,143,.5);border-radius:99px;}

@media (max-width:640px){
  .table-responsive{
    position:relative;
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
      linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.12), rgba(0,0,0,0)),
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), rgba(0,0,0,0)) 100% 0;
    background-repeat:no-repeat;
    background-size:40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment:local, local, scroll, scroll;
  }
}