/* Ziya Teknik: existing product UI, evolved with native CSS.
   DESIGN_VARIANCE 4 / MOTION_INTENSITY 2 / VISUAL_DENSITY 6.
   Surfaces 18px, controls 10px, badges 7px. White theme by request. */
:root{--navy:#172b4d;--orange:#ed8735;--text:#20334f;--muted:#63738a;--line:#e5eaf0;--background:#f7f9fb;--radius:18px}
body{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
button,input,select{font-family:inherit}
button{transition:background-color .15s,color .15s,transform .15s}
button:active:not(:disabled){transform:translateY(1px)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #b45a16;outline-offset:3px}
.sidebar{width:220px;padding:24px 16px;background:#fff;height:100dvh}
.brand{height:115px}.logo-crop{margin:auto;width:174px;height:96px}.logo-crop img{width:174px;height:174px;margin-top:-34px}
.nav-label{font-size:10px;letter-spacing:.8px;color:#63738a;margin:20px 14px 14px}
.nav{font-size:13px;color:#526580;border-radius:10px;padding:13px 14px;gap:12px;margin-bottom:5px}
.nav.active{background:#edf2f8;color:var(--navy);box-shadow:none;font-weight:650;position:relative}
.nav.active:before{content:"";width:3px;height:20px;background:var(--orange);border-radius:3px;position:absolute;left:0}
.nav.active svg{color:var(--navy)}.nav-rule{margin:22px 12px}.nav b{color:#a65519;background:#fff0e3;font-size:11px}
.privacy{background:transparent;border:1px solid var(--line);font-size:11px;border-radius:12px;color:#4d617c;padding:12px}.privacy small,.profile small{font-size:11px;color:var(--muted)}
.profile{font-size:12px;padding-top:16px}.online{display:none}.avatar{background:#edf2f8}
main{margin-left:220px}.topbar{height:70px;padding:0 32px;background:#fff;backdrop-filter:none}.breadcrumb{font-size:12px;color:#63738a}.breadcrumb strong{font-size:15px;font-weight:650;color:var(--navy)}
.header-right{gap:14px}.sync{font-size:11px;color:#63738a}.topbar .export{font-size:12px;padding:9px 13px}.icon-button{height:36px;width:36px;border-radius:10px}
.workspace{padding:24px 32px 28px;max-width:1500px}.notice{font-size:11px;padding:10px 14px;background:#fff9f3;border-color:#f3dfcc;border-radius:10px;color:#865329;margin-bottom:22px}.notice button{font-size:11px;color:#984b13}
.filterbar{gap:16px;margin-bottom:24px}.period-tabs{background:#eaf0f5;padding:4px;border-radius:10px}.period-tabs button{font-size:12px;color:#536681;padding:8px 12px}.period-tabs button.selected{box-shadow:0 1px 3px #172b4d12;border-radius:7px}
.select-wrap,.date-trigger{font-size:12px;padding:10px 12px;border-radius:10px;border-color:#dce3ec;height:40px}.select-wrap select{font-size:12px;color:#425774;max-width:145px}.date-trigger{min-width:174px}
#currency-control .currency-toggle{height:40px;border-radius:10px;background:#eaf0f5;border-color:#e0e6ef;padding:4px}#currency-control .currency-toggle button{font-size:11px;color:#5b6d85;padding:6px 9px}.currency-toggle button,.mini-tabs button{color:#5b6d85;font-size:10px}.currency-toggle button.selected{font-weight:650}
.kpis{gap:0;background:#fff;border:1px solid #dce4ed;border-radius:18px;overflow:hidden;margin-bottom:24px;box-shadow:0 3px 12px #172b4d04}
.kpi,.kpi.featured{border:0;border-radius:0;background:#fff;color:var(--navy);padding:22px 20px;overflow:visible}
.kpi+.kpi{border-left:1px solid var(--line)}.kpi.featured:after{display:none}.kpi-top{margin-bottom:15px}.kpi-label,.featured .kpi-label{font-size:12px;font-weight:550;color:#546882}.kpi-icon,.featured .kpi-icon{padding:0;background:none;color:#7a8ba2}.kpi.featured .kpi-icon{color:#b26020}
.kpi-value{font-size:clamp(25px,2.4vw,36px);font-weight:650;letter-spacing:-1px;line-height:1.2}.kpi-sub,.featured .kpi-sub{font-size:11px;color:#60738e;min-height:16px}.kpi-bottom{margin-top:18px;font-size:10px;color:#5e7087;gap:7px;flex-wrap:wrap}.delta,.featured .delta{font-size:10px;background:#edf6f1;color:#256548;padding:3px 6px;border-radius:5px}.delta.negative,.featured .delta.negative{color:#a34d3d;background:#fdf0eb}
.dashboard-grid{grid-template-columns:minmax(0,1.9fr) minmax(285px,1fr);gap:24px}.card{padding:24px;border-radius:18px;border-color:var(--line);box-shadow:none}.card h2,.table-card .card-heading h2{font-size:15px;font-weight:650;letter-spacing:-.25px}.card-description,.card p{font-size:12px;color:#687a92;line-height:1.6}.card-description{margin-top:7px}.card-heading{gap:14px}.link-button{font-size:11px;color:#526c8e}.link-button:hover{color:#a45216;text-decoration:underline}
.chart-wrap{height:260px;margin-top:14px}.chart-wrap text{fill:#647891;font-size:11px}.legend{margin-top:24px;gap:20px}.legend button{font-size:11px;color:#4f6480}.legend button.off{opacity:.5}.chart-summary{background:#f6f8fb;color:#5c718e;font-size:11px;padding:11px 12px;margin-top:16px;border-radius:10px}.chart-summary strong{color:#344d70}
.donut-row{margin:24px 0 20px}.donut{width:160px;height:160px}.donut-center strong{font-size:26px}.donut-center small{font-size:11px;color:#63738a}.category-row{padding:10px 0;font-size:12px}.category-row .row-name{color:#4e6380}.category-row strong{font-size:12px}.category-row .percent{font-size:11px;width:38px;color:#6c7d94}.category-list{max-height:194px}
.lower-grid{gap:24px;margin-top:24px;grid-template-columns:1fr 1fr 1.2fr}.big-number{font-size:28px;margin-top:24px}.big-number small{color:#63738a;font-size:12px}.payment-row{font-size:12px;padding:10px 0}.payment-row span:nth-child(2){color:#526782}.payment-row strong{font-size:12px}.payment-row small{font-size:11px;color:#687a92;width:35px}.payment-pie{width:140px;height:140px}.pie-row{margin:16px 0}.customer-stats{gap:24px}.customer-stats strong{font-size:30px}.customer-stats span{font-size:11px;color:#5f728c}.stat-line{font-size:12px;color:#5b6f8a;padding:14px 0}.stat-line strong{font-variant-numeric:tabular-nums}.pending-row strong{font-size:12px}.pending-row small{font-size:11px;color:#657993}.pending-avatar{background:#edf2f7;color:#5c7290}.age{font-size:10px;color:#8b511f;background:#fff1e1}.age.overdue{color:#a24f3f;background:#fcefe9}.pending-footer{font-size:11px;color:#687a92}.badge{font-size:10px;color:#9c521b}.pending-row{padding:13px 0}
.feature-grid{gap:24px;margin-bottom:24px}.feature-tabs button{color:#546883}.quiet-label,.compare-totals small,.compare-legend{color:#63758d}.compare-totals strong{font-size:25px}.comparison-chart text{fill:#657b96}.jobs-card .stat-line small{font-size:11px;color:#657b96}.growth-breakdown{background:#f5f8fb;color:#536b88;border-radius:12px}.ranking-card p,.heatmap-card .card-heading p{font-size:12px}.ranking-product{font-size:13px}.ranking-card select,.goals-card select{font-size:12px;color:#425a78}.heat-weekdays,.weekday-averages>small,.heat-legend{color:#61738b}.heat-day{height:35px;font-size:11px}.heat-day small{font-size:9px}.heat-4{color:#5c2a06}.goal-toolbar,.goal-caption,.goal-item p{color:#61748e;font-size:11px}.goal-item strong{font-size:23px}.goal-item strong small{color:#667993}.workflow-lane{border:1px solid #e5ebf2}.workflow-job{box-shadow:0 2px 4px #172b4d03}.workflow-job>span,.workflow-job>div,.workflow-job p{font-size:11px;color:#5e7592}.workflow-job select{font-size:11px}.workflow-lane h3{font-size:12px;color:#48607e}
.table-card{margin-top:24px}.table-card th{color:#536a86;background:#f8fafc;font-size:11px;font-weight:600}.table-card td{padding:15px 12px}.table-card td small{color:#657b96}.table-card .colored-pill{border-color:transparent;font-size:11px;padding:5px 9px;border-radius:7px}.colored-pill i{display:none}.table-actions{padding-top:4px;font-size:12px;color:#60738f}.table-search{font-size:12px;border-color:#dce4ee}.sales-preview{height:405.5px}.sales-preview th{background:#f8fafc}.table-card .button{font-size:12px}
.period-highlights{margin-top:24px;border:0;border-left:3px solid var(--orange);border-radius:0 12px 12px 0;background:#fff7ef;padding:18px 20px}.highlight-icon{display:none}.period-highlights strong{font-size:13px}.highlight-items{font-size:12px;gap:10px 24px;color:#536985}#content>.card+.period-highlights{margin-top:24px}
.date-popover{background:#fff;backdrop-filter:none;border-radius:18px;box-shadow:0 12px 48px #172b4d1c}.calendar-top p,.calendar-bottom>span{color:#617590}.calendar-weekdays span{color:#657993}.range-field small{color:#657993!important}.range-field.active small{color:#985017!important}.calendar-day.in-range{color:#8d4511}.calendar-close{color:#586d89}.calendar-month-picker select{color:#425a7a}
.button{border-radius:10px;font-size:12px}.button:hover:not(:disabled){background:#f3f6fa}.button.primary:hover{background:#263f64}.connection-form label,.instructions ol{color:#526b8b}.connection-form input{font-size:13px}.form-row{gap:14px}.form-error{font-size:12px;color:#a34e3a}.empty{color:#63738a;font-size:13px}.loading{color:#63738a}footer{font-size:11px;color:#697b92;padding-top:28px}footer b{color:#a1afbf}
@media(min-width:1500px){.sidebar{width:220px}main{margin-left:220px}.workspace{padding:28px 40px}.card h2{font-size:16px}.chart-wrap{height:290px}}
@media(max-width:1150px){.sidebar{width:190px;padding:20px 12px}main{margin-left:190px}.workspace{padding:24px}.topbar{padding:0 24px}.nav{padding:12px;font-size:12px}.kpi{padding:20px 16px}.kpi-value{font-size:27px}.filterbar{flex-wrap:wrap}.filter-right{justify-content:flex-end;flex:1}.dashboard-grid{grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr)}.lower-grid{grid-template-columns:1fr 1fr}.lower-grid>.card:last-child{grid-column:span 2}}
@media(max-width:900px){.sidebar{width:72px;padding:18px 8px}.brand{height:80px}.logo-crop{width:56px;height:56px;background:#fff;border-radius:0}.logo-crop img{width:90px;height:90px;margin-top:-13px;margin-left:-18px}main{margin-left:72px}.nav{font-size:0;padding:14px;gap:0}.nav.active:before{height:18px}.nav-label,.sidebar-bottom,.nav-rule{display:none}.dashboard-grid{grid-template-columns:1fr}.kpi-value{font-size:25px}.kpi-icon{display:none}.feature-grid{grid-template-columns:1fr}.card{padding:22px}.kpi-bottom{display:flex}.kpi-bottom>span:last-child{margin-top:0}}
@media(max-width:600px){.sidebar{width:100%;height:64px;padding:8px;bottom:0;top:auto;background:#fff}main{margin-left:0}.brand{display:none}.nav{width:16%;padding:12px}.nav.active:before{display:none}.topbar{height:62px;padding:0 16px}.breadcrumb{font-size:0;gap:0}.breadcrumb>span{display:none}.breadcrumb strong{font-size:14px}.sync{font-size:9px}.header-right{gap:8px}.topbar .export{font-size:0}.workspace{padding:18px 16px 84px}.notice{font-size:10px}.notice button{font-size:10px}.filterbar{gap:12px}.filter-right{justify-content:space-between}.period-tabs{width:100%}.period-tabs button{padding:8px 10px}.kpis{grid-template-columns:1fr 1fr}.kpi{padding:18px 14px}.kpi:nth-child(3){border-left:0}.kpi:nth-child(n+3){border-top:1px solid var(--line)}.kpi-value{font-size:27px}.kpi-label{font-size:11px}.kpi-bottom{margin-top:14px;font-size:10px}.kpi-bottom>span:last-child{font-size:9px}.dashboard-grid,.lower-grid,.feature-grid{gap:18px}.lower-grid{grid-template-columns:1fr}.lower-grid>.card:last-child{grid-column:auto}.card{padding:20px}.card h2{font-size:15px}.chart-wrap{height:230px}.legend{gap:14px}.legend button{font-size:10px}.category-list{max-height:220px}.heatmap-layout{grid-template-columns:1fr}.table-card{padding:18px}.period-highlights{padding:16px}.highlight-items{display:grid;gap:10px}.date-popover{max-width:calc(100vw - 32px)}.date-trigger{width:100%}footer{font-size:10px}}
@media(prefers-reduced-motion:reduce){button,.nav,.distribution-segment{transition:none}button:active:not(:disabled){transform:none}}
/* One owner for vertical spacing: each content section is a grid row.
   This avoids missing gaps or doubled margins between different row types. */
#content{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
#content>*,#content>.card+.period-highlights{margin-top:0;margin-bottom:0}
.stat-line{gap:18px;align-items:start}
.stat-line>strong,.stat-line>div{flex-shrink:0}
.customer-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.customer-stats>div+div{padding-left:20px}
.payment-row{column-gap:10px}
.pending-title{flex-wrap:wrap}
@media(max-width:600px){#content{gap:18px}.customer-stats{gap:16px}.customer-stats>div+div{padding-left:16px}}