/* Çetin Total: existing desktop styles remain in style.css. */
.mobile-menu-toggle,.mobile-sidebar-close,.sidebar-overlay{display:none}
.mobile-sidebar-shell{flex:0 0 260px;position:relative}
.mobile-sidebar-shell>.sidebar{min-height:100%;width:100%}
.main{min-width:0}
.topbar-menu-slot{width:220px}
.mobile-table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:900px){
 html,body{width:100%;max-width:100%}
 .layout{display:block;min-height:100svh}
 .main{width:100%;margin:0;padding:14px max(12px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
 body.sidebar-open{overflow:hidden}
 .mobile-sidebar-shell{position:fixed;left:0;top:0;bottom:0;width:min(84vw,300px);z-index:10001;overflow-y:auto;overscroll-behavior:contain;transform:translateX(-105%);visibility:hidden;transition:transform .22s ease,visibility .22s;background:#103b31;box-shadow:18px 0 45px #0f172a40}
 body.sidebar-open .mobile-sidebar-shell{transform:translateX(0);visibility:visible}
 .mobile-sidebar-shell>.sidebar{padding:64px 18px max(24px,env(safe-area-inset-bottom));height:auto;min-height:100%;width:100%}
 .mobile-sidebar-close{display:flex;position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:#ffffff20;color:#fff;font-size:28px;z-index:2}
 .sidebar-overlay:not([hidden]){display:block;position:fixed;inset:0;z-index:10000;width:100%;height:100%;border:0;border-radius:0;padding:0;background:#0f172a88;touch-action:manipulation}
 .sidebar-user-line{white-space:normal;flex-wrap:wrap}.sidebar-user-name{white-space:normal;overflow-wrap:anywhere}
 .modern-menu a{min-height:46px}
 .main>.topbar{position:sticky;top:0;z-index:900;min-height:68px;gap:10px;padding:12px;margin-bottom:18px;border-radius:12px}
 .topbar-menu-slot{width:auto;flex:0 0 44px}
 .mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid #ffffff40;background:#ffffff18;color:#fff;border-radius:10px}
 .topbar-center{min-width:0}#liveDate{font-size:11px;line-height:1.4}#liveClock{font-size:20px}
 .modern-topbar .logout{min-height:44px;padding:10px;font-size:12px;gap:5px;white-space:nowrap}
 .box,.card,.personnel-card,.shift-header{padding:16px;border-radius:12px;min-width:0}
 h2{font-size:22px}h3{font-size:18px}
 .shift-header,.oil-page-header,.oil-form-header,.oil-list-toolbar{align-items:stretch;flex-direction:column;gap:14px}
 .shift-actions,.oil-action-buttons,.oil-header-actions{width:100%;gap:8px}
 .shift-actions>*{flex:1 1 140px}
 button,.btn,.action-btn,.oil-action-btn,.oil-table-btn,.ec-btn,.ic-btn{min-height:44px;touch-action:manipulation}
 .action-btn{height:auto}.credit-selection-chip button{min-width:36px;min-height:36px;flex-shrink:0}
 input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important;max-width:100%;min-height:46px}
 .form-row input:not([type=hidden]),.form-row select,.form-row textarea{width:100%;margin:5px 0}
 .form-row button{max-width:100%;margin:5px 0}
 .personnel-add-box{display:flex}.personnel-add-box select{flex:1 1 100%;margin:0;min-width:0}.personnel-add-box button{width:100%}
 .personnel-cards,.movement-grid{grid-template-columns:minmax(0,1fr)}
 .personnel-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .summary-item{padding:12px;min-width:0}.summary-item strong{font-size:18px;overflow-wrap:anywhere}.summary-item button{min-height:44px}
 .cards,.dashboard-grid{grid-template-columns:1fr}.quick-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .quick-action{padding:14px;overflow-wrap:anywhere}
 .report-filter{align-items:stretch;gap:10px}.report-filter>div{flex:1 1 140px;min-width:0}.report-filter input{width:100%;margin:5px 0}.report-filter button{width:100%}
 .report-tabs{gap:7px}.report-tab-btn{flex:1 1 100px}
 .form-actions,.page-actions{flex-wrap:wrap;gap:10px}.form-actions>*{width:100%;min-width:0}
 .selected-oil-box{grid-template-columns:1fr;gap:5px}
 .customer-table,.table-responsive,.credit-table-wrap,.ec-table-wrap,.ic-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
 .mobile-table-scroll table{min-width:560px}
 th,td{padding:11px;font-size:14px}
 .action-buttons{justify-content:flex-start}
 .modal{padding:8px!important;overflow-y:auto;overscroll-behavior:contain}
 .modal.active{display:flex;align-items:flex-start;justify-content:center}
 .modal .modal-content,#creditModal .modal-content,.customer-search-modal-content{width:100%!important;max-width:100%!important;margin:0!important;padding:16px!important;max-height:calc(100vh - 16px)!important;max-height:calc(var(--mobile-viewport-height,100dvh) - 16px)!important;border-radius:12px;overflow:auto;-webkit-overflow-scrolling:touch}
 .modal-head{gap:10px;align-items:center}.modal-head h3{margin:0;font-size:18px}.modal-close{flex-shrink:0}
 .modal .form-row{min-width:0}.modal .form-row>input,.modal .form-row>select{flex:1 1 100%!important;min-width:0!important}
 .credit-customer-section{max-width:none}.search-results{max-width:100%}.search-result-item{min-height:46px;line-height:1.5}
 .credit-selection-chip{max-width:100%;overflow-wrap:anywhere}.credit-selection-chip span{min-width:0}
 .credit-group-head,.credit-modal-footer,.credit-group-detail>div{flex-direction:column;align-items:stretch;gap:10px}
 .credit-group-actions{display:flex;flex-wrap:wrap;gap:6px}
 .customer-search-modal-header{padding-right:48px}.customer-search-result-item,.customer-search-result-info{align-items:flex-start;flex-direction:column}
 .customer-search-result-actions{flex-wrap:wrap;gap:8px;width:100%}.customer-search-result-actions>*{flex:1 1 80px}
 .customer-search-input-group{flex-direction:column}.customer-search-status{align-items:flex-start;flex-direction:column;gap:5px}
 .customer-search-close{min-width:44px;min-height:44px}
 .oil-pagination,.oil-pagination-pages,.customer-list-pagination{flex-wrap:wrap;justify-content:center}
 .oil-pagination-number,.oil-pagination-btn,.customer-search-page-btn,.customer-list-page{min-width:44px;min-height:44px}
 .oil-search-form{flex-wrap:wrap;width:100%}.oil-search-input-wrapper{width:100%;min-width:0}
 .oil-stock-form input,.oil-stock-form textarea,.customer-edit-form input,.customer-edit-form textarea{margin-left:0;margin-right:0}
 .manual-fuel-form{align-items:stretch}.manual-fuel-form>div{flex:1 1 100%}.manual-fuel-form button{width:100%}
 .manual-fuel-compact{align-items:stretch;flex-direction:column}.manual-fuel-actions{flex-wrap:wrap}.manual-fuel-actions>*{flex:1 1 100px}
 .ec-modal,.ic-modal{padding:18px;max-height:calc(var(--mobile-viewport-height,100dvh) - 20px)}
 .dashboard-db-badge{bottom:max(12px,env(safe-area-inset-bottom));right:12px}
}
@media(max-width:380px){
 .personnel-summary-grid{grid-template-columns:1fr}.main{padding-left:10px;padding-right:10px}
 .modern-topbar .logout{font-size:11px}.modern-topbar .logout i{display:none}
 .topbar-center #liveDate{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.mobile-sidebar-shell{transition:none}}
@media print{.mobile-sidebar-shell,.sidebar-overlay,.mobile-menu-toggle{display:none!important}.main{width:100%;padding:0}.mobile-table-scroll{overflow:visible}}
/* Login uses its original design, with scrolling and iPhone safe areas. */
body.login-page{min-height:100vh;min-height:100svh;height:auto;overflow-x:hidden;overflow-y:auto;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.login-page .login-wrap{margin:auto}
.login-page .login-bg-shape{position:fixed}
.login-page .login-field input{font-size:16px}
@media(max-width:600px){
 .login-page .login-wrap{padding:24px 16px}
 .login-page .login-logo{width:170px;max-width:65%;margin-bottom:12px}
 .login-page .login-title{font-size:28px}
 .login-page .login-card{margin-top:18px;padding:24px 20px;border-radius:22px}
 .login-page .login-card h2{font-size:24px}
 .login-page .login-card p{font-size:14px;line-height:1.5;margin-bottom:20px}
 .login-page .login-footer{margin-top:22px;line-height:1.5}
}
@media(max-height:600px){
 .login-page .login-wrap{padding-top:16px;padding-bottom:16px}
 .login-page .login-logo{width:100px;margin-bottom:8px}
 .login-page .login-card{margin-top:12px;padding-top:18px;padding-bottom:18px}
 .login-page .login-icon{width:48px;height:48px;font-size:24px;margin-bottom:12px}
 .login-page .login-footer{margin-top:16px}
}