:root{
  --s0:#F4F6FB;--s1:#F8F9FC;--s2:#FFFFFF;
  --tp:#111827;--ts:#6B7280;--tm:#9CA3AF;
  --b:rgba(15,23,42,.08);--bs:rgba(15,23,42,.14);
  --r:12px;
  --ac:#2563EB;--bac:#EFF6FF;--tac:#1D4ED8;--brac:#93C5FD;
  --sc:#10B981;--bsc:#D1FAE5;--tsc:#047857;
  --dc:#EF4444;--bdc:#FEE2E2;--tdc:#B91C1C;
  --wc:#F59E0B;--bwc:#FEF3C7;--twc:#B45309;
  --vc:#6366F1;--bvc:#EEF2FF;--tvc:#4338CA;
  --font:'Inter',system-ui,sans-serif;
  --sidebar-w:268px;
  --sidebar-w-collapsed:84px;
  --sidebar-current:var(--sidebar-w);
  --bar-h:64px;
  --shell-pad:16px;
  --shell-gap:12px;
  --shadow:0 1px 2px rgba(15,23,42,.06),0 4px 16px rgba(15,23,42,.04);
  --shadow-lg:0 8px 30px rgba(15,23,42,.10);
  --tooltip-bg:#111827;
}
[data-mode=dark]{
  --s0:#0F1117;--s1:#151821;--s2:#1C2030;
  --tp:#F3F4F6;--ts:#9CA3AF;--tm:#6B7280;
  --b:rgba(255,255,255,.08);--bs:rgba(255,255,255,.14);
  --bac:#1E3A5F;--tac:#93C5FD;--brac:#2563EB;
  --bsc:#064E3B;--tsc:#6EE7B7;
  --bdc:#7F1D1D;--tdc:#FCA5A5;
  --bwc:#78350F;--twc:#FCD34D;
  --bvc:#312E81;--tvc:#A5B4FC;
  --tooltip-bg:#30363d;
}
html[data-sidebar=collapsed]{--sidebar-current:var(--sidebar-w-collapsed)}
html:not([data-sidebar=collapsed]){--sidebar-current:var(--sidebar-w)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--s0);color:var(--tp);min-height:100vh;-webkit-font-smoothing:antialiased}

/* ── APP SHELL ── */
.app-shell{display:flex;min-height:100vh;background:var(--s0)}

/* ── SIDEBAR COLUMN (clock + menu) ── */
.sidebar-column{
  width:var(--sidebar-current);flex-shrink:0;
  position:fixed;top:0;left:0;height:100vh;
  display:flex;flex-direction:column;gap:var(--shell-gap);
  padding:var(--shell-pad) 12px var(--shell-pad) var(--shell-pad);z-index:100;
  transition:width .22s cubic-bezier(.4,0,.2,1),padding .22s cubic-bezier(.4,0,.2,1);
}
.clock-widget{
  background:var(--s2);border:1px solid var(--b);border-radius:16px;
  height:var(--bar-h);min-height:var(--bar-h);
  padding:0 16px;box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  overflow:hidden;
}
.clock-time{
  font-size:28px;font-weight:600;letter-spacing:-.5px;color:var(--tp);
  font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap;
}
.clock-icon{display:none;color:var(--tm);font-size:20px}
html[data-sidebar=collapsed] .clock-time{display:none}
html[data-sidebar=collapsed] .clock-icon{display:flex;align-items:center;justify-content:center}
html[data-sidebar=collapsed] .sidebar-column{
  padding:var(--shell-pad) 10px var(--shell-pad) 10px;
  gap:10px;
}

/* ── SIDEBAR ── */
.sidebar{
  flex:1;min-height:0;background:var(--s2);
  border:1px solid var(--b);border-radius:16px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;
  overflow:hidden;transition:transform .25s ease;
}
.sidebar-inner{display:flex;flex-direction:column;height:100%;min-height:0}
.sidebar-brand{
  display:flex;align-items:center;gap:12px;
  padding:18px 16px 14px;border-bottom:1px solid var(--b);flex-shrink:0;
}
.brand-logo{
  width:40px;height:40px;background:#111827;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:18px;font-weight:700;flex-shrink:0;
}
[data-mode=dark] .brand-logo{background:#F9FAFB;color:#111827}
.brand-name{font-size:14px;font-weight:600;color:var(--tp);letter-spacing:-.2px;line-height:1.2}
.brand-tag{font-size:10px;color:var(--tm);text-transform:uppercase;letter-spacing:.6px;font-weight:500;margin-top:2px}
.brand-texts,.nav-label,.sidebar-user-texts{overflow:hidden;transition:opacity .15s,max-width .22s}
.brand-texts{max-width:160px;min-width:0}
.nav-label{flex:1;min-width:0}
.sidebar-user-texts{flex:1;min-width:0;max-width:140px}
.nav-scroll{flex:1;overflow-y:auto;padding:10px 10px 8px;min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.nav-section{font-size:10px;color:var(--tm);padding:10px 10px 4px;text-transform:uppercase;letter-spacing:.7px;font-weight:600;white-space:nowrap;overflow:hidden}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  cursor:pointer;font-size:13px;color:var(--ts);
  border-radius:10px;margin-bottom:2px;
  transition:background .15s,color .15s;position:relative;white-space:nowrap;overflow:hidden;
  text-decoration:none;
}
a.nav-item{color:var(--ts)}
.nav-item:hover{background:var(--s1);color:var(--tp)}
.nav-item.active{background:var(--ac);color:#fff;font-weight:500;box-shadow:0 2px 8px rgba(37,99,235,.28)}
.nav-item.active::before{display:none}
.nav-item.active .badge{background:rgba(255,255,255,.22);color:#fff}
.nav-item i{font-size:17px;width:18px;flex-shrink:0;opacity:.9}
.nav-item.active i{opacity:1}
.badge{background:var(--ac);color:#fff;border-radius:10px;padding:1px 7px;font-size:10px;margin-left:auto;font-weight:600}

.sidebar-user{
  display:flex;align-items:center;gap:10px;
  padding:14px 14px;border-top:1px solid var(--b);flex-shrink:0;
}
.sidebar-user-avatar{width:36px;height:36px;border-radius:50%;font-size:11px;font-weight:600;flex-shrink:0}
.sidebar-user-info{flex:1;min-width:0}
.sidebar-user-name{font-size:13px;font-weight:600;color:var(--tp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-role{font-size:11px;color:var(--tm);margin-top:1px}
.sidebar-logout{
  width:34px;height:34px;border-radius:10px;border:1px solid var(--b);
  background:var(--s1);color:var(--ts);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  transition:background .12s,color .12s,border-color .12s;flex-shrink:0;
}
.sidebar-logout:hover{background:var(--bdc);color:var(--tdc);border-color:var(--tdc)}

/* ── SIDEBAR COLLAPSED ── */
html[data-sidebar=collapsed] .brand-texts,
html[data-sidebar=collapsed] .nav-label,
html[data-sidebar=collapsed] .sidebar-user-texts,
html[data-sidebar=collapsed] .nav-section{
  opacity:0;max-width:0;max-height:0;padding:0;margin:0;overflow:hidden;
}
html[data-sidebar=collapsed] .badge{display:none}
html[data-sidebar=collapsed] .sidebar-brand{padding:14px 8px;justify-content:center;gap:0}
html[data-sidebar=collapsed] .brand-logo{width:40px;height:40px;font-size:16px;border-radius:11px}
html[data-sidebar=collapsed] .nav-scroll{padding:8px 6px}
html[data-sidebar=collapsed] .nav-item{justify-content:center;padding:11px 8px;gap:0;margin-bottom:4px;border-radius:11px}
html[data-sidebar=collapsed] .nav-item i{margin:0;font-size:18px;width:20px}
html[data-sidebar=collapsed] .sidebar-user{justify-content:center;padding:14px 8px;gap:0}
html[data-sidebar=collapsed] .sidebar-logout{display:none}
html[data-sidebar=collapsed] .sidebar-user-avatar{width:40px;height:40px;font-size:12px}
html[data-sidebar=collapsed] .nav-item:hover::after{
  content:attr(data-label);position:absolute;left:calc(100% + 10px);top:50%;
  transform:translateY(-50%);background:var(--tooltip-bg);color:#fff;
  font-size:12px;font-weight:500;padding:5px 10px;border-radius:8px;
  white-space:nowrap;z-index:999;box-shadow:0 4px 12px rgba(0,0,0,.2);pointer-events:none;
}
html[data-sidebar=collapsed] .nav-item:hover::before{
  content:'';position:absolute;left:calc(100% + 4px);top:50%;
  transform:translateY(-50%);border:5px solid transparent;
  border-right-color:var(--tooltip-bg);z-index:999;
}

/* ── MAIN COLUMN ── */
.main-column{
  flex:1;margin-left:var(--sidebar-current);min-height:100vh;
  display:flex;flex-direction:column;padding:var(--shell-pad) var(--shell-pad) var(--shell-pad) 0;min-width:0;
  transition:margin-left .22s cubic-bezier(.4,0,.2,1);
}

/* ── APP BAR ── */
.appbar{
  background:var(--s2);border:1px solid var(--b);border-radius:16px;
  padding:0 16px;height:var(--bar-h);min-height:var(--bar-h);
  display:flex;align-items:center;
  justify-content:space-between;box-shadow:var(--shadow);
  position:sticky;top:var(--shell-pad);z-index:50;margin-bottom:var(--shell-gap);flex-shrink:0;
}
.appbar-left{display:flex;align-items:center;gap:12px;min-width:0}
.appbar-title{font-size:15px;font-weight:600;color:var(--tp);letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.hamburger{
  display:flex;width:34px;height:34px;border:1px solid var(--b);
  background:var(--s1);cursor:pointer;color:var(--ts);border-radius:10px;
  align-items:center;justify-content:center;font-size:17px;flex-shrink:0;
}
.hamburger:hover{background:var(--s0);color:var(--tp)}
.icon-btn{
  width:34px;height:34px;border-radius:10px;border:1px solid var(--b);
  background:var(--s1);cursor:pointer;display:flex;align-items:center;
  justify-content:center;color:var(--ts);position:relative;font-family:var(--font);
  transition:background .12s,border-color .12s,color .12s;
}
.icon-btn:hover{background:var(--s0);border-color:var(--bs);color:var(--tp)}
.notif-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--dc);border:2px solid var(--s2)}
.appbar-action{height:34px;padding:0 14px;font-size:13px;border-radius:10px;gap:6px}
.appbar-action i{font-size:15px}

/* ── CONTENT AREA ── */
.content-area{flex:1;min-height:0;display:flex;flex-direction:column}
.content-panel{
  background:var(--s2);border:1px solid var(--b);border-radius:16px;
  box-shadow:var(--shadow);flex:1;display:flex;flex-direction:column;min-height:0;
}
.page-head{
  padding:22px 24px 0;border-bottom:1px solid var(--b);flex-shrink:0;
}
.page-head-title{font-size:22px;font-weight:600;color:var(--tp);letter-spacing:-.4px;line-height:1.2}
.page-head-sub{font-size:13px;color:var(--tm);margin-top:4px;padding-bottom:18px}
.page-content{padding:20px 24px 24px;flex:1;overflow-y:auto}

/* legacy aliases */
.layout{display:flex;min-height:100vh}
.main{flex:1;display:flex;flex-direction:column}
.topbar{display:none}
.content{padding:0}
.page-title{font-size:15px;font-weight:600}
.user-pill{display:none}
.uavatar{display:flex;align-items:center;justify-content:center;border-radius:50%;font-weight:600}

/* ── OVERLAY (mobile) ── */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:99;backdrop-filter:blur(2px)}

/* ── PAGES ── */
.page{display:none}
.page.active{display:block}

/* ── STATS ── */
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.stat-card{
  background:var(--s2);border:1px solid var(--b);border-radius:10px;
  padding:14px 16px;transition:box-shadow .15s;
}
.stat-card:hover{box-shadow:var(--shadow)}
.stat-label{font-size:11px;color:var(--tm);margin-bottom:8px;display:flex;align-items:center;gap:5px;font-weight:500;text-transform:uppercase;letter-spacing:.4px}
.stat-value{font-size:21px;font-weight:600;color:var(--tp);letter-spacing:-.5px}
.stat-sub{font-size:11px;margin-top:4px;color:var(--tm)}
.stat-up{color:var(--sc)}
.stat-down{color:var(--dc)}

/* ── CARDS ── */
.card{background:var(--s1);border:1px solid var(--b);border-radius:14px;padding:16px}
.card+.card{margin-top:0}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.card-title{font-size:13px;font-weight:600;color:var(--tp);letter-spacing:-.1px}
.card-action{font-size:12px;color:var(--tac);cursor:pointer;font-weight:500}
.card-action:hover{text-decoration:underline}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:16px}
.three-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}

/* ── PRIORITY ── */
.priority{padding:2px 8px;border-radius:20px;font-size:11px;font-weight:500;white-space:nowrap}
.p-high{background:var(--bdc);color:var(--tdc)}
.p-med{background:var(--bwc);color:var(--twc)}
.p-low{background:var(--bsc);color:var(--tsc)}

/* ── STATUS BADGES ── */
.status-badge{padding:2px 9px;border-radius:20px;font-size:11px;font-weight:500;white-space:nowrap}
.status-active{background:var(--bsc);color:var(--tsc)}
.status-passive{background:var(--s1);color:var(--tm);border:1px solid var(--b)}

/* ── TASKS ── */
.task-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--b)}
.task-item:last-child{border-bottom:none}
.task-check{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--bs);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .12s}
.task-check.done{background:var(--sc);border-color:var(--sc)}
.task-text{font-size:13px;flex:1;color:var(--tp)}
.task-text.done{text-decoration:line-through;color:var(--tm)}

/* ── CUSTOMERS ── */
.cust-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--b);cursor:pointer;transition:opacity .1s}
.cust-item:hover{opacity:.75}
.cust-item:last-child{border-bottom:none}
.cust-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0}
.cust-name{font-size:13px;font-weight:500;color:var(--tp)}
.cust-sector{font-size:11px;color:var(--tm);margin-top:1px}
.cust-score{font-size:12px;color:var(--tac);font-weight:500;margin-left:auto;padding-right:8px}

/* ── CHART ── */
.chart-wrap{height:150px;position:relative;margin-top:4px;overflow:visible;padding-top:26px}
.fin-chart-wrap{height:160px;padding:28px 4px 0;background:var(--s1);border:1px solid var(--b);border-radius:10px;overflow:visible}
.fin-bars{align-items:flex-end;height:120px;gap:8px;padding:0 4px;overflow:visible}
.fin-bar-group{height:120px;align-items:flex-end;gap:4px;overflow:visible}
.fin-bar-income{background:#18976A;opacity:0.9;flex:1;max-width:18px;min-width:12px}
.fin-bar-expense{background:#D94444;opacity:0.75;flex:1;max-width:18px;min-width:12px}
.fin-chart-labels{margin-top:8px}
.fin-chart-label{font-size:11px;font-weight:500}
.bars{display:flex;align-items:flex-end;gap:4px;height:100%;overflow:visible}
.bar-group{flex:1;display:flex;gap:2px;align-items:flex-end;justify-content:center;height:100%;overflow:visible}
.bar{border-radius:3px 3px 0 0;min-width:8px;transition:opacity .15s,transform .15s}
.bar:hover{opacity:1;transform:translateY(-1px);z-index:2}
.bar-with-tip{position:relative;cursor:default}
.bar-with-tip .bar-tip{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  background:#1a1a18;color:#fff;padding:6px 10px;border-radius:8px;font-size:11px;line-height:1.3;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;
  box-shadow:0 6px 16px rgba(0,0,0,.22);z-index:20
}
.bar-with-tip .bar-tip::after{
  content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#1a1a18
}
.bar-with-tip .bar-tip-label{display:block;font-size:10px;opacity:.72;margin-bottom:2px;font-weight:500}
.bar-with-tip .bar-tip-val{display:block;font-weight:700;font-size:12px}
.bar-with-tip:hover .bar-tip,.bar-with-tip:focus-within .bar-tip{opacity:1;transform:translateX(-50%) translateY(0)}
.bar-with-tip:hover,.bar-with-tip:focus-within{z-index:5}
.chart-labels{display:flex;gap:4px;margin-top:6px}
.chart-label{flex:1;text-align:center;font-size:10px;color:var(--tm)}
.chart-legend{display:flex;gap:12px;flex-wrap:wrap}
.legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ts)}
.legend-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.donut-wrap{display:flex;align-items:center;gap:16px}
.donut-labels{flex:1}
.donut-label-item{display:flex;align-items:center;gap:7px;margin-bottom:7px;font-size:12px;color:var(--ts)}
.donut-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* ── KANBAN ── */
.kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kanban-col{background:var(--s1);border-radius:12px;padding:12px;border:1px solid var(--b)}
.kanban-header{font-size:12px;font-weight:600;color:var(--ts);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.kanban-count{background:var(--s2);border-radius:10px;padding:1px 7px;font-size:11px;border:1px solid var(--b)}
.kanban-card{
  background:var(--s2);border:1px solid var(--b);border-radius:9px;
  padding:11px;margin-bottom:8px;cursor:grab;
  transition:box-shadow .1s,opacity .1s,transform .1s;
}
.kanban-card:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.kanban-card:last-child{margin-bottom:0}
.kanban-card:active{cursor:grabbing}
.kanban-card.dragging{opacity:.35;box-shadow:var(--shadow-lg)}
.kanban-col.drag-over{outline:2px dashed var(--brac);outline-offset:-2px}
.kcard-title{font-size:13px;font-weight:500;margin-bottom:3px;color:var(--tp)}
.kcard-customer{font-size:11px;color:var(--tm)}
.kcard-footer{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.mini-avatar{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:600}

/* ── CALENDAR ── */
.cal-view-toggle{display:flex;background:var(--s1);border:1px solid var(--b);border-radius:8px;padding:3px;gap:2px}
.cal-vtab{padding:5px 14px;border-radius:5px;cursor:pointer;font-size:12px;font-weight:500;color:var(--ts);transition:all .12s;white-space:nowrap}
.cal-vtab.active{background:var(--s2);color:var(--tp);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.cal-day-cell{
  min-height:120px;background:var(--s1);border-radius:9px;padding:8px;
  border:1px solid var(--b);transition:border-color .12s;cursor:default;
}
.cal-day-cell.today{border-color:var(--brac);background:var(--bac)}
.cal-day-cell.other-month{opacity:.5}
.cal-day-cell.has-tasks{border-color:var(--bs)}
.cal-day-header{font-size:11px;font-weight:600;margin-bottom:6px;display:flex;align-items:center;justify-content:space-between}
.cal-date-num{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.cal-date-num.today-dot{background:var(--ac);color:#fff}
.cal-chip{
  border-radius:4px;padding:2px 5px;font-size:10px;
  margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;display:flex;align-items:center;gap:3px;transition:opacity .1s;
}
.cal-chip:hover{opacity:.8}
.cal-chip.done{opacity:.6}
.cal-chip.done .cal-chip-text{text-decoration:line-through}
.cal-more{font-size:10px;color:var(--tm);cursor:pointer;padding:2px 4px}
.cal-more:hover{text-decoration:underline}

/* Haftalık column header */
.week-col-header{text-align:center;padding:8px 4px;font-size:11px;font-weight:600;color:var(--ts);border-bottom:1px solid var(--b)}
.week-col-header.today-col{color:var(--tac)}
.week-add-btn{
  width:100%;margin-top:4px;padding:3px;border:1.5px dashed var(--b);
  border-radius:5px;background:none;cursor:pointer;font-size:10px;
  color:var(--tm);font-family:var(--font);transition:all .12s;
}
.week-add-btn:hover{border-color:var(--brac);color:var(--tac);background:var(--bac)}

/* ── FINANCE ── */
.fin-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.fin-summary-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.fin-card{border-radius:10px;padding:14px 16px;border:1px solid transparent}
.fin-card.income{background:var(--bsc);border-color:rgba(29,158,117,.15)}
.fin-card.expense{background:var(--bdc);border-color:rgba(217,68,68,.15)}
.fin-card.balance{background:var(--bac);border-color:rgba(47,126,216,.15)}
.fin-card.invest{background:var(--bvc);border-color:rgba(123,111,212,.15)}
.fin-card.receivable{background:var(--bsc);border-color:rgba(29,158,117,.15)}
.fin-card.payable{background:var(--bdc);border-color:rgba(217,68,68,.15)}
.fin-card-label{font-size:11px;margin-bottom:6px;font-weight:500}
.fin-card.income .fin-card-label{color:var(--tsc)}
.fin-card.expense .fin-card-label{color:var(--tdc)}
.fin-card.balance .fin-card-label{color:var(--tac)}
.fin-card.invest .fin-card-label{color:var(--tvc)}
.fin-card.receivable .fin-card-label{color:var(--tsc)}
.fin-card.payable .fin-card-label{color:var(--tdc)}
.fin-card-value{font-size:20px;font-weight:600;letter-spacing:-.5px}
.fin-card.income .fin-card-value{color:var(--tsc)}
.fin-card.expense .fin-card-value{color:var(--tdc)}
.fin-card.balance .fin-card-value{color:var(--tac)}
.fin-card.invest .fin-card-value{color:var(--tvc)}
.fin-card.receivable .fin-card-value{color:var(--tsc)}
.fin-card.payable .fin-card-value{color:var(--tdc)}
.fin-table{width:100%;border-collapse:collapse;font-size:13px}
.fin-table th{text-align:left;font-size:11px;color:var(--tm);font-weight:500;padding:6px 8px;border-bottom:1px solid var(--b)}
.fin-table td{padding:9px 8px;border-bottom:1px solid var(--b);color:var(--tp)}
.fin-table tr:last-child td{border-bottom:none}
.fin-table tr:hover td{background:var(--s0)}
.amount-pos{color:var(--sc);font-weight:600}
.amount-neg{color:var(--dc);font-weight:600}
.amount-invest{color:var(--tvc);font-weight:600}

/* ── INVESTMENTS ── */
.asset-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--b)}
.asset-row:last-child{border-bottom:none}
.asset-icon{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.asset-name{font-size:13px;font-weight:500;color:var(--tp)}
.asset-detail{font-size:11px;color:var(--tm);margin-top:2px}
.asset-value{text-align:right}
.asset-current{font-size:14px;font-weight:600;color:var(--tp)}
.asset-gain{font-size:11px;margin-top:2px}
.gain-up{color:var(--sc)}
.gain-down{color:var(--dc)}

/* ── VISITS ── */
.visit-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--b);align-items:flex-start}
.visit-item:last-child{border-bottom:none}
.visit-date{background:var(--bac);color:var(--tac);border-radius:9px;padding:7px 10px;text-align:center;font-size:11px;font-weight:600;flex-shrink:0;min-width:44px;line-height:1.3}
.visit-name{font-size:13px;font-weight:500;color:var(--tp)}
.visit-addr{font-size:11px;color:var(--tm);margin-top:2px}

/* ── DEBT ── */
.debt-item{display:flex;align-items:center;padding:10px 0;border-bottom:1px solid var(--b);gap:12px}
.debt-item:last-child{border-bottom:none}
#page-debts .debt-item-main{flex:1;min-width:0}
#page-debts .debt-item-delete{margin-left:auto;flex-shrink:0}
.debt-name{font-size:13px;font-weight:500;color:var(--tp);flex:1}
.debt-date{font-size:11px;color:var(--tm)}
.debt-amount{font-size:14px;font-weight:600}
.debt-status{padding:2px 9px;border-radius:20px;font-size:11px;font-weight:500}
.debt-overdue{background:var(--bdc);color:var(--tdc)}
.debt-upcoming{background:var(--bwc);color:var(--twc)}
.debt-ok{background:var(--bsc);color:var(--tsc)}

/* ── REPORTS ── */
.report-stat{text-align:center;padding:16px;background:var(--s1);border-radius:10px;border:1px solid var(--b)}
.report-stat-val{font-size:26px;font-weight:700;margin-bottom:4px;letter-spacing:-.5px}
.report-stat-label{font-size:12px;color:var(--tm)}
.perf-bar{background:var(--s1);border-radius:20px;height:6px;overflow:hidden;margin-top:5px}
.perf-fill{height:100%;border-radius:20px;background:var(--ac);transition:width .5s ease}
.perf-row{padding:9px 0;border-bottom:1px solid var(--b)}
.perf-row:last-child{border-bottom:none}
.perf-label{display:flex;justify-content:space-between;margin-bottom:4px;font-size:13px;color:var(--tp)}

/* ── CUSTOMER DETAIL ── */
.cust-detail-header{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.cust-big-avatar{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0}
.cust-detail-name{font-size:18px;font-weight:700;color:var(--tp);letter-spacing:-.3px}
.cust-detail-meta{font-size:12px;color:var(--tm);margin-top:3px}
.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:16px}
.info-item{background:var(--s1);border-radius:8px;padding:10px 12px;border:1px solid var(--b)}
.info-label{font-size:10px;color:var(--tm);margin-bottom:3px;text-transform:uppercase;letter-spacing:.4px;font-weight:500}
.info-value{font-size:13px;color:var(--tp);font-weight:500}
.tab-bar{display:flex;gap:2px;border-bottom:1px solid var(--b);margin-bottom:14px}
.tab{padding:9px 14px;font-size:13px;cursor:pointer;color:var(--ts);border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:500;transition:color .1s}
.tab.active{color:var(--tac);border-bottom-color:var(--ac)}
.tab:hover{color:var(--tp)}
.tab-content{display:none}
.tab-content.active{display:block}
.timeline-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--b)}
.timeline-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;margin-top:1px}
.timeline-text{font-size:13px;color:var(--tp);line-height:1.4}
.timeline-date{font-size:11px;color:var(--tm);margin-top:3px}

/* ── FORMS ── */
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px}
.assignee-checkboxes{display:flex;flex-wrap:wrap;gap:6px;padding:8px;background:var(--s1);border:1px solid var(--b);border-radius:8px;min-height:42px}
.assignee-checkboxes label{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--tp);padding:4px 8px;border-radius:6px;border:1px solid var(--b);background:var(--s2);cursor:pointer;user-select:none}
.assignee-checkboxes label:has(input:checked){border-color:var(--ac);background:var(--bac);color:var(--tac)}
.assignee-checkboxes input{margin:0;accent-color:var(--ac)}
.form-group{margin-bottom:10px}
.form-group:last-child{margin-bottom:0}
.form-label{font-size:12px;color:var(--ts);margin-bottom:5px;display:block;font-weight:500}
.form-input,.form-select{
  width:100%;padding:8px 11px;border:1px solid var(--b);border-radius:7px;
  background:var(--s1);color:var(--tp);font-size:13px;font-family:var(--font);
  transition:border-color .12s,box-shadow .12s;
}
.form-input:focus,.form-select:focus{outline:none;border-color:var(--brac);box-shadow:0 0 0 3px rgba(47,126,216,.1)}
textarea.form-input{resize:vertical;min-height:80px}
.btn-primary{
  background:var(--ac);color:#fff;border:none;border-radius:10px;
  padding:8px 16px;font-size:13px;cursor:pointer;font-family:var(--font);
  display:inline-flex;align-items:center;gap:6px;font-weight:500;
  transition:background .12s,box-shadow .12s;
  box-shadow:0 2px 8px rgba(37,99,235,.22);
  text-decoration:none;
}
.btn-primary:hover{background:var(--tac);box-shadow:0 4px 12px rgba(37,99,235,.28)}
.btn-secondary{
  background:var(--s2);color:var(--ts);border:1px solid var(--b);
  border-radius:10px;padding:8px 16px;font-size:13px;cursor:pointer;font-family:var(--font);
  font-weight:500;transition:background .12s,border-color .12s;
}
.btn-secondary:hover{background:var(--s1);border-color:var(--bs);color:var(--tp)}
.btn-row{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.back-link{font-size:13px;color:var(--tac);cursor:pointer;margin-bottom:12px;display:inline-flex;align-items:center;gap:4px;font-weight:500}
.back-link:hover{text-decoration:underline}

/* ── LOGIN ── */
.login-overlay{position:fixed;inset:0;background:var(--s0);z-index:1000;display:flex;align-items:center;justify-content:center}
.login-box{
  background:var(--s2);border:1px solid var(--b);border-radius:16px;
  padding:32px;width:360px;max-width:92vw;box-shadow:var(--shadow-lg);
}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:4px;font-size:17px;font-weight:700;color:var(--tp)}
.login-subtitle{font-size:13px;color:var(--tm);margin-bottom:24px;margin-top:2px}
.user-select-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}
.user-select-btn{border:1.5px solid var(--b);border-radius:9px;padding:14px 8px;cursor:pointer;text-align:center;background:var(--s1);transition:all .15s}
.user-select-btn:hover{border-color:var(--brac);background:var(--bac)}
.user-select-btn.selected{border-color:var(--ac);background:var(--bac)}
.user-select-btn .uavatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;margin:0 auto 7px}
.user-select-btn .uname{font-size:12px;font-weight:600;color:var(--tp)}
.user-select-btn .urole{font-size:10px;color:var(--tm);margin-top:1px}
.login-btn{width:100%;padding:11px;background:var(--ac);color:#fff;border:none;border-radius:8px;font-size:14px;font-family:var(--font);cursor:pointer;font-weight:600;transition:background .12s}
.login-btn:hover{background:var(--tac)}

/* ── MODAL ── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:500;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .15s;padding:16px;
}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{
  background:var(--s2);border-radius:14px;padding:22px;
  width:100%;max-width:480px;max-height:90vh;overflow-y:auto;
  transform:translateY(8px);transition:transform .15s;box-shadow:var(--shadow-lg);
}
.modal-overlay.open .modal-box{transform:translateY(0)}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.modal-title{font-size:15px;font-weight:600;color:var(--tp)}
.modal-close{background:none;border:none;cursor:pointer;color:var(--tm);font-size:18px;padding:3px 6px;border-radius:5px;line-height:1}
.modal-close:hover{background:var(--s1);color:var(--tp)}

/* ── TOAST ── */
.toast-container{position:fixed;top:16px;right:16px;z-index:900;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{
  background:var(--s2);border:1px solid var(--b);border-radius:9px;
  padding:11px 15px;font-size:13px;color:var(--tp);
  box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:9px;
  pointer-events:all;animation:toast-in .2s ease forwards;max-width:320px;
}
.toast.success i{color:var(--sc)}
.toast.error i{color:var(--dc)}
.toast.info i{color:var(--ac)}
@keyframes toast-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.toast.out{animation:toast-out .2s ease forwards}
@keyframes toast-out{to{opacity:0;transform:translateX(20px)}}

/* ── ACTIVITY ── */
.activity-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--b);align-items:flex-start}
.activity-item:last-child{border-bottom:none}
.activity-text{font-size:12px;color:var(--ts);flex:1;line-height:1.5}
.activity-time{font-size:11px;color:var(--tm);white-space:nowrap}

/* ── SEARCH BAR ── */
.search-wrap{position:relative}
.search-wrap input{padding-left:32px}
.search-wrap .ti-search{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--tm);font-size:14px;pointer-events:none}

/* ── CUSTOMER SCORE ── */
.score-star{color:var(--wc);font-size:12px}

/* ── PIPELINE ── */
.pipeline-stage{background:var(--s1);border-radius:10px;padding:10px 12px;border:1px solid var(--b);cursor:pointer;transition:all .12s;text-align:center}
.pipeline-stage:hover{border-color:var(--brac);background:var(--bac)}
.pipeline-stage.active-stage{border-color:var(--ac);background:var(--bac)}
.pipeline-arrow{color:var(--tm);font-size:18px;display:flex;align-items:center}

/* ── RESPONSIVE ── */
@media(max-width:1200px){
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fin-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fin-summary-6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  html[data-sidebar=collapsed]{--sidebar-current:var(--sidebar-w)}
  .sidebar-column{
    position:fixed;left:0;top:0;
    height:100dvh;height:100svh;max-height:100dvh;max-height:100svh;
    width:min(calc(var(--sidebar-w) + 30px),92vw);
    padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));
    transform:translateX(-100%);transition:transform .25s ease,width .22s ease;
    pointer-events:none;overflow:hidden;
  }
  .sidebar-column.mobile-open{transform:translateX(0);pointer-events:auto}
  .sidebar-overlay.visible{display:block}
  .sidebar-column .clock-widget{display:none}
  .sidebar{flex:1;min-height:0;max-height:100%;overflow:hidden}
  .sidebar-inner{min-height:0;max-height:100%}
  .nav-scroll{
    flex:1;min-height:0;max-height:100%;
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
    scroll-padding-bottom:24px;
  }
  .main-column{margin-left:0;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .appbar-action{padding:8px 10px}
  .appbar-action span{display:none}
  .two-col{grid-template-columns:1fr}
  .three-col{grid-template-columns:repeat(2,1fr)}
  .kanban{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .fin-summary{grid-template-columns:repeat(2,1fr)}
  .page-content{padding:16px}
  .page-head{padding:18px 18px 0}
  .form-row{grid-template-columns:1fr}
  /* iOS input focus zoom engelle — font 16px altında yakınlaştırır */
  .form-input,.form-select,textarea.form-input,
  input[type="text"],input[type="email"],input[type="password"],
  input[type="number"],input[type="date"],input[type="time"],
  input[type="search"],input[type="tel"],input[type="url"],select,textarea{
    font-size:16px;
  }
}
@media(max-width:600px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .three-col{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr}
  .fin-summary{grid-template-columns:1fr 1fr}
  .clock-widget{height:var(--bar-h);min-height:var(--bar-h)}
  .clock-time{font-size:24px}
  .toast-container{left:8px;right:8px;top:8px}
  .toast{max-width:100%}
  .appbar{padding:0 12px}
  .page-head-title{font-size:18px}
}
@media(max-width:420px){
  .stats-grid{grid-template-columns:1fr}
  .fin-summary{grid-template-columns:1fr}
}
.fin-recurring-toggle{display:flex;align-items:center;gap:6px}
.fin-recurring-toggle.active{background:var(--tac);color:#fff;border-color:var(--tac)}
#finance-modal .finance-modal-box{max-width:560px}
.fin-customer-search{margin-bottom:8px}
.fin-customer-cards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;
  max-height:240px;overflow-y:auto;padding:2px;margin-top:4px;
  -webkit-overflow-scrolling:touch;
}
.fin-customer-card{
  display:flex;align-items:flex-start;gap:10px;padding:11px 12px;
  border:1.5px solid var(--b);border-radius:12px;background:var(--s1);
  cursor:pointer;text-align:left;transition:border-color .15s,background .15s,box-shadow .15s;
  position:relative;width:100%;font-family:var(--font);
}
.fin-customer-card:hover{border-color:var(--brac);background:var(--bac)}
.fin-customer-card.selected{border-color:var(--ac);background:var(--bac);box-shadow:0 0 0 1px var(--ac)}
.fin-customer-card-avatar{
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;flex-shrink:0;margin-top:1px;
}
.fin-customer-card-body{flex:1;min-width:0}
.fin-customer-card-firm{font-size:12px;font-weight:600;color:var(--tp);line-height:1.35;word-break:break-word}
.fin-customer-card-name{font-size:11px;color:var(--tm);line-height:1.35;margin-top:2px;word-break:break-word}
.fin-customer-card-check{
  position:absolute;top:8px;right:8px;font-size:14px;color:var(--ac);opacity:0;transition:opacity .12s;
}
.fin-customer-card.selected .fin-customer-card-check{opacity:1}
.fin-customer-card.other .fin-customer-card-firm{font-weight:500;color:var(--ts)}
.fin-customer-card.other .fin-customer-card-avatar{background:var(--s3);color:var(--tm)}
@media(max-width:480px){
  .fin-customer-cards{grid-template-columns:1fr 1fr;max-height:200px}
}
.fin-scope-options{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.fin-scope-option{
  display:flex;align-items:flex-start;gap:10px;padding:11px 12px;
  border:1.5px solid var(--b);border-radius:10px;background:var(--s1);cursor:pointer;transition:border-color .15s,background .15s;
}
.fin-scope-option:hover{border-color:var(--brac);background:var(--bac)}
.fin-scope-option:has(input:checked){border-color:var(--ac);background:var(--bac);box-shadow:0 0 0 1px var(--ac)}
.fin-scope-option input{margin-top:2px;flex-shrink:0;accent-color:var(--ac)}
.fin-scope-option-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.fin-scope-option-body strong{font-size:13px;color:var(--tp);font-weight:600}
.fin-scope-option-body small{font-size:11px;color:var(--tm);line-height:1.35}
.fin-income-source{display:flex;align-items:center;gap:8px;min-width:0;max-width:240px}
.fin-income-firm{font-size:12px;font-weight:600;color:var(--tp);flex:1 1 45%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fin-income-name{font-size:12px;color:var(--tm);flex:1 1 45%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fin-income-name-only{color:var(--tp);font-weight:500;flex:1 1 auto}
.fin-table td:nth-child(2){max-width:240px}
.finance-debt-item{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:10px}
.finance-debt-item .debt-item-main{min-width:0}
.finance-debt-actions{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0}
.finance-pay-btn{padding:5px 10px;font-size:11px;white-space:nowrap}
.finance-collect-btn{padding:4px 8px;font-size:11px;margin-left:4px;flex-shrink:0}