/* ============ Neşvegâh FİNANS (Mali Takip) — styles ============
   Shares the visual system of the member / admin apps (Spectral + Work Sans,
   warm ground, pill shapes), with Turkish red + Roman purple as the semantic
   accents: purple = income / ödendi / positive, red = expense / ödenmedi. */

:root{
  --bg:oklch(0.98 0.004 80);
  --surface:#fff;
  --ink:oklch(0.22 0.01 80);
  --ink-soft:oklch(0.4 0.02 80);
  --muted:oklch(0.6 0.01 80);
  --line:oklch(0.92 0.008 80);
  --line-soft:oklch(0.94 0.006 80);

  /* Turkish red */
  --red:#d21f2d; --red-100:#fbe6e8; --red-200:#f4c1c6; --red-700:#841019; --red-800:#5c0a11;
  /* Roman purple */
  --purple:#5b2a6e; --purple-100:#efe6f2; --purple-200:#d6c1e0; --purple-700:#351743; --purple-800:#240f2e;
  /* Neutrals */
  --n-100:oklch(0.97 0.004 80); --n-200:oklch(0.93 0.006 80); --n-700:oklch(0.4 0.01 80); --n-800:oklch(0.3 0.01 80);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);
  font-family:'Work Sans',sans-serif;
  color:var(--ink);
  min-height:100vh;
  line-height:1.5;
}

/* ============ APP SHELL ============ */
.app-shell{display:flex;min-height:100vh}
.sidebar{
  width:236px;flex:none;display:flex;flex-direction:column;gap:4px;
  padding:20px 14px;border-right:1px solid var(--line);
  background:var(--surface);position:sticky;top:0;height:100vh;overflow-y:auto;
}
.side-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.brand{display:flex;align-items:center;gap:10px;padding:6px 10px 18px;min-width:0}
.brand img{height:34px;width:auto;flex:none}
.brand .brand-title{font:600 15px 'Spectral',serif;line-height:1.1}
.brand .brand-sub{font-size:10px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
.logout-m{display:none}
.nav-list{display:flex;flex-direction:column;gap:4px}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;
  font:500 14px 'Work Sans',sans-serif;cursor:pointer;color:var(--n-700);
  white-space:nowrap;border:none;background:none;text-align:left;width:100%;
}
.nav-item:hover{background:var(--n-100)}
.nav-item.active{background:var(--red);color:#fff;font-weight:600}
.side-foot{margin-top:auto;padding:12px 10px;border-top:1px solid var(--line)}
.side-foot .who{font-size:13px;font-weight:600}
.side-foot .who-sub{font-size:11px;color:var(--muted)}
.main-col{flex:1;padding:26px clamp(16px,3vw,34px);max-width:1180px;min-width:0}

/* ============ HEADER (mobile) ============ */
.mobile-bar{display:none}

/* ============ TYPOGRAPHY ============ */
h1{font:600 clamp(22px,3.4vw,28px)/1.25 'Spectral',serif;color:var(--ink)}
h2{font:600 18px/1.3 'Spectral',serif;color:var(--ink)}
.page-intro{color:var(--muted);font-size:13px;margin:6px 0 16px;max-width:70ch}
.row-between{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.row-center{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ============ CARDS ============ */
.card{background:var(--surface);border-radius:16px;padding:20px;border:1px solid var(--line);margin-bottom:14px}
.card-kicker{display:block;font:600 11px 'Work Sans',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.card-title{display:block;font:600 15px 'Spectral',serif;color:var(--ink);margin-top:4px}
.card-meta{display:block;font-size:12px;color:var(--muted);margin-top:4px}

.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.kpi-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.report-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 20px;border-radius:14px;border:none;
  font:600 13px 'Work Sans',sans-serif;cursor:pointer;transition:all .15s;text-decoration:none;
}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover:not(:disabled){background:oklch(0.18 0.01 80);transform:translateY(-1px)}
.btn-secondary{background:var(--n-100);color:var(--ink-soft);border:1px solid var(--line)}
.btn-secondary:hover:not(:disabled){background:var(--n-200)}
.btn-ghost{background:none;color:var(--ink-soft);padding:6px 12px;border-radius:10px}
.btn-ghost:hover:not(:disabled){background:var(--n-100)}
.btn-danger{background:none;color:var(--red-700);padding:6px 12px;border-radius:10px}
.btn-danger:hover:not(:disabled){background:var(--red-100)}
.btn-sm{padding:7px 14px;font-size:12px;border-radius:12px}
.btn-full{width:100%}

/* ============ SEGMENTED CONTROL ============ */
.seg{display:inline-flex;background:var(--n-100);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px;flex-wrap:wrap}
.seg-opt{padding:6px 14px;border-radius:9px;font:500 13px 'Work Sans',sans-serif;color:var(--ink-soft);cursor:pointer;border:none;background:none}
.seg-opt.active{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* ============ TAGS ============ */
.tag{display:inline-block;padding:3px 10px;border-radius:999px;font:600 11px 'Work Sans',sans-serif;letter-spacing:.02em}
.tag-red{background:var(--red-100);color:var(--red-800)}
.tag-purple{background:var(--purple-100);color:var(--purple-800)}
.tag-neutral{background:var(--n-200);color:var(--n-800)}

/* ============ TABLES ============ */
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:6px}
table.table{width:100%;border-collapse:collapse;font-size:13.5px}
table.table th{
  text-align:left;font:600 11.5px 'Work Sans',sans-serif;letter-spacing:.03em;text-transform:uppercase;
  color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;
}
table.table td{padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
table.table tr:last-child td{border-bottom:none}
.sticky-col{position:sticky;left:0;background:var(--surface);z-index:1}
.num{text-align:right;font-variant-numeric:tabular-nums}
.amt-in{color:var(--purple-700);font-weight:600}
.amt-out{color:var(--red-700);font-weight:600}

/* ============ DUES GRID CELLS ============ */
.grid-cell{min-width:56px;text-align:center;padding:6px 8px;border-radius:9px;font:600 13px 'Work Sans',sans-serif;user-select:none}
.cell-paid{background:var(--purple-100);color:var(--purple-800)}
.cell-unpaid{background:var(--red-100);color:var(--red-800)}
.cell-exempt{background:var(--n-200);color:var(--n-700)}
.cell-out{background:none;color:oklch(0.84 0.008 80)}
.cell-click{cursor:pointer}
.cell-click:hover{outline:2px solid var(--purple-200)}
.legend{display:flex;gap:16px;margin-top:14px;font-size:12px;color:var(--muted);flex-wrap:wrap;align-items:center}

/* ============ CHART ============ */
.chart{display:flex;align-items:flex-end;gap:12px;height:170px;padding-top:6px;overflow-x:auto}
.chart-bar-wrap{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;flex:1;height:100%;min-width:42px}
.chart-val{font:600 11px 'Work Sans',sans-serif;white-space:nowrap}
.chart-bar{width:100%;max-width:50px;border-radius:8px 8px 0 0}
.chart-lbl{font-size:10.5px;color:var(--muted);text-align:center;white-space:nowrap}

/* ============ FORMS ============ */
.field{margin-bottom:0}
.field label{display:block;font:500 13px 'Work Sans',sans-serif;color:var(--ink-soft);margin-bottom:5px}
.input{
  width:100%;padding:10px 14px;border:1.5px solid var(--line);border-radius:12px;
  font:400 14px 'Work Sans',sans-serif;color:var(--ink);background:#fff;outline:none;transition:border-color .15s;
}
.input:focus{border-color:var(--purple-200)}
.radio-row{display:flex;gap:18px;flex-wrap:wrap}
.radio{display:inline-flex;align-items:center;gap:7px;font-size:14px;cursor:pointer}

/* ============ DIALOG ============ */
.dialog-backdrop{position:fixed;inset:0;background:rgba(20,16,14,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:200}
.dialog{background:var(--surface);border-radius:18px;width:min(440px,100%);max-height:92vh;overflow-y:auto;padding:22px;box-shadow:0 12px 40px rgba(0,0,0,.22)}
.dialog-title{display:block;font:600 18px 'Spectral',serif;margin-bottom:16px}
.dialog-body{display:flex;flex-direction:column;gap:12px}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}

/* ============ LOGIN / MISC ============ */
.login-wrap{max-width:360px;margin:56px auto 0;padding:0 16px}
.subtitle{font:400 13px 'Work Sans',sans-serif;color:var(--muted);font-style:italic;margin-bottom:20px}
.de{font-size:.82em;color:var(--muted);font-style:italic}
.loading{display:flex;align-items:center;justify-content:center;padding:60px;color:var(--muted);font-size:14px}
.spinner{width:20px;height:20px;border:2px solid var(--n-200);border-top-color:var(--red);border-radius:50%;animation:spin .6s linear infinite;margin-right:10px}
@keyframes spin{to{transform:rotate(360deg)}}
.empty-state{text-align:center;padding:50px 20px;color:var(--muted)}
.alert{padding:12px 16px;border-radius:12px;font:500 13px 'Work Sans',sans-serif;margin-bottom:14px}
.alert-error{background:var(--red-100);color:var(--red-800)}
.alert-ok{background:var(--purple-100);color:var(--purple-800)}
.text-muted{color:var(--muted)}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mb-16{margin-bottom:16px}
.data-area{min-height:340px;font-family:ui-monospace,Menlo,monospace;font-size:12px;line-height:1.5}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
  .app-shell{flex-direction:column}
  .sidebar{
    position:sticky;top:0;z-index:100;height:auto;width:100%;
    flex-direction:column;gap:8px;
    border-right:none;border-bottom:1px solid var(--line);padding:10px 14px;
  }
  .brand{padding:0}
  .brand img{height:30px}
  /* Brand left, logout right on one row */
  .logout-m{
    display:inline-flex;align-items:center;flex:none;
    padding:7px 14px;border-radius:12px;border:1px solid var(--line);background:var(--n-100);
    font:600 12.5px 'Work Sans',sans-serif;color:var(--ink-soft);cursor:pointer;
  }
  .logout-m:hover{background:var(--n-200)}
  /* Nav as a single horizontal scroll strip */
  .nav-list{
    flex-direction:row;gap:6px;overflow-x:auto;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;padding-bottom:2px;margin:0 -14px;padding-left:14px;padding-right:14px;
  }
  .nav-list::-webkit-scrollbar{height:0}
  .nav-item{flex:0 0 auto;padding:8px 14px;font-size:13px}
  .side-foot{display:none}       /* who/role + desktop logout hidden on mobile */
  .main-col{padding:18px 14px;max-width:100%}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .report-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .kpi-grid,.kpi-grid.cols-3{grid-template-columns:1fr}
  .main-col{padding:16px 12px}
  .card{padding:16px}
  .brand .brand-sub{display:none}
  .seg{width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}
  .seg-opt{flex:0 0 auto}
  h1{font-size:22px}
  .dialog{padding:18px}
}