:root{font:15px "Segoe UI",sans-serif;color:#20364d;background:#eff3f7}*{box-sizing:border-box}body{margin:0}[hidden]{display:none!important}button,input,select{font:inherit}button{cursor:pointer;border:0;border-radius:5px;background:#305875;color:white;padding:.6rem 1rem}button:hover{background:#1a6874}button:disabled{opacity:.5;cursor:default}input,select{border:1px solid #b8c7d4;border-radius:4px;padding:.5rem;color:inherit;background:white;min-width:0}label{display:grid;gap:.32rem;font-size:.86rem;color:#435a70;font-weight:600}input:focus,select:focus,button:focus-visible{outline:2px solid #16848e;outline-offset:2px}h1,h2,p{margin:0}.brand{font-size:.73rem;font-weight:700;letter-spacing:.14em;color:#186d78}#login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(90deg,#142b40f5,#142b4070),url(/icons/giris-arka.png) center/cover}#loginForm{width:min(400px,92vw);border-radius:12px;background:#fff;padding:34px;box-shadow:0 16px 60px #0b182f66;display:grid;gap:15px}#loginForm>p:not(.brand){color:#52677a;font-size:.95rem}.seal{width:72px;height:72px;object-fit:contain}.identity{background:#143146;display:flex;gap:10px;align-items:center;padding:16px 10px;border-bottom:1px solid #466780}.identity img{width:46px;height:46px;object-fit:contain;transition:transform .28s}.identity:hover img{transform:scale(1.08)}.identity strong{font-size:.90rem}.identity small{display:block;margin-top:5px;color:#8bd2d3;letter-spacing:.07em;font-size:.64rem}#app{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:100vh}aside{background:#17273f;color:white;display:flex;flex-direction:column}nav{display:grid;gap:4px;padding:10px 8px}nav button{background:#1f344e;display:flex;align-items:center;gap:12px;text-align:left;font-size:.85rem;padding:8px 10px;font-weight:650;letter-spacing:.02em}nav img{width:29px;height:29px;object-fit:contain}nav button[aria-current=page]{background:#196976}#exit{margin:auto 10px 12px;background:#314966}.workspace{padding:clamp(12px,2vw,30px);min-width:0}header,.sectionTitle,footer{display:flex;align-items:center;justify-content:space-between;gap:12px}header{border-bottom:1px solid #c7d5df;padding-bottom:16px;margin-bottom:16px}h1{font-size:clamp(1.45rem,3vw,2rem);line-height:1.25;margin-top:4px}time,#count,#page{font-size:.85rem;color:#536779}#filters,#reportTools{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin-bottom:12px}#filters select{max-width:280px}#status:not(:empty){padding:.6rem;color:#983f32;background:#fff4ef;margin-bottom:8px}#cards{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}.card{padding:12px 16px;background:#e0eeee;border-left:4px solid #278383;min-width:145px}.card b{display:block;font-size:1.35rem}.panel{background:#fff;border:1px solid #d4dfe7;border-radius:6px;overflow:hidden}.sectionTitle,footer{padding:11px 14px}h2{font-size:1.05rem}.tableWrap{overflow:auto;max-height:65vh}table{width:100%;border-collapse:collapse;font-size:.9rem}td,th{padding:9px 12px;border-bottom:1px solid #dfe7ed;text-align:left;white-space:nowrap}th{background:#1c3050;color:#fff;position:sticky;top:0}tbody tr:nth-child(even){background:#f2f6fa}td button{padding:4px 9px}dialog{width:min(950px,94vw);max-height:85vh;border:none;border-radius:8px;padding:20px;color:inherit}dialog::backdrop{background:#10213895}#close{float:right}#detailBody{clear:both;padding-top:12px}#detailBody p{padding:8px 0;border-bottom:1px solid #dfe7ed}#detailBody img{max-width:100%;max-height:65vh;object-fit:contain}@media(max-width:800px){#app{display:block}aside{position:static}.identity{padding:6px 12px}.identity img{width:34px;height:34px}nav{display:flex;overflow:auto;gap:5px;padding:6px}nav button{white-space:nowrap}nav img{width:21px;height:21px}#exit{align-self:end;margin:2px 8px 6px}.workspace{padding:12px}header{align-items:start}.card{min-width:115px}input,select{max-width:85vw}}.setup{display:block;margin:12px;color:#c9f0f2;font-size:.88rem}

#menuToggle{display:none}
@media(max-width:800px){
 #login{min-height:100svh;padding:16px}#loginForm{max-width:100%;padding:24px}
 #menuToggle{display:block;margin-left:auto;flex:none;background:#1f425c}
 aside:not(.menuOpen) :is(nav,.setup,#exit){display:none}
 aside.menuOpen nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:52svh;overflow:auto}
 nav button{white-space:normal}
 input,select,button,.setup{min-height:44px}input,select{font-size:16px;width:100%;max-width:100%}
 #filters,#reportTools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 #filters label,#reportTools label{min-width:0}#filters select{max-width:100%}
 #reportTools label:has(#report){grid-column:1/-1}
 header{flex-wrap:wrap}.workspace{padding-bottom:max(14px,env(safe-area-inset-bottom))}
 dialog{max-height:90svh;padding:14px}#detailBody{overflow-wrap:anywhere}
}
@media(max-width:600px){
 .tableWrap{overflow:visible;max-height:none}.tableWrap table,.tableWrap tbody,.tableWrap tr{display:block}
 .tableWrap thead{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
 .tableWrap tbody tr{padding:6px 12px;border-top:2px solid #ccdae4}
 .tableWrap td{display:grid;grid-template-columns:minmax(85px,42%) minmax(0,1fr);gap:8px;padding:7px 0;white-space:normal;overflow-wrap:anywhere}
 .tableWrap td:before{content:attr(data-label);font-weight:600;color:#486377}.tableWrap td[colspan]{display:block}
 .sectionTitle{flex-wrap:wrap}#cards{gap:6px}.card{flex:1 1 100px;min-width:0;padding:8px}
}
/* Rapor Merkezi: seçim ve açıklama alanları */
#smartTools{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin-bottom:12px;padding:12px;border:1px solid #d1dce5;border-radius:8px;background:#f9fbfc}
#smartTools label{min-width:155px;flex:1 1 155px}
#smartTools .smartQuestion{min-width:min(100%,420px);flex:2 1 420px}
#smartTools .smartSearch{min-width:220px}
#smartTools .reportHint{flex:1 1 100%;margin:0;padding:8px 10px;border-left:3px solid #278383;background:#eaf4f4;color:#466174;font-size:.86rem}
#smartTools .smartInfo{border-left-color:#8972bd;background:#f1eff8}
#smartTools button{min-width:88px}
#reportTools .reportChoice{min-width:280px}
#reportTools .reportHint{flex:1 1 100%;margin:0;padding:8px 10px;border-left:3px solid #278383;background:#eaf4f4;color:#466174;font-size:.86rem}
.fuelTitle{flex:1 1 100%;display:flex;align-items:baseline;gap:12px;color:#165d70;font-weight:800;letter-spacing:.08em}.fuelTitle small{font-weight:500;letter-spacing:0;color:#61788b}.fuelTitle~label{min-width:170px}
.card.clickable{cursor:pointer;transition:transform .18s,box-shadow .18s}.card.clickable:hover{transform:translateY(-2px);box-shadow:0 5px 14px #183b4a26}.detailTable{width:100%;border-collapse:collapse;margin-top:8px}.detailTable th,.detailTable td{padding:8px;border-bottom:1px solid #dfe7ed;text-align:left}.detailTable th{background:#1c3050;color:#fff}
.identity{cursor:pointer}.identity:focus-visible{outline:2px solid #8bd2d3;outline-offset:-3px}.tagline{margin-top:8px;color:#39717b;font-size:.94rem;min-height:1.35em;opacity:.9}.taglineIn{animation:taglineIn .5s ease}@keyframes taglineIn{from{opacity:0;transform:translateY(7px)}to{opacity:.9;transform:translateY(0)}}
.identity strong{font-size:.86rem;line-height:1.12;display:block;max-width:155px;white-space:normal}
@media(min-width:801px){.identity>div{text-align:center;flex:1}.identity strong{max-width:160px;margin:0 auto}}
@media(max-width:800px){#menuToggle{font-size:0;width:42px;padding:8px 9px}#menuToggle::before{content:'☰';font-size:18px}.identity>div{min-width:0;flex:1;white-space:nowrap}.identity strong{max-width:none;white-space:nowrap;font-size:.76rem;letter-spacing:-.01em}.identity small{white-space:nowrap;font-size:.60rem}}
@media(max-width:800px){#mobileExit{display:block;background:#a84658;padding:7px 8px;font-size:21px;line-height:1;width:38px;height:40px;border-radius:6px}.identity>div{white-space:nowrap;overflow:hidden}.identity strong{max-width:none;white-space:nowrap;font-size:.78rem;line-height:1.12;letter-spacing:-.015em}.identity small{font-size:.60rem}}
@media(min-width:801px){#mobileExit{display:none}}
@media(max-width:800px){header h1{font-size:clamp(1.75rem,6vw,2.25rem);line-height:1.14;max-width:100%;overflow-wrap:normal}.workspace header .brand{font-size:.82rem;letter-spacing:.10em}}
.fuelFilters{display:flex;flex-wrap:wrap;gap:8px;align-items:end}.fuelFilters label{min-width:150px}.fuelTitle{margin-bottom:2px}#fuelTools{display:grid;grid-template-columns:minmax(250px,360px) minmax(300px,500px);align-items:start;gap:8px 12px}#fuelTools>.fuelTitle,#fuelTools>.fuelServicePanel{grid-column:1/-1}#fuelTools>#fuelHint{grid-column:1}#fuelTools>#fuelCharts{grid-column:2;grid-row:2 / span 2;display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,210px);width:100%;gap:8px;margin:0}.chartPanel{background:#fff;border:1px solid #d4dfe7;border-radius:8px;padding:8px;min-height:140px;min-width:0}.chartPanel h3{margin:0 0 6px;color:#24465f;font-size:.86rem}.barChart{display:grid;gap:4px;max-height:160px;overflow:auto;padding-right:3px}.barRow{display:grid;grid-template-columns:68px minmax(0,1fr);align-items:center;gap:5px;font-size:.7rem}.barTrack{height:15px;border-radius:5px;background:#e9f0f4;overflow:hidden}.barTrack i{display:block;height:100%;min-width:2px;border-radius:5px;background:linear-gradient(90deg,#2b8fa1,#195b86);position:relative}.barTrack b{color:#fff;font-size:.62rem;padding:2px 4px;white-space:nowrap}.pieLayout{display:flex;align-items:center;justify-content:center;gap:8px;min-height:105px}.pie{width:88px;height:88px;border-radius:50%;box-shadow:inset 0 0 0 6px #fff}.pieLegend{display:grid;gap:4px;font-size:.7rem}.pieLegend div{display:flex;gap:4px;align-items:center}.pieLegend i{display:inline-block;width:8px;height:8px;border-radius:50%}.sortable{cursor:pointer}.sortable:hover{background:#275075}.expandButton{padding:1px 8px;font-size:1rem;line-height:1.2;background:#e1edf3;color:#1b5d75;border:1px solid #8eb3c1}.expandedDetail td{background:#f6fbfc;padding:12px 18px}.expandedDetail ul{margin:8px 0 0;padding-left:20px}.reportMode .workspace{max-width:none}.reportMode .tableWrap{max-height:calc(100vh - 245px)}
.reportMode #reportCharts{display:grid;grid-template-columns:minmax(0,650px) minmax(280px,360px);width:min(100%,1040px);gap:14px;margin:14px 0}.reportMode #reportCharts .barChart{max-height:280px}
.fuelServicePanel{display:flex;flex-wrap:wrap;align-items:stretch;gap:4px}.fuelServicePanel .fuelServiceHeader{flex:1 0 100%}.fuelServicePanel .fuelServiceCard{margin:0!important;flex:0 1 auto}@media(max-width:1050px){#fuelTools{grid-template-columns:1fr}#fuelTools>#fuelCharts{grid-column:1;grid-row:auto;width:100%}}@media(max-width:800px){#fuelCharts,#reportCharts,.reportMode #reportCharts{grid-template-columns:1fr;width:100%}.fuelFilters label{min-width:0;flex:1 1 150px}}
#fuelTools>#fuelServicesPanel{grid-column:1/-1;width:100%;min-width:0}
@media(min-width:1051px){#fuelTools{grid-template-columns:minmax(320px,.85fr) minmax(500px,1.4fr);width:100%}}
#fuelTools>#fuelServicesPanel{display:block;align-self:stretch}
#fuelServicesPanel .fuelServiceHeader{display:block;width:100%;margin:0 0 14px}
#fuelServicesPanel .fuelServiceGrid{display:grid;width:100%;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:8px;align-content:start}
#fuelServicesPanel .fuelServiceGrid button{width:100%;min-width:0}
@media(max-width:800px){#fuelServicesPanel .fuelServiceGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
#fuelTools .fuelFilters label:has(#fuelYear){flex:0 0 96px;min-width:0}#fuelTools .fuelFilters label:has(#fuelMonth){flex:0 0 144px;min-width:0}
.monthlyRows{display:grid;gap:7px;max-height:170px;overflow-y:auto;padding:4px}
.monthSummaryRow{display:grid;grid-template-columns:minmax(72px,100px) minmax(0,1fr);align-items:center;gap:8px;padding:8px 10px;border-left:3px solid #2b8fa1;border-radius:4px;background:#edf4f7;font-size:.78rem}
.monthSummaryMonth{font-weight:700;white-space:nowrap;color:#31566e}
.monthSummaryValues{min-width:0;overflow-wrap:anywhere;color:#274f69;font-variant-numeric:tabular-nums}
.linkButton{background:transparent;color:#246d79;padding:.15rem;text-decoration:underline;font-size:.88rem}.linkButton:hover{background:#e8f3f4;color:#174f5a}.infoDialog{max-width:560px;line-height:1.55}.infoDialog h2{margin:0 0 14px;color:#1c3050}.infoDialog p{margin:10px 0}.muted{color:#647789;font-size:.9rem}
#app{background:linear-gradient(135deg,#eef3f7f2,#eef3f7e6),url(/icons/giris-arka.png) center/cover fixed}
.adminPasswordButton{margin:0 10px 8px;background:#73549a;font-size:.78rem;padding:.55rem .65rem}.adminPasswordButton:hover{background:#8b68b5}.passwordForm{display:grid;gap:12px;margin-top:16px}.passwordForm label{text-align:left}.passwordForm input{width:100%}#adminPasswordStatus{min-height:20px;color:#246d79}
#login{padding:28px}.loginForm{}#loginForm{width:min(520px,94vw);padding:44px 52px;gap:16px;justify-items:stretch;text-align:center}#loginForm .seal{display:block;width:104px;height:104px;margin:0 auto 2px}#loginForm .brand{font-size:.86rem;letter-spacing:.12em;line-height:1.35;color:#176b79}#loginForm h1{font-size:clamp(2rem,5vw,2.55rem);line-height:1.1;color:#153957}#loginForm>p:not(.brand){font-size:1rem;line-height:1.45}#loginForm label{text-align:left;font-size:.92rem}#loginForm input{width:100%;min-height:46px;font-size:1rem;padding:.7rem .8rem}#loginForm>button:first-of-type{width:100%;min-height:48px;font-size:1rem;font-weight:650;margin-top:2px}.linkButton{font-size:.93rem;min-height:30px}@media(max-width:800px){#login{padding:16px}#loginForm{width:min(500px,96vw);padding:32px 24px}#loginForm .seal{width:88px;height:88px}}
.headerStatus{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}.welcomeBadge{display:inline-flex;align-items:center;max-width:min(42vw,360px);min-height:38px;padding:7px 12px;border:1px solid #c9dce4;border-radius:10px;background:linear-gradient(135deg,#fff,#e8f3f5);color:#17485b;font-weight:700;box-shadow:0 3px 12px #183b4a12;white-space:normal;text-align:right}@media(max-width:800px){.headerStatus{margin-left:auto;align-items:flex-end}.welcomeBadge{max-width:70vw}}
.plateSearch{min-width:260px}.plateSearch input{font-weight:600;letter-spacing:.03em}
@media(max-width:800px){
 .workspace{padding:8px 10px max(10px,env(safe-area-inset-bottom))}
 header{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;border-bottom:1px solid #c7d5df;padding:0 0 8px;margin:0 0 8px}
 header>div:first-child{min-width:0}
 header .brand{font-size:.64rem;letter-spacing:.1em;line-height:1.1}
 header h1{font-size:clamp(1.02rem,3.4vw,1.2rem);line-height:1.12;margin-top:2px}
 .tagline{font-size:.76rem;line-height:1.2;min-height:0;margin-top:3px}
 .headerStatus{flex-direction:row;align-items:center;justify-content:flex-end;gap:6px;margin-left:0;flex-wrap:wrap}
 .welcomeBadge{max-width:100%;min-height:30px;padding:4px 8px;font-size:.8rem;box-shadow:none;white-space:nowrap}
 #stamp{font-size:.7rem}
 #filters{gap:6px;margin-bottom:8px}
 #filters label{gap:2px;font-size:.76rem;line-height:1.15}
 #filters input,#filters select{min-height:38px;padding:.35rem .5rem}
 #filters button{min-height:38px;padding:.35rem .6rem}
 #cards{gap:6px;margin:8px 0}
 .card{padding:7px 9px;line-height:1.2}
 .card b{font-size:1.1rem;margin-top:2px}
 .sectionTitle,footer{padding:8px 10px}
 .tableWrap tbody tr{padding:4px 10px}
 .tableWrap td{padding:5px 0}
}
@media(max-width:430px){
 .workspace{padding:7px 8px max(8px,env(safe-area-inset-bottom))}
 .identity{gap:7px;padding:5px 8px}
 .identity img{width:30px;height:30px}
 .identity strong{font-size:.76rem}
 .identity small{font-size:.58rem;margin-top:2px}
 #mobileExit,#menuToggle{min-height:36px;padding:.3rem .45rem}
 header h1{font-size:1.08rem}
}
/* Compact mobile overview header and one-line filter strip. */
@media(max-width:800px){
 header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
 header>div:first-child{min-width:0}
 header .brand,header h1{display:none}
 .tagline{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.7rem;line-height:1.1;margin:0;min-height:0}
 .headerStatus{margin:0;align-self:center;flex-wrap:nowrap}
 .welcomeBadge{max-width:48vw;white-space:nowrap;font-size:.74rem;padding:4px 7px;min-height:28px}
 #filters{display:flex;flex-wrap:nowrap;align-items:end;overflow-x:auto;overscroll-behavior-x:contain;gap:6px;padding:0 0 4px;margin-bottom:8px;scrollbar-width:thin}
 #filters label{flex:0 0 auto;min-width:0;width:108px}
 #filters label#trackingFilter{width:126px}
 #filters label.plateSearch{width:138px;min-width:0}
 #filters label[for=""]{width:108px}
 #filters label:has(#plate){width:116px}
 #filters select,#filters input{width:100%;max-width:100%;font-size:.82rem;text-overflow:ellipsis}
 #filters button{flex:0 0 72px}
 #stamp{display:none!important}
}
@media(max-width:430px){
 .tagline{font-size:.66rem;letter-spacing:-.02em}
 .welcomeBadge{max-width:46vw;font-size:.69rem;padding:4px 6px}
 #filters label{width:98px}
 #filters label#trackingFilter{width:116px}
 #filters label.plateSearch{width:124px}
 #filters label:has(#plate){width:104px}
 #filters button{flex-basis:66px;padding-left:.35rem;padding-right:.35rem}
}
/* Keep mobile filter captions readable and dropdown values uncut. */
@media(max-width:800px){
 #filters{gap:4px}
 #filters label#trackingFilter{width:108px;font-size:.78rem;font-weight:700;white-space:normal}
 #filters label:has(#unit){width:94px}
 #filters label.plateSearch{width:108px}
 #filters label:has(#plate){width:92px}
}
@media(max-width:430px){
 .workspace{padding-left:6px;padding-right:6px}
 #filters{gap:3px}
 #filters label#trackingFilter{width:94px;font-size:.74rem}
 #filters label:has(#unit){width:84px}
 #filters label.plateSearch{width:100px}
 #filters label:has(#plate){width:86px}
 #filters input,#filters select{padding-left:.28rem;padding-right:.28rem;font-size:.72rem}
}
@media(max-width:380px){
 #filters label#trackingFilter{width:88px}
 #filters label:has(#unit){width:76px}
 #filters label.plateSearch{width:94px}
 #filters label:has(#plate){width:78px}
 #filters input,#filters select{font-size:.68rem;padding-left:.22rem;padding-right:.22rem}
}

/* Yakıt analiz ekranı: kartlar ve grafikler masaüstü programla aynı akışta. */
#fuelTools{display:flex!important;flex-direction:column;align-items:stretch;gap:10px;width:100%;grid-template-columns:none}
#fuelTools>.fuelTitle,#fuelTools>.fuelFilters,#fuelTools>#fuelHint,#fuelTools>#fuelCharts,#fuelTools>#fuelServicesPanel{grid-column:auto;grid-row:auto;width:100%;min-width:0;margin:0}
#fuelTools>.fuelTitle{display:flex;align-items:baseline;gap:10px}
#fuelTools .fuelFilters{display:flex;flex-wrap:wrap;align-items:end;gap:8px}
#fuelTools>#fuelHint{padding:0;margin:0}
#fuelTools>#fuelCharts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
#fuelTools #fuelCharts .chartPanel{min-width:0;min-height:190px;padding:10px}
#fuelTools .fuelChartHeader{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
#fuelTools .fuelChartHeader h3{margin:0}
#fuelTools .fuelYearDivider{height:20px;border-left:1px solid #a5b5c0;margin:0 2px}
#fuelMonthlyYearButtons,#fuelPieYearButtons{display:flex;align-items:center;gap:4px;flex-wrap:nowrap}
#fuelMonthlyYearButtons button,#fuelPieYearButtons button{min-width:50px;padding:3px 7px;border:1px solid #c4d3dd;border-radius:3px;background:#f4f8fa;color:#2c4f64;font:700 .78rem 'Segoe UI',sans-serif;cursor:pointer}
#fuelMonthlyYearButtons button.selected,#fuelPieYearButtons button.selected{border-color:#196976;background:#196976;color:#fff}
#fuelTools .monthlyRows{display:grid;gap:5px;max-height:170px;overflow-y:auto;overflow-x:hidden;padding:4px}
#fuelTools .monthSummaryRow{display:grid;grid-template-columns:minmax(105px,130px) minmax(0,1fr);align-items:center;gap:8px;min-width:0;padding:7px 9px;border-left:3px solid #2b8fa1;border-radius:4px;background:#edf4f7;font-size:.78rem}
#fuelTools .monthSummaryMonth{font-weight:700;white-space:nowrap;color:#31566e}
#fuelTools .monthSummaryValues{text-align:right;overflow-wrap:anywhere;color:#274f69}
#fuelTools .pieLayout{min-height:145px}
#fuelTools>#fuelServicesPanel{display:block;align-self:stretch;padding:12px;border:1px solid #d4dfe7;border-radius:8px;background:#fff}
#fuelTools #fuelServicesPanel .fuelServiceHeader{display:block;width:100%;margin:0 0 8px}
#fuelTools #fuelServicesPanel .fuelServiceHeader h3{margin:0}
#fuelTools #fuelServicesPanel .fuelServiceGrid{display:grid;width:100%;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:8px;align-content:start}
#fuelTools #fuelServicesPanel .fuelServiceCard{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;width:100%;min-width:0;min-height:66px;margin:0;padding:7px 9px;border:1px solid #b8ccdc;border-radius:6px;background:#fff;color:#173c59;cursor:pointer;text-align:left;white-space:normal}
#fuelTools #fuelServicesPanel .fuelServiceCard[aria-pressed=true]{background:#d8eef1}
#fuelTools #fuelServicesPanel .fuelServiceCard strong{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fuelTools #fuelServicesPanel .fuelServiceCard span{width:100%;font-size:.83rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
@media(max-width:850px){#fuelTools>#fuelCharts{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){#fuelTools .fuelChartHeader{gap:5px}#fuelMonthlyYearButtons,#fuelPieYearButtons{gap:2px}#fuelMonthlyYearButtons button,#fuelPieYearButtons button{min-width:42px;padding:3px 4px;font-size:.72rem}#fuelTools .monthSummaryRow{grid-template-columns:minmax(82px,100px) minmax(0,1fr);gap:5px;font-size:.72rem}}

/* Yıllık yakıt özeti ve ay bazında M/K/G dökümü */
#fuelTools #fuelCharts .chartPanel{min-height:225px}
#fuelTools .fuelYearSummary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:0 0 5px}
#fuelTools .fuelYearCard{display:flex;min-width:0;min-height:48px;flex-direction:column;justify-content:center;gap:1px;padding:4px 6px;border-left:3px solid #2b8fa1;border-radius:3px;background:#edf4f7;color:#31566e;font-size:.69rem;line-height:1.15;overflow-wrap:anywhere}
#fuelTools .fuelYearCard strong{font-size:.69rem}
#fuelTools .fuelYearGrandTotal{border-left-color:#196976;background:#e3eff0}
#fuelTools .monthSummaryRow{grid-template-columns:minmax(88px,110px) repeat(3,minmax(0,1fr));min-height:46px;padding:5px 7px}
#fuelTools .monthFuelValue{display:flex;min-width:0;flex-direction:column;justify-content:center;gap:1px;padding:1px 4px;border-left:1px solid #d5e1e6;font-size:.68rem;line-height:1.15;overflow-wrap:anywhere}
#fuelTools .monthFuelValue strong{font-size:.68rem}
#fuelTools .monthFuelValue span{font-variant-numeric:tabular-nums}
@media(max-width:520px){#fuelTools .fuelYearSummary{grid-template-columns:repeat(2,minmax(0,1fr))}#fuelTools .monthSummaryRow{grid-template-columns:minmax(72px,85px) repeat(3,minmax(0,1fr));gap:2px;padding:4px}#fuelTools .monthFuelValue{font-size:.61rem;padding:1px 2px}#fuelTools .monthFuelValue strong{font-size:.61rem}}

#fuelTools .monthlyRows{padding:10px 4px 4px}
#fuelTools #fuelCharts .chartPanel{min-height:320px}
#fuelTools .fuelYearCard{min-height:44px}
#fuelTools .monthlyRows{max-height:230px;padding:10px 4px 4px}
#fuelTools .monthSummaryRow{grid-template-columns:minmax(90px,112px) repeat(3,minmax(0,1fr)) minmax(95px,.85fr) minmax(95px,.8fr);min-height:39px;gap:2px;padding:3px 5px}
#fuelTools .monthFuelValue{font-size:.63rem;padding:0 3px;line-height:1.05}
#fuelTools .monthFuelValue strong{font-size:.62rem;white-space:nowrap}
#fuelTools .monthFuelValue span{font-size:.63rem}
#fuelTools .monthFuelTotal,#fuelTools .monthFuelChange{display:flex;min-width:0;flex-direction:column;justify-content:center;align-items:center;gap:1px;border-left:1px solid #d5e1e6;text-align:center;font-size:.66rem;line-height:1.1;overflow-wrap:anywhere}
#fuelTools .monthFuelTotal strong{font-size:.62rem}
#fuelTools .monthFuelChange{font-weight:700;white-space:nowrap}
#fuelTools .monthFuelChange.up{color:#1f8b4c}
#fuelTools .monthFuelChange.down{color:#be4141}
#fuelTools .monthFuelChange.flat{color:#647584}
@media(max-width:520px){#fuelTools #fuelCharts .chartPanel{min-height:290px}#fuelTools .monthlyRows{max-height:200px}#fuelTools .monthSummaryRow{grid-template-columns:minmax(75px,88px) repeat(3,minmax(0,1fr)) minmax(68px,.75fr) minmax(62px,.7fr);gap:1px;padding:2px}#fuelTools .monthFuelValue{font-size:.55rem;padding:0 1px}#fuelTools .monthFuelValue strong,#fuelTools .monthFuelValue span{font-size:.55rem}#fuelTools .monthFuelChange,#fuelTools .monthFuelTotal{font-size:.58rem}}

/* Geliştirilmiş halka dağılımı: miktar, maliyet ve pay birlikte. */
#fuelTools .pieLayout{display:flex;align-items:center;justify-content:center;gap:24px;min-height:230px}
#fuelTools .pie{position:relative;flex:0 0 158px;width:158px;height:158px;border-radius:50%;box-shadow:none}
#fuelTools .pie::before{content:'';position:absolute;inset:27%;border-radius:50%;background:#fff}
#fuelTools .pieCenter{position:absolute;inset:29%;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#24465f;line-height:1.15}
#fuelTools .pieCenter strong{font-size:.65rem;letter-spacing:.04em}
#fuelTools .pieCenter span{font-size:.76rem;font-weight:800;font-variant-numeric:tabular-nums}
#fuelTools .pieCenter small{font-size:.61rem;font-variant-numeric:tabular-nums}
#fuelTools .pieLegend{display:grid;min-width:min(100%,330px);max-width:420px;gap:8px;font-size:.75rem}
#fuelTools .fuelPieRow{display:grid;grid-template-columns:11px minmax(0,1fr);gap:8px;align-items:start;padding:5px 0;border-bottom:1px solid #e3eaf0}
#fuelTools .fuelPieRow>i{width:10px;height:10px;margin-top:4px;border-radius:50%}
#fuelTools .fuelPieRowHeader{display:flex;justify-content:space-between;gap:12px;color:#31566e}
#fuelTools .fuelPieRowHeader b{font-variant-numeric:tabular-nums}
#fuelTools .fuelPieRow>div>span{display:block;margin-top:2px;color:#526c7d;font-size:.72rem;font-variant-numeric:tabular-nums}
#fuelTools .fuelPieTrack{height:4px;margin-top:5px;border-radius:4px;background:#e9f0f4;overflow:hidden}
#fuelTools .fuelPieTrack i{display:block;height:100%;border-radius:4px}
@media(max-width:520px){#fuelTools .pieLayout{flex-wrap:wrap;gap:14px}#fuelTools .pie{flex-basis:140px;width:140px;height:140px}#fuelTools .pieLegend{min-width:100%}}

/* Aylik yakit halka grafigi kartlari ve baslik yanindaki yil secimi */
#fuelTools #fuelCharts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#fuelTools .fuelPiePanel{min-height:0!important}
#fuelTools .fuelMonthlyPieGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:7px;max-height:310px;overflow:auto;padding:2px 4px 4px 0}
#fuelTools .monthFuelPieCard{min-width:0;min-height:136px;border:1px solid #dce6ed;border-radius:6px;background:linear-gradient(145deg,#fff,#f7fafc);padding:6px}
#fuelTools .monthFuelPieCard h4{margin:0 0 5px;color:#24465f;font-size:.67rem;letter-spacing:.02em}
#fuelTools .monthFuelPieBody{display:flex;align-items:center;gap:7px;min-width:0}
#fuelTools .monthFuelPieBody .pie{position:relative;flex:0 0 76px;width:76px;height:76px;border-radius:50%;box-shadow:none}
#fuelTools .monthFuelPieBody .pie::before{inset:27%}
#fuelTools .monthFuelPieBody .pieCenter{inset:28%;line-height:1.05}
#fuelTools .monthFuelPieBody .pieCenter strong{font-size:.43rem}
#fuelTools .monthFuelPieBody .pieCenter span{font-size:.5rem}
#fuelTools .monthFuelPieBody .pieCenter small{font-size:.42rem}
#fuelTools .monthFuelPieBody .pieLegend{min-width:0;max-width:none;width:100%;gap:2px;font-size:.6rem}
#fuelTools .monthFuelPieBody .fuelPieRow{grid-template-columns:7px minmax(0,1fr);gap:4px;padding:2px 0}
#fuelTools .monthFuelPieBody .fuelPieRow>i{width:7px;height:7px;margin-top:3px}
#fuelTools .monthFuelPieBody .fuelPieRowHeader{gap:3px;justify-content:flex-start;font-size:.58rem}
#fuelTools .monthFuelPieBody .fuelPieRowHeader b{margin-left:6px}
#fuelTools .monthFuelPieBody .fuelPieRow>div>span{margin-top:1px;font-size:.52rem;white-space:nowrap}
#fuelTools .monthFuelPieBody .fuelPieTrack{height:3px;margin-top:2px;max-width:150px}
#fuelTools .monthFuelPieBody>p{margin:8px;color:#647584;font-size:.65rem}
@media(max-width:520px){#fuelTools #fuelCharts{grid-template-columns:minmax(0,1fr)}#fuelTools .fuelMonthlyPieGrid{max-height:360px}#fuelTools .monthFuelPieCard{min-height:140px}#fuelTools .monthFuelPieBody .pie{flex-basis:88px;width:88px;height:88px}}
/* Yakıt analizini yalnızca Yakıtlar sayfasında görünür tut. */
#fuelTools[hidden],body:not(.fuelMode) #fuelTools{display:none!important}
body.fuelMode #cards{gap:6px;margin:4px 0 6px}
body.fuelMode #cards .card{flex:1 1 130px;min-height:48px;padding:5px 9px}
body.fuelMode #cards .card b{font-size:1.05rem;line-height:1.2}

#fuelTools .fuelFilterPanel{width:100%;padding:9px 10px 8px;border:1px solid #d4dfe7;border-radius:7px;background:#fff}
#fuelTools .fuelFilterPanel h3{margin:0 0 7px;color:#24465f;font-size:.82rem}
#fuelTools .fuelFilterPanel .fuelFilters{gap:8px 10px}
#fuelTools .fuelFilterPanel .fuelFilters label{min-width:145px}
#fuelTools .fuelFilterPanel .fuelFilters label:has(#fuelYear){flex:0 0 96px;min-width:0}
#fuelTools .fuelFilterPanel .fuelFilters label:has(#fuelMonth){flex:0 0 144px;min-width:0}
#fuelTools .fuelFilterPanel,#fuelTools .fuelFilterPanel .fuelFilters{max-height:none;overflow:visible}
#loginForm .brand::after{content:"Tek ekran, tam kontrol.";display:block;margin-top:10px;font:italic 1.22rem "Segoe Script","Bradley Hand",cursive;font-weight:600;letter-spacing:.02em;color:#2b7c82}
.loginInlineStatus{min-height:1.2em;color:#b43c48;font-size:.82rem;font-weight:700;text-align:center;margin-top:-4px}.loginInlineStatus:empty{display:none}
#loginError{display:none!important}
#filters,#reportTools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
#exit{flex:none}
@media(min-width:801px){
 aside{position:sticky;top:0;height:100vh;align-self:start;overflow-y:auto;overflow-x:hidden}
 nav{min-height:0;overflow-y:auto}
}
#trackingFilter{display:grid;gap:.32rem;min-width:180px}
#trackingFilter select,#reportTools select{max-width:100%}
#mobileExit{font-size:0!important;width:46px;height:38px;padding:5px!important;background:#7e3f54 url('/icons/cikis.svg') center/26px 26px no-repeat!important;border:1px solid #d18a99!important;border-radius:6px!important}.logoutIcon:hover,#mobileExit:hover{background-color:#a14d65!important}#exit{background-image:url('/icons/cikis.svg');background-repeat:no-repeat;background-position:12px center;background-size:24px 24px;padding-left:44px}
/* Genel Bakış filtreleri mobilde yatay akışta kalır, genişlik yetmezse alt satıra sarılır. */
@media(max-width:800px){
 #filters{display:flex!important;flex-wrap:wrap;align-items:flex-end;gap:8px;overflow:visible}
 #reportTools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;overflow:visible}
 #filters[hidden],#reportTools[hidden]{display:none!important}
 #filters>label,#reportTools>label{width:auto!important;min-width:min(100%,145px);flex:1 1 145px}
 #filters label#trackingFilter{flex:1 1 220px;min-width:min(100%,220px)}
 #filters input,#filters select,#reportTools input,#reportTools select{width:100%;max-width:100%}
}