/* Kooperatif Giderleri — zengin gorsel, buyuk okunakli yazi */

#app #page-expenses{--ex-blue:#2b93ff;--ex-green:#26d8a6;--ex-purple:#a34cff;--ex-cyan:#34cae8}

/* ---- Ust komuta paneli ---- */
#app .expenses-command{
  position:relative;
  min-height:158px;
  padding:26px 30px !important;
  border:1px solid rgba(60,150,225,.45) !important;
  border-radius:16px !important;
  overflow:hidden;
  background-color:#071c30;
  background-image:url('/gider-hero-hd.svg') !important;
  background-position:right center !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  box-shadow:0 20px 48px rgba(0,6,20,.4), inset 0 1px rgba(154,225,255,.09) !important;
}
/* Yazilarin oldugu solda okunabilirlik perdesi */
#app .expenses-command::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(96deg,rgba(3,16,31,.97) 0%,rgba(3,18,34,.92) 34%,rgba(3,18,34,.55) 56%,rgba(3,18,34,.12) 78%,transparent 100%);
}
#app .expenses-command::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(400px 160px at 92% 50%, rgba(43,147,255,.12), transparent 70%);
}
#app .expenses-heading{position:relative;z-index:1;display:flex;align-items:center;gap:18px !important}
#app .expense-hero-icon{
  width:70px !important;height:70px !important;flex:0 0 70px !important;
  display:grid;place-items:center;border-radius:18px;
  background:linear-gradient(145deg,rgba(43,147,255,.28),rgba(20,80,150,.14));
  border:1.5px solid rgba(90,190,255,.6);
  box-shadow:0 0 28px rgba(43,147,255,.35), inset 0 1px rgba(200,240,255,.2);
}
#app .expense-hero-icon svg{width:36px !important;height:36px !important;stroke:#8ed4ff !important;stroke-width:1.8 !important;fill:none !important}
#app .expenses-heading>div>span{
  font-size:11.5px !important;letter-spacing:2.6px !important;font-weight:900 !important;color:#f3bb36 !important;
}
#app .expenses-heading h2{font-size:34px !important;margin:5px 0 4px !important;letter-spacing:-.6px !important}
#app .expenses-heading p{font-size:14px !important;color:#a5c3d4 !important;margin:0 !important;font-weight:600 !important}

/* Sag meta alanini sade tut, tarih/profil kartlari yok */
#app .expenses-meta-clean{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;
  padding:11px 20px;border-radius:14px;align-self:center;
  background:rgba(6,32,50,.78);border:1px solid rgba(37,224,166,.45);
  backdrop-filter:blur(8px);
  box-shadow:0 10px 26px rgba(0,4,14,.5),0 0 24px rgba(37,224,166,.16);
  animation:expCardGlow 3.2s ease-in-out infinite;
}
@keyframes expCardGlow{
  0%,100%{box-shadow:0 10px 26px rgba(0,4,14,.5),0 0 22px rgba(37,224,166,.14)}
  50%{box-shadow:0 10px 26px rgba(0,4,14,.5),0 0 34px rgba(37,224,166,.32)}
}
#app .expense-live-dot{
  width:10px;height:10px;border-radius:50%;background:#25e0a6;
  box-shadow:0 0 12px rgba(37,224,166,1);animation:expLive 1.8s ease-in-out infinite;
}
@keyframes expLive{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
#app .expense-live-text{color:#a8f5d8;font-size:13px;font-weight:800;letter-spacing:.3px;white-space:nowrap}
#app .checks-date-tile,#app .checks-user-tile{display:none !important}

/* ---- Kategori kartlari ---- */
#app .expense-summary-grid{gap:14px !important;margin-bottom:16px !important}
#app .expense-category-card,
#app .expense-chart-card{
  min-height:186px !important;
  padding:20px 20px 18px !important;
  border-radius:15px !important;
  border-width:1.5px !important;
  box-shadow:0 16px 36px rgba(0,6,20,.32), inset 0 1px rgba(154,225,255,.09) !important;
  transition:transform .18s ease, box-shadow .18s ease;
}
#app .expense-category-card:hover,
#app .expense-chart-card:hover{transform:translateY(-3px);box-shadow:0 22px 44px rgba(0,6,20,.42), inset 0 1px rgba(154,225,255,.14) !important}
#app .expense-category-head{gap:13px !important}
#app .expense-category-icon{width:46px !important;height:46px !important;flex:0 0 46px !important;border-radius:12px !important}
#app .expense-category-icon svg{width:24px !important;height:24px !important}
#app .expense-category-head b{font-size:15px !important;letter-spacing:.4px !important}
#app .expense-category-head small{font-size:12px !important;color:#9dbccd !important;margin-top:4px !important;line-height:1.4 !important}
#app .expense-category-card>strong{font-size:32px !important;letter-spacing:-1px !important;margin:12px 0 10px !important}
#app .expense-category-meta{font-size:12px !important;gap:10px !important}
#app .expense-category-meta b{font-size:12.5px !important}
#app .expense-progress{height:9px !important;border-radius:6px !important;margin-top:12px !important}
#app .expense-progress b{font-size:12px !important;font-weight:900 !important}

/* Dagitim karti */
#app .expense-chart-card{padding:18px !important}
#app .expense-chart-card b{font-size:14.5px !important}
#app .expense-chart-card small{font-size:11.5px !important;color:#9dbccd !important}
#app .expense-chart-body{font-size:13px !important}

/* ---- Sekmeler + arama ---- */
#app .expenses-tabs button,
#app .expense-tabs button{font-size:13.5px !important;font-weight:800 !important;padding:11px 20px !important}
#app .expenses-toolbar input,
#app .expense-list-toolbar input{font-size:14px !important;min-height:46px !important}
#app .expenses-toolbar button,
#app .expense-list-toolbar button{font-size:13.5px !important;min-height:46px !important}
#app .expenses-toolbar label,
#app .expense-list-toolbar label{font-size:12px !important;font-weight:800 !important;color:#a9c8d9 !important}
#app .expenses-toolbar input[type=date]{font-size:13px !important;min-height:46px !important}

/* ---- Tablo ---- */
#app .expenses-table th{font-size:12px !important;letter-spacing:.08em !important;font-weight:900 !important;color:#9fc4d9 !important;padding:14px 13px !important}
#app .expenses-table td{font-size:14px !important;padding:15px 13px !important}
#app .expenses-table td small{font-size:12px !important;line-height:1.4 !important;color:#9fbccb !important}
#app .expenses-table strong{font-size:14.5px !important;font-weight:800 !important}
#app .expense-amount,
#app .expenses-table td:nth-child(5){font-size:15.5px !important;font-weight:900 !important;font-variant-numeric:tabular-nums !important;white-space:nowrap !important}
#app .expenses-table .pill,
#app .expenses-table [class*="status"]{font-size:12.5px !important;font-weight:900 !important;padding:6px 13px !important}

/* Bos durum */
#app .expenses-empty b,#app .expense-empty b{font-size:19px !important}
#app .expenses-empty,#app .expense-empty{font-size:14px !important;line-height:1.7 !important}
#app .expenses-empty button,#app .expense-empty button{font-size:14px !important;padding:12px 22px !important}

/* ---- Hizli islemler + son giderler ---- */
#app .expenses-side h3,
#app .expense-side h3{font-size:16px !important;font-weight:900 !important;letter-spacing:.2px !important}
#app .expenses-side button,
#app .expense-side button,
#app .expense-quick button{font-size:14px !important;font-weight:800 !important;min-height:48px !important;padding:12px 16px !important}
#app .expenses-side small,
#app .expense-side small{font-size:12px !important}
#app .expense-recent-row{font-size:13px !important;padding:12px 4px !important}

/* Alt bilgi satiri */
#app .expenses-footer,
#app .expense-list-footer{font-size:12.5px !important;color:#9dbccd !important}

/* Excel aktarim bolumu */
#app .expenses-import h3,
#app .expense-import h3{font-size:16px !important}
#app .expenses-import p,
#app .expense-import p{font-size:13px !important;line-height:1.6 !important}

@media(max-width:1200px){
  #app .expense-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  #app .expenses-heading h2{font-size:28px !important}
}
@media(max-width:760px){
  #app .expense-summary-grid{grid-template-columns:1fr !important}
  #app .expenses-command{padding:18px !important;background-size:auto, 200px auto !important}
  #app .expenses-heading h2{font-size:23px !important}
  #app .expenses-meta-clean{display:none !important}
  #app .expense-category-card>strong{font-size:26px !important}
}