/* VALTEGO hedef 31 ekran - final referans kilidi */
:root{--vt-navy:#001336;--vt-blue:#1279cc;--vt-active:#188bde;--vt-called:#dc2626;--vt-cancelled:#B31E8B;--vt-parked:#DA6F08;--vt-empty:#16a34a}
html,body,#root{font-family:Poppins,sans-serif;background:var(--vt-navy);overflow-x:hidden}
.app{min-height:100dvh;background:var(--vt-navy)}
.app-head{height:78px!important;min-height:78px!important;padding:20px!important;background:var(--vt-navy)!important;border:0!important;display:flex!important;align-items:center!important;justify-content:center!important;position:relative!important}
.app-head .brand{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;margin:0!important;color:#fff!important;font-size:24px!important;line-height:38px!important;font-weight:700!important;letter-spacing:1.4px!important;white-space:nowrap!important}
.app-head .brand small{font:inherit!important}
.app-head .header-actions{position:absolute!important;right:20px!important;top:50%!important;transform:translateY(-50%)!important;display:flex!important;align-items:center!important;gap:10px!important;margin:0!important}
.app-head .logout{position:static!important;transform:none!important;width:44px!important;min-width:44px!important;min-height:44px!important;height:44px!important;border-radius:10px!important;padding:0!important;background:#dc2626!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:0!important;font-size:13px!important;font-weight:600!important;box-shadow:0 7px 18px rgba(220,38,38,.24)!important}
.app-head .logout .icon{width:22px!important;height:22px!important;stroke-width:2.2!important}.app-head .logout span{display:none!important}
.role-admin .header-tool{height:40px!important;min-height:40px!important;border-radius:8px!important}

/* Vale araç ekranı: React kaynağındaki gerçek ölçüler ve düz renkler */
.role-valet main{width:100%!important;max-width:none!important}
.role-valet .vehicle-page{padding:20px 20px 100px!important}
.role-valet .vehicle-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
.role-valet .vehicle-card{min-height:120px!important;border:0!important;border-radius:12px!important;padding:16px!important;box-shadow:0 4px 12px rgba(0,0,0,.30)!important;position:relative!important;transform:none;background-image:none!important}
.role-valet .vehicle-card.red{background:var(--vt-called)!important}
.role-valet .vehicle-card.purple{background:var(--vt-cancelled)!important}
.role-valet .vehicle-card.orange{background:var(--vt-parked)!important}
.role-valet .vehicle-card.green{background:var(--vt-empty)!important}
.role-valet .vehicle-card:not(.empty-card){cursor:default!important}
.role-valet .vehicle-card.red{cursor:pointer!important}
.role-valet .vehicle-card[data-vehicle]{display:block!important;text-align:left!important;color:#fff!important}
.role-valet .vehicle-card[data-vehicle]>strong{display:block!important;margin:0 0 8px!important;color:#fff!important;font-size:18px!important;line-height:1.2!important;font-weight:700!important}
.role-valet .vehicle-card[data-vehicle]>span{display:block!important;margin:0 0 4px!important;color:rgba(255,255,255,.9)!important;font-size:14px!important;line-height:1.25!important;font-weight:600!important}
.role-valet .vehicle-card[data-vehicle]>small{display:block!important;margin:0 0 2px!important;color:rgba(255,255,255,.8)!important;font-size:12px!important;line-height:1.35!important;font-weight:500!important}
.role-valet .vehicle-card.empty-card{display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important}
.role-valet .vehicle-card.empty-card strong{margin:0!important;color:#fff!important;font-size:20px!important;font-weight:700!important;text-align:center!important}
.role-valet .vehicle-card .edit-dot{top:8px!important;right:8px!important;width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;border:0!important;border-radius:50%!important;background:#fff!important;color:var(--vt-parked)!important;box-shadow:0 2px 6px rgba(0,0,0,.2)!important;padding:7px!important}
.role-valet .vehicle-card .edit-dot .icon{width:14px!important;height:14px!important;stroke-width:2!important}
.role-valet .vehicle-card .countdown{display:block!important;margin:0 0 8px!important;padding:4px 8px!important;border-radius:6px!important;background:rgba(0,0,0,.3)!important;color:#fff!important;font-size:16px!important;font-weight:700!important;text-align:center!important}

/* Kaynak alt menü ölçüleri */
.role-valet .bottom-nav{height:88px!important;padding:16px 20px max(24px,env(safe-area-inset-bottom))!important;background:var(--vt-navy)!important;border-top:1px solid rgba(255,255,255,.1)!important}
.role-valet .bottom-nav .nav-img,.role-valet .bottom-nav button .icon{width:32px!important;height:32px!important}
.role-valet .bottom-nav button.active:after{width:8px!important;height:8px!important;border-radius:50%!important;background:var(--vt-active)!important;box-shadow:0 0 6px var(--vt-active),0 0 14px rgba(24,139,222,.72)!important}
.role-admin .bottom-nav,.role-supervisor .bottom-nav{height:80px!important;background:var(--vt-navy)!important;border-top:1px solid rgba(255,255,255,.1)!important}
.role-admin .bottom-nav button .icon,.role-supervisor .bottom-nav button .icon{width:20px!important;height:20px!important;stroke-width:1.8!important}
.role-admin .bottom-nav small,.role-supervisor .bottom-nav small{font-size:10px!important}
.role-admin .bottom-nav button.active:after,.role-supervisor .bottom-nav button.active:after{width:6px!important;height:6px!important}

/* Supervisor hedef sistemde tek mekanlıdır; hedefte mekan seçici yoktur. */
.role-supervisor .location-select,.role-supervisor #cardLoc,.role-supervisor #vehicleLoc{display:none!important}

/* Araç popupı hedef ölçüsü + manuel marka/model/renk */
.vehicle-form-modal{width:min(calc(100vw - 38px),400px)!important;max-width:400px!important;background:#001a43!important;border:0!important;border-radius:16px!important;padding:28px 24px 26px!important}
.vehicle-form-modal>h3{font-size:22px!important;line-height:1.3!important;text-align:center!important;margin:0 0 24px!important}
.vehicle-form-modal label{display:block!important;color:#9ca3af!important;font-size:14px!important;font-weight:600!important;margin:0 0 16px!important}
.vehicle-form-modal input,.vehicle-form-modal select{width:100%!important;min-height:52px!important;margin-top:8px!important;border:1px solid #4b607b!important;border-radius:9px!important;background:#374151!important;color:#fff!important;padding:0 14px!important;font-family:Poppins,sans-serif!important;font-size:16px!important;font-weight:600!important;outline:none!important}
.vehicle-form-modal select:disabled{opacity:.55!important}
.vehicle-form-modal .vehicle-custom-input[hidden]{display:none!important}
.vehicle-form-modal .vehicle-custom-input{margin-top:8px!important;border-color:#1279cc!important;background:#263950!important}
.vehicle-form-modal .edit-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important}
.vehicle-form-modal .edit-actions button{width:100%!important;min-width:0!important;height:52px!important;min-height:52px!important;white-space:nowrap!important;border-radius:10px!important}
.vehicle-form-modal .upload-box img,.photo-button img,.vehicle-photo-viewer>img{object-fit:contain!important}

/* Admin hedef kaynak onay modalları */
.reference-confirm-modal{width:min(calc(100vw - 38px),400px)!important;max-width:400px!important;text-align:center!important;background:#001a43!important;border:0!important;border-radius:16px!important;padding:32px 24px 26px!important}
.reference-confirm-modal .confirm-symbol{width:64px!important;height:64px!important;margin:0 auto 18px!important;border-radius:50%!important;display:grid!important;place-items:center!important}
.reference-confirm-modal .confirm-symbol .icon{width:30px!important;height:30px!important}
.reference-confirm-modal .confirm-symbol.freeze{background:#DA6F08!important;color:#fff!important}
.reference-confirm-modal .confirm-symbol.activate{background:#16a34a!important;color:#fff!important}
.reference-confirm-modal .confirm-symbol.delete{background:#dc2626!important;color:#fff!important;font-size:30px!important;font-weight:800!important}
.reference-confirm-modal .reference-confirm-actions{grid-template-columns:1fr 1fr!important}
.reference-confirm-modal .reference-confirm-actions button{width:100%!important;min-width:0!important;white-space:nowrap!important}

@media(max-width:520px){
  .app-head{height:78px!important;min-height:78px!important;padding:20px!important}
  .app-head .header-actions{right:14px!important;gap:6px!important}
  .role-valet .app-head .logout,.role-supervisor .app-head .logout{width:44px!important;min-width:44px!important;height:44px!important;padding:0!important}
  .role-valet .app-head .logout span,.role-supervisor .app-head .logout span{display:none!important}
  .role-valet .vehicle-page{padding:20px 20px 100px!important}
  .role-valet .vehicle-grid{gap:16px!important}
  .role-valet .vehicle-card{min-height:120px!important;padding:16px!important}
}
@media(max-width:360px){
  .role-valet .vehicle-page{padding-left:14px!important;padding-right:14px!important}
  .role-valet .vehicle-grid{gap:12px!important}
  .role-valet .vehicle-card{padding:13px!important}
  .role-valet .vehicle-card[data-vehicle]>strong{font-size:16px!important}
}

/* Header aksiyon standardı: Ayarlar ve Çıkış birebir aynı dış/iç ölçü */
.app-head .header-actions{gap:10px!important}
.role-admin .app-head .header-tool,
.app-head .logout{
  box-sizing:border-box!important;
  width:46px!important;
  min-width:46px!important;
  max-width:46px!important;
  height:46px!important;
  min-height:46px!important;
  max-height:46px!important;
  padding:0!important;
  margin:0!important;
  border-radius:10px!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 46px!important;
  line-height:1!important;
}
.role-admin .app-head .header-tool{
  border:1px solid #294766!important;
  background:#11294b!important;
  color:#91c9ff!important;
  box-shadow:none!important;
}
.app-head .logout{
  border:1px solid #dc2626!important;
  background:#dc2626!important;
  color:#fff!important;
  box-shadow:0 7px 18px rgba(220,38,38,.24)!important;
}
.role-admin .app-head .header-tool span,
.app-head .logout span{display:none!important}
.role-admin .app-head .header-tool .icon,
.app-head .logout .icon{
  display:block!important;
  width:21px!important;
  min-width:21px!important;
  height:21px!important;
  min-height:21px!important;
  stroke-width:2.15!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
}
@media(max-width:520px){
  .app-head .header-actions{right:14px!important;gap:8px!important}
  .role-admin .app-head .header-tool,
  .app-head .logout{width:46px!important;min-width:46px!important;max-width:46px!important;height:46px!important;min-height:46px!important;max-height:46px!important;flex-basis:46px!important}
  .role-admin .app-head .header-tool .icon,
  .app-head .logout .icon{width:21px!important;height:21px!important;min-width:21px!important;min-height:21px!important}
}