* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background:#f0f2f5; color:#333; -webkit-text-size-adjust:100%; }

/* LOGIN */
.login-page { display:flex; justify-content:center; align-items:center; min-height:100vh; background:linear-gradient(135deg,#333 0%,#1a1a1a 100%); padding:16px; }
.login-box { background:#fff; padding:40px; border-radius:12px; width:100%; max-width:400px; text-align:center; box-shadow:0 4px 20px rgba(0,0,0,.3); }
.login-box .login-logo { max-width:300px; width:100%; margin-bottom:24px; }
.login-box h1 { display:none; }
.login-box p { color:#666; margin-bottom:24px; font-size:14px; }
.login-box input { width:100%; padding:12px; margin-bottom:12px; border:1px solid #ddd; border-radius:8px; font-size:16px; -webkit-appearance:none; }
.login-box button { width:100%; padding:12px; background:#c62828; color:#fff; border:none; border-radius:8px; font-size:16px; cursor:pointer; }
.login-box button:hover { background:#b71c1c; }
.error-msg { color:#d32f2f; margin-top:10px; font-size:13px; }

/* LAYOUT */
.main-app { display:flex; min-height:100vh; }
.sidebar { width:240px; background:#2c2c2c; color:#fff; display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:100; transition:transform .3s; }
.sidebar.hidden { transform:translateX(-100%); }
.sidebar-header { padding:14px 16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.1); }
.sidebar-header .sidebar-logo { width:32px; height:32px; }
.sidebar-header h2 { font-size:16px; flex:1; }
.sidebar-close { background:none; border:none; color:#fff; font-size:24px; cursor:pointer; padding:4px; margin-left:auto; }
.sidebar ul { list-style:none; flex:1; padding:10px 0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.sidebar li a { display:block; padding:11px 20px; color:rgba(255,255,255,.7); text-decoration:none; font-size:13px; transition:background .2s; }
.sidebar li a:hover, .sidebar li a.active { background:rgba(255,255,255,.1); color:#fff; border-left:3px solid #c62828; padding-left:17px; }
.sidebar-footer { padding:15px 20px; border-top:1px solid rgba(255,255,255,.1); }
.btn-logout { width:100%; padding:10px; background:rgba(255,255,255,.1); color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:13px; }
.btn-logout:hover { background:rgba(255,255,255,.2); }

/* Sidebar overlay for mobile */
.sidebar-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.4); z-index:99; }

.content { margin-left:240px; flex:1; min-height:100vh; transition:margin-left .3s; }
.sidebar.hidden ~ .content { margin-left:0; }
.topbar { display:flex; align-items:center; padding:15px 24px; background:#fff; border-bottom:1px solid #e0e0e0; gap:12px; position:sticky; top:0; z-index:50; }
.topbar h3 { flex:1; font-size:18px; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.menu-btn { background:none; border:none; font-size:24px; cursor:pointer; color:#333; flex-shrink:0; padding:4px; }
#userInfo { font-size:13px; color:#666; white-space:nowrap; }
#pageContent { padding:24px; }

/* CARDS */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:20px; }
.stat-card { background:#fff; padding:16px; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.stat-card .label { font-size:12px; color:#888; margin-bottom:4px; }
.stat-card .value { font-size:26px; font-weight:700; }
.stat-card.blue .value { color:#333; }
.stat-card.green .value { color:#2e7d32; }
.stat-card.orange .value { color:#e65100; }
.stat-card.red .value { color:#c62828; }

/* TABLE */
.card { background:#fff; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,.08); margin-bottom:20px; overflow:hidden; }
.card-header { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid #eee; gap:10px; flex-wrap:wrap; }
.card-header h4 { font-size:16px; color:#333; }
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { background:#f5f5f5; padding:10px 12px; text-align:left; font-weight:600; color:#555; white-space:nowrap; }
td { padding:10px 12px; border-top:1px solid #f0f0f0; white-space:nowrap; }
tr:hover td { background:#fef8f8; }

/* BADGES */
.badge { display:inline-block; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; white-space:nowrap; }
.badge-musait { background:#e8f5e9; color:#2e7d32; }
.badge-mesgul { background:#fff3e0; color:#e65100; }
.badge-izinli { background:#e3f2fd; color:#1565c0; }
.badge-beklemede { background:#fff9c4; color:#f57f17; }
.badge-atandi { background:#e3f2fd; color:#1565c0; }
.badge-kabul { background:#e8f5e9; color:#2e7d32; }
.badge-yukleme { background:#f3e5f5; color:#7b1fa2; }
.badge-yolda { background:#e0f7fa; color:#00695c; }
.badge-teslim { background:#e8eaf6; color:#283593; }
.badge-tamamlandi { background:#e8f5e9; color:#1b5e20; }
.badge-iptal { background:#ffebee; color:#b71c1c; }
.badge-normal { background:#e3f2fd; color:#1565c0; }
.badge-acil { background:#ffebee; color:#b71c1c; }

/* BUTTONS */
.btn { display:inline-block; padding:8px 16px; border:none; border-radius:6px; font-size:13px; cursor:pointer; text-decoration:none; white-space:nowrap; }
.btn-primary { background:#c62828; color:#fff; }
.btn-primary:hover { background:#b71c1c; }
.btn-success { background:#2e7d32; color:#fff; }
.btn-success:hover { background:#1b5e20; }
.btn-danger { background:#d32f2f; color:#fff; }
.btn-danger:hover { background:#c62828; }
.btn[disabled] { opacity:.5; pointer-events:none; }
.btn-sm { padding:5px 10px; font-size:12px; }
.btn-outline { background:transparent; border:1px solid #c62828; color:#c62828; }
.btn-outline:hover { background:#c62828; color:#fff; }

/* MODAL */
.modal-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); z-index:200; justify-content:center; align-items:flex-start; padding:20px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.modal-overlay.show { display:flex; }
.modal { background:#fff; border-radius:12px; width:100%; max-width:560px; margin:auto; }
.modal-header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid #eee; }
.modal-header h4 { font-size:16px; }
.modal-close { background:none; border:none; font-size:22px; cursor:pointer; color:#666; padding:4px; }
.modal-body { padding:20px; }
.modal-footer { padding:12px 20px; border-top:1px solid #eee; text-align:right; display:flex; gap:10px; justify-content:flex-end; }

/* FORM */
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:13px; font-weight:600; margin-bottom:4px; color:#555; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; font-size:14px; -webkit-appearance:none; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:#c62828; box-shadow:0 0 0 2px rgba(198,40,40,.15); }
.form-group textarea { resize:vertical; min-height:60px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* UTILITIES */
.text-danger { color:#c62828; }
.text-muted { color:#888; font-size:12px; }

/* SIMPLE LIST */
.list-wrap { padding:10px 16px; }
.list-item { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border:1px solid #eee; border-radius:8px; margin-bottom:6px; font-size:14px; }

/* EMPTY STATE */
.empty-msg { text-align:center; padding:20px; color:#888; font-size:13px; }

/* FILTER BAR */
.filter-bar { display:flex; gap:10px; padding:10px 16px; flex-wrap:wrap; align-items:center; border-bottom:1px solid #f0f0f0; }
.filter-bar label { font-size:12px; color:#888; font-weight:600; }
.filter-bar select, .filter-bar input[type="date"], .filter-bar input[type="text"] { padding:8px 10px; border:1px solid #ddd; border-radius:6px; font-size:13px; -webkit-appearance:none; }
.filter-bar select:focus, .filter-bar input:focus { border-color:#c62828; outline:none; }
.filter-bar .sep { color:#ccc; }

/* PAGINATION */
.pagination { padding:12px 16px; display:flex; justify-content:center; align-items:center; gap:6px; flex-wrap:wrap; }
.pagination .page-info { font-size:12px; color:#888; margin-right:8px; }

/* QUEUE */
.queue-list { padding:10px 16px; }
.queue-item { display:flex; align-items:center; gap:12px; padding:12px 16px; background:#fff; border:1px solid #eee; border-radius:8px; margin-bottom:8px; }
.queue-item .order { width:32px; height:32px; background:#c62828; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0; }
.queue-item .plate { font-weight:700; font-size:15px; }
.queue-item .info { flex:1; min-width:0; }
.queue-item .info small { color:#888; font-size:12px; }

/* JOB DETAIL MODAL */
.detail-card { background:#f8f9fa; border-radius:10px; padding:16px; }
.detail-title { font-size:18px; font-weight:700; color:#333; margin-bottom:8px; }
.detail-badges { margin-bottom:14px; display:flex; gap:6px; flex-wrap:wrap; }
.detail-row { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid #eee; font-size:14px; }
.detail-row .detail-label { color:#888; flex-shrink:0; }
.detail-row .detail-value { font-weight:600; text-align:right; word-break:break-word; }
.detail-notes { margin-top:12px; padding:10px; background:#fff; border-radius:8px; font-size:13px; color:#555; line-height:1.5; }
.detail-section-title { font-size:14px; font-weight:700; color:#c62828; margin:16px 0 8px; padding-bottom:6px; border-bottom:2px solid #fecaca; }
.reject-card { background:#fef2f2; border:1px solid #fecaca; border-radius:8px; padding:12px; margin-bottom:8px; }
.reject-reason { font-weight:600; color:#991b1b; font-size:14px; margin-bottom:4px; }
.reject-meta { font-size:12px; color:#888; }

/* LOCATION BADGES */
.loc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; padding:14px; }
.loc-badge { display:block; background:#f8f9fa; border:1px solid #eee; border-radius:10px; padding:14px; text-decoration:none; color:#333; transition:all .2s; text-align:center; }
.loc-badge:hover { border-color:#c62828; box-shadow:0 2px 8px rgba(198,40,40,.15); transform:translateY(-2px); }
.loc-plate { font-weight:700; font-size:15px; margin-bottom:4px; }
.loc-driver { font-size:12px; color:#666; margin-bottom:4px; }
.loc-time { font-size:11px; color:#999; margin-bottom:8px; }
.loc-map-icon { font-size:12px; color:#c62828; font-weight:600; }

/* INFO BANNER */
.info-banner { display:flex; align-items:flex-start; gap:10px; padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:13px; line-height:1.5; }
.info-banner.blue { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
.info-banner.green { background:#e8f5e9; border:1px solid #c8e6c9; color:#1b5e20; }
.info-banner.orange { background:#fff3e0; border:1px solid #ffe0b2; color:#e65100; }
.info-banner .info-icon { font-size:18px; flex-shrink:0; margin-top:1px; }
.info-banner .info-text { flex:1; min-width:0; }
.info-banner .info-text strong { font-weight:700; }
.info-banner .next-vehicle { display:inline-block; margin-top:6px; padding:4px 12px; background:rgba(255,255,255,.7); border-radius:6px; font-weight:700; font-size:13px; }

/* TOAST */
.toast-container { position:fixed; top:20px; right:20px; z-index:300; display:flex; flex-direction:column; gap:10px; max-width:calc(100% - 40px); }
.toast { padding:12px 16px; border-radius:10px; color:#fff; font-size:13px; font-weight:500; box-shadow:0 4px 12px rgba(0,0,0,.2); animation:toastIn .3s ease, toastOut .3s ease 3.7s; max-width:400px; display:flex; align-items:center; gap:10px; }
.toast.success { background:#2e7d32; }
.toast.error { background:#c62828; }
.toast.warning { background:#e65100; }
.toast.info { background:#333; }
.toast .toast-icon { font-size:16px; flex-shrink:0; }
.toast .toast-msg { flex:1; }
@keyframes toastIn { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; transform:translateY(-10px); } }

/* ===================== RESPONSIVE ===================== */
@media (max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .sidebar.hidden { transform:translateX(-100%); }
  .sidebar-overlay.show { display:block; }
  .content { margin-left:0 !important; }
  .topbar { padding:12px 16px; gap:10px; }
  .topbar h3 { font-size:16px; }
  #pageContent { padding:14px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .stat-card { padding:14px; }
  .stat-card .value { font-size:22px; }
  .form-row { grid-template-columns:1fr; }
  .card-header { padding:12px 14px; }
  .card-header h4 { font-size:14px; }
  .modal-overlay { padding:10px; align-items:flex-start; }
  .modal-body { padding:16px; }
  .modal-header { padding:14px 16px; }
  .queue-list { padding:10px 14px; }
  .queue-item { padding:10px 12px; gap:10px; }
  .info-banner { padding:10px 14px; font-size:12px; gap:8px; }
  .toast-container { top:10px; right:10px; max-width:calc(100% - 20px); }
  .toast { max-width:100%; font-size:12px; padding:10px 14px; }
  .login-box .login-logo { max-width:240px; }

  /* MOBIL KART GORUNUMU */
  .table-wrap table thead { display:none; }
  .table-wrap table, .table-wrap table tbody, .table-wrap table tr, .table-wrap table td { display:block; width:100%; }
  .table-wrap table tr { background:#fff; border:1px solid #eee; border-radius:10px; margin-bottom:10px; padding:12px; }
  .table-wrap table td { padding:6px 0; border:none; display:flex; justify-content:space-between; align-items:center; white-space:normal; font-size:13px; }
  .table-wrap table td::before { content:attr(data-label); font-weight:600; color:#888; font-size:12px; margin-right:10px; flex-shrink:0; }
  .table-wrap table td:last-child { padding-top:10px; border-top:1px solid #f0f0f0; justify-content:flex-end; gap:6px; }
  .table-wrap table td:last-child::before { display:none; }
}

@media (max-width:480px) {
  .login-box { padding:28px 20px; }
  .login-box .login-logo { max-width:200px; }
  .stats-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .stat-card { padding:12px; }
  .stat-card .label { font-size:11px; }
  .stat-card .value { font-size:20px; }
  #pageContent { padding:10px; }
  .topbar { padding:10px 12px; }
  .topbar h3 { font-size:15px; }
  .card-header { padding:10px 12px; }
  .btn { padding:7px 12px; font-size:12px; }
  .btn-sm { padding:4px 6px; font-size:10px; }
  .modal-body { padding:14px; }
  .form-group input, .form-group select, .form-group textarea { padding:9px; font-size:14px; }
  .queue-item .plate { font-size:13px; }
  .info-banner { font-size:11px; padding:10px 12px; }
  .info-banner .info-icon { font-size:16px; }
}