@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg-main: #F3F4F6;
  --bg-card: #FFFFFF;
  --bg-sidebar: #F8FAFC;
  --bg-hover: rgba(15, 23, 42, 0.04);
  --primary: #3B82F6;
  --primary-light: #60A5FA;
  --success: #10B981;
  --border: #E5E7EB;
  --text-main: #0F172A;
  --text-sub: #475569;
  --text-muted: #64748B;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
  --shadow-hover: 0 8px 24px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 14px 40px rgba(15, 23, 42, 0.14);
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --transition: 0.25s ease;
  --transition-fast: 0.15s ease;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body.dashboard-body {
  font-family: var(--font-main);
  background: var(--bg-main);
  color: var(--text-main);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.dashboard-body * {
  font-family: var(--font-main);
}

/* kavi buttons (high-specificity override; beats kavi.css load order) */
body.dashboard-body .kaviBtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--primary);color:#fff;text-decoration:none;font-weight:800;border:1px solid rgba(59,130,246,.35);cursor:pointer;transition:var(--transition-fast);box-shadow:0 6px 18px rgba(59,130,246,.18)}
body.dashboard-body .kaviBtn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(59,130,246,.22)}
body.dashboard-body .kaviBtn:active{transform:translateY(0);box-shadow:0 6px 18px rgba(59,130,246,.18)}
body.dashboard-body .kaviBtn:focus{outline:none;box-shadow:0 0 0 4px rgba(59,130,246,.18),0 10px 22px rgba(59,130,246,.22)}
body.dashboard-body .kaviBtn[disabled],body.dashboard-body .kaviBtn.kaviDisabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
body.dashboard-body .kaviBtnSecondary{background:#fff;color:var(--text-main);border-color:rgba(148,163,184,.45);box-shadow:0 6px 18px rgba(15,23,42,.06)}
body.dashboard-body .kaviBtnSecondary:hover{box-shadow:0 10px 22px rgba(15,23,42,.10)}
body.dashboard-body .kaviBtnDanger{background:#ef4444;border-color:rgba(239,68,68,.35);box-shadow:0 6px 18px rgba(239,68,68,.18)}
body.dashboard-body .kaviBtnDanger:hover{box-shadow:0 10px 22px rgba(239,68,68,.22)}
body.dashboard-body .kaviBtnSm{padding:8px 10px;border-radius:10px;font-size:13px;font-weight:800}
body.dashboard-body .kaviBtnIcon{padding:10px;width:42px;height:42px}
body.dashboard-body .kaviBtnIcon.kaviBtnSm{padding:8px;width:36px;height:36px}
body.dashboard-body .kaviBtnIcon .icon{font-size:18px}
body.dashboard-body .kaviBtnIcon.kaviBtnSm .icon{font-size:16px}

/* validation */
body.dashboard-body .kaviFieldInvalid{border-color:rgba(239,68,68,.65) !important; box-shadow:0 0 0 4px rgba(239,68,68,.12) !important}
body.dashboard-body .kaviFieldError.kaviFieldErrorJs{margin-top:8px}

/* modal */
body.dashboard-body.kaviModalLock{overflow:hidden}
body.dashboard-body .kaviModalOverlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(15,23,42,.55);backdrop-filter:blur(2px);z-index:90}
body.dashboard-body .kaviModalOverlay.kaviModalOpen{display:flex}
body.dashboard-body .kaviModal{width:100%;max-width:860px;background:rgba(255,255,255,.96);border:1px solid rgba(148,163,184,.22);border-radius:20px;box-shadow:0 24px 60px rgba(15,23,42,.28);padding:16px}
body.dashboard-body .kaviModalHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
body.dashboard-body .kaviModalTitle{font-size:18px;font-weight:950;letter-spacing:-.2px}
body.dashboard-body .kaviModalSub{margin-top:4px;color:var(--text-sub);font-weight:700}
body.dashboard-body .kaviModalBody{margin-top:12px}
body.dashboard-body .kaviTabs{display:flex;gap:10px;padding:8px;border-radius:16px;background:rgba(15,23,42,.04);border:1px solid rgba(148,163,184,.18)}
body.dashboard-body .kaviTabBtn{flex:1;border:none;background:transparent;padding:10px 12px;border-radius:12px;font-weight:900;color:var(--text-sub);cursor:pointer;transition:var(--transition-fast)}
body.dashboard-body .kaviTabBtn:hover{background:rgba(15,23,42,.05)}
body.dashboard-body .kaviTabBtn.kaviTabActive{background:#fff;color:var(--text-main);box-shadow:0 10px 22px rgba(15,23,42,.08);border:1px solid rgba(148,163,184,.18)}
body.dashboard-body .kaviInfoGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body.dashboard-body .kaviInfoLabel{color:var(--text-sub);font-weight:800;font-size:12px}
body.dashboard-body .kaviInfoValue{margin-top:4px;font-weight:950}
body.dashboard-body .kaviTxRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:16px;background:rgba(15,23,42,.03);border:1px solid rgba(148,163,184,.14);margin-bottom:10px}
body.dashboard-body .kaviTxTitle{font-weight:950}
body.dashboard-body .kaviTxSub{margin-top:3px;color:var(--text-sub);font-weight:700;font-size:12px}
body.dashboard-body .kaviTxRight{font-weight:950;white-space:nowrap;display:flex;align-items:center;gap:12px}

/* topbar */
body.dashboard-body .kaviTopbar{
  position:sticky;top:0;z-index:30;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(148,163,184,.18);
  padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
body.dashboard-body .kaviTopbarLeft{display:flex;align-items:center;gap:12px;min-width:0}
body.dashboard-body .kaviTopbarTitles{display:flex;flex-direction:column;gap:2px;min-width:0}
body.dashboard-body .kaviTopbarTitle{font-size:15px;font-weight:950;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.dashboard-body .kaviTopbarSubtitle{font-size:12px;color:var(--text-sub);font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

body.dashboard-body .kaviTopbarRight{display:flex;align-items:center;gap:10px}
body.dashboard-body .kaviUserChip{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:999px;border:1px solid rgba(148,163,184,.20);background:rgba(255,255,255,.70)}
body.dashboard-body .kaviUserAvatar{width:32px;height:32px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:950;color:#fff;background:linear-gradient(135deg,#3B82F6,#60A5FA)}
body.dashboard-body .kaviUserMeta{display:flex;flex-direction:column;line-height:1.1}
body.dashboard-body .kaviUserName{font-weight:900;font-size:13px;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.dashboard-body .kaviUserRole{font-weight:800;font-size:12px;color:var(--text-sub)}
body.dashboard-body .kaviTopbarLogoutBtn{background:#fff}

/* page title + actions */
body.dashboard-body .kaviPageTitleBar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 14px}
body.dashboard-body .kaviPageTitleBar .kaviPageTitle{margin:0}

body.dashboard-body .kaviDashboardHeader{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:6px 0 14px}
body.dashboard-body .kaviDashboardTitle{font-size:30px;font-weight:950;letter-spacing:-.2px;line-height:1.1}
body.dashboard-body .kaviDashboardSub{margin-top:6px;color:var(--text-sub);font-weight:650}
body.dashboard-body .kaviDashboardActions{display:flex;gap:10px;flex-wrap:wrap}

body.dashboard-body .kaviStatGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:14px}
body.dashboard-body .kaviStatGridWide{grid-template-columns:repeat(3,minmax(0,1fr))}
body.dashboard-body .kaviStatCard{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px;border-radius:18px;background:#fff;border:1px solid rgba(148,163,184,.18);box-shadow:0 12px 26px rgba(15,23,42,.06);text-decoration:none;color:inherit;transition:var(--transition-fast)}
body.dashboard-body .kaviStatCard:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(15,23,42,.10)}
body.dashboard-body .kaviStatTitle{color:var(--text-sub);font-weight:800;font-size:13px}
body.dashboard-body .kaviStatValue{margin-top:6px;font-weight:950;font-size:30px;letter-spacing:-.2px}
body.dashboard-body .kaviStatHint{margin-top:6px;color:var(--text-muted);font-weight:650;font-size:13px}
body.dashboard-body .kaviStatIcon{width:46px;height:46px;border-radius:16px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(148,163,184,.18)}
body.dashboard-body .kaviStatIcon .icon svg{width:22px;height:22px}

body.dashboard-body .kaviStatPurple .kaviStatIcon{background:rgba(167,139,250,.18);color:#6d28d9;border-color:rgba(167,139,250,.25)}
body.dashboard-body .kaviStatBlue .kaviStatIcon{background:rgba(96,165,250,.18);color:#1d4ed8;border-color:rgba(96,165,250,.25)}
body.dashboard-body .kaviStatGreen .kaviStatIcon{background:rgba(52,211,153,.18);color:#047857;border-color:rgba(52,211,153,.25)}
body.dashboard-body .kaviStatOrange .kaviStatIcon{background:rgba(251,146,60,.18);color:#c2410c;border-color:rgba(251,146,60,.25)}
body.dashboard-body .kaviStatMoneyGreen .kaviStatIcon{background:rgba(16,185,129,.14);color:#047857;border-color:rgba(16,185,129,.22)}
body.dashboard-body .kaviStatMoneyRed .kaviStatIcon{background:rgba(239,68,68,.14);color:#b91c1c;border-color:rgba(239,68,68,.22)}

body.dashboard-body .kaviChartGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
body.dashboard-body .kaviChartCard{padding:16px}
body.dashboard-body .kaviChartWrap{height:220px}

/* filterButtons (actions cell override; avoid full-width buttons on desktop tables) */
body.dashboard-body .kaviTable td.kaviTdActions .filterButtons{width:auto}
body.dashboard-body .kaviTable td.kaviTdActions .filterButtons a,
body.dashboard-body .kaviTable td.kaviTdActions .filterButtons button{width:auto}

/* icon button */
body.dashboard-body .kaviIconBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:12px;border:1px solid rgba(148,163,184,.45);background:#fff;color:var(--text-main);cursor:pointer;transition:var(--transition-fast);box-shadow:0 6px 18px rgba(15,23,42,.06)}
body.dashboard-body .kaviIconBtn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(15,23,42,.10)}
body.dashboard-body .kaviIconBtn:active{transform:translateY(0)}

/* mobile sidebar */
body.dashboard-body .kaviSidebarOverlay{display:none}
body.dashboard-body .kaviSidebarCloseBtn{display:none}

/* sidebar modernization (clean + modern) */
body.dashboard-body .kaviSidebar{
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(96,165,250,.18), transparent 55%),
    radial-gradient(900px 420px at 80% 10%, rgba(59,130,246,.22), transparent 55%),
    linear-gradient(180deg, #0b1f3a 0%, #0a1830 55%, #081426 100%);
  border-right:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 60px rgba(2,6,23,.22);
}
body.dashboard-body .kaviLogo{padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.10)}
body.dashboard-body .kaviLogoTitle{font-size:16px;font-weight:950;letter-spacing:-.2px;color:#fff}
body.dashboard-body .kaviLogoSub{margin-top:6px;color:rgba(226,232,240,.82);font-size:12px;font-weight:750}

body.dashboard-body .kaviSidebarNav{padding:12px 10px;gap:6px}
body.dashboard-body .kaviSidebarNav a{
  position:relative;
  padding:12px 12px;
  border-radius:14px;
  font-weight:850;
  color:rgba(226,232,240,.90);
  border:1px solid transparent;
}
body.dashboard-body .kaviSidebarNav a .icon{
  width:18px;height:18px;
  color:rgba(226,232,240,.78);
  transition:var(--transition-fast);
}
body.dashboard-body .kaviSidebarNav a:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.08);
  color:#fff;
}
body.dashboard-body .kaviSidebarNav a:hover .icon{color:#fff}

body.dashboard-body .kaviSidebarNav a.kaviActive{
  background:rgba(59,130,246,.20);
  border-color:rgba(96,165,250,.22);
  color:#fff;
}
body.dashboard-body .kaviSidebarNav a.kaviActive .icon{color:#fff}
body.dashboard-body .kaviSidebarNav a.kaviActive::before{
  content:'';
  position:absolute;
  left:6px;top:10px;bottom:10px;
  width:3px;border-radius:999px;
  background:linear-gradient(180deg, #60A5FA, #3B82F6);
}
body.dashboard-body .kaviSidebarNav a:focus{outline:none;box-shadow:0 0 0 4px rgba(59,130,246,.14)}

body.dashboard-body .kaviSidebarFooter{
  padding:12px 12px;
  border-top:1px solid rgba(255,255,255,.10);
  background:transparent;
}
body.dashboard-body .kaviSidebarFooter .kaviBtn{
  width:100%;
  justify-content:center;
  border-radius:14px;
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.14);
  box-shadow:none;
}
body.dashboard-body .kaviSidebarFooter .kaviBtn:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.18);
  transform:translateY(-1px);
}
@media (min-width: 761px){
  body.dashboard-body .kaviMenuBtn{display:none}
}
@media (max-width: 980px){
  /* table -> cards (tablet/mobil) */
  body.dashboard-body .kaviCard.kaviTableWrap{background:transparent;border:none;box-shadow:none;padding:0}
  body.dashboard-body .kaviTableWrap{overflow:visible}
  body.dashboard-body .kaviTable{min-width:0 !important}
  body.dashboard-body .kaviTable thead{display:none}
  body.dashboard-body .kaviTable tbody{display:block}
  body.dashboard-body .kaviTable tr{display:block;background:#fff;border:1px solid rgba(148,163,184,.22);border-radius:18px;box-shadow:0 12px 26px rgba(15,23,42,.06);padding:12px 12px;margin-bottom:14px}
  body.dashboard-body .kaviTable td{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;padding:10px 2px;border-bottom:1px solid rgba(148,163,184,.14)}
  body.dashboard-body .kaviTable td:last-child{border-bottom:none}
  body.dashboard-body .kaviTable td::before{content:attr(data-label);color:var(--text-sub);font-weight:700;font-size:12px;line-height:1.2}
  body.dashboard-body .kaviTable td{color:var(--text-main);font-weight:800}
  body.dashboard-body .kaviTable tr td:first-child{padding-top:4px;padding-bottom:12px;border-bottom:1px solid rgba(148,163,184,.18);font-size:16px;font-weight:900}
  body.dashboard-body .kaviTable tr td:first-child::before{display:none}
  body.dashboard-body .kaviTable td.kaviTdActions{display:block;border-top:1px solid rgba(148,163,184,.18);padding-top:12px;margin-top:2px}
  body.dashboard-body .kaviTable td.kaviTdActions::before{display:none}
  body.dashboard-body .kaviTable td.kaviTdActions .kaviBtn{box-shadow:none}
  body.dashboard-body .kaviTable td.kaviTdActions .filterButtons{display:flex;gap:10px;width:100%}
  body.dashboard-body .kaviTable td.kaviTdActions .filterButtons .kaviBtnIcon{flex:1;width:auto;height:44px}
  body.dashboard-body .kaviTableEmpty{display:block;border:none;background:transparent;box-shadow:none;padding:10px;color:var(--text-sub)}
}

@media (max-width: 760px){
  body.dashboard-body .kaviTopbar{background:rgba(255,255,255,.92);border-bottom:1px solid rgba(148,163,184,.18)}
  body.dashboard-body .kaviUserMeta{display:none}
  body.dashboard-body .kaviSidebarCloseBtn{display:inline-flex}
  body.dashboard-body .kaviSidebar{position:fixed;top:0;left:0;height:100vh;z-index:50;transform:translateX(-105%);transition:var(--transition-fast);box-shadow:var(--shadow-lg)}
  body.dashboard-body.kaviSidebarOpen .kaviSidebar{transform:translateX(0)}
  body.dashboard-body .kaviSidebarOverlay{position:fixed;inset:0;background:rgba(15,23,42,.40);backdrop-filter:blur(2px);display:none;z-index:40}
  body.dashboard-body.kaviSidebarOpen .kaviSidebarOverlay{display:block}

  body.dashboard-body .kaviContent{padding:14px}
  body.dashboard-body .kaviRow{align-items:stretch}
  body.dashboard-body .kaviFilters{width:100%}
  body.dashboard-body .kaviInput,body.dashboard-body .kaviSelect{min-width:0;width:100%}

  body.dashboard-body .kaviDashboardHeader{align-items:flex-start}
  body.dashboard-body .kaviDashboardTitle{font-size:26px}
  body.dashboard-body .kaviStatGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.dashboard-body .kaviStatGridWide{grid-template-columns:1fr}
  body.dashboard-body .kaviChartGrid{grid-template-columns:1fr}
  body.dashboard-body .kaviChartWrap{height:240px}

  body.dashboard-body .filterButtons{display:flex;gap:10px;width:100%}
  body.dashboard-body .filterButtons .kaviBtnIcon{flex:1;width:auto;height:44px}

  body.dashboard-body .kaviModal{max-width:560px}
  body.dashboard-body .kaviInfoGrid{grid-template-columns:1fr}
}