:root{
  --accent3:#b07cff;
}
.navTabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.navTabs a{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  transition:transform .14s ease, background .2s ease, border-color .2s ease;
}
.navTabs a:hover{transform:translateY(-1px); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); color:var(--text)}
.navTabs a.active{
  color:var(--text);
  background:linear-gradient(90deg, rgba(57,208,255,.18), rgba(65,242,182,.14));
  border-color:rgba(57,208,255,.28);
}
.kpi{
  position:relative;
  overflow:hidden;
}
.kpi::before{
  content:"";
  position:absolute;
  inset:-60%;
  background:conic-gradient(from 180deg, rgba(255,255,255,0), rgba(255,255,255,.25), rgba(255,255,255,0));
  opacity:.18;
  animation:spinSoft 6s linear infinite;
  pointer-events:none;
}
.kpi > *{position:relative; z-index:1}
@keyframes spinSoft{to{transform:rotate(360deg)}}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
}
.table th{
  text-align:left;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  padding:0 10px;
}
.table td{
  padding:12px 10px;
  background:rgba(255,255,255,.05);
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.table tr td:first-child{
  border-left:1px solid rgba(255,255,255,.10);
  border-top-left-radius:16px;
  border-bottom-left-radius:16px;
}
.table tr td:last-child{
  border-right:1px solid rgba(255,255,255,.10);
  border-top-right-radius:16px;
  border-bottom-right-radius:16px;
}
.bar{
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
}
.bar > i{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius:999px;
  animation:growBar .65s ease forwards;
}
@keyframes growBar{to{width:var(--w, 0%)}}


/* === SETTINGS_PAGE_STYLES === */
.settingsWrap{ padding: 18px 0 22px; }
/* === SETTINGS_SHELL_LAYOUT === */
.settingsShell{
  display:grid;
  grid-template-columns: 3fr 4fr;
  gap:14px;
  align-items:stretch;
  min-height: 560px;
  height: calc(100vh - 190px);
}
.settingsSide{ display:flex; flex-direction:column; gap:12px; overflow:hidden; min-height:0; }
.settingsMain{ overflow:auto; min-height:0; }
.settingsMain .pane{ padding-right: 6px; }

.vTabs{ display:flex; flex-direction:column; gap:10px; margin-top: 4px; }
.vTabBtn{
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:transform .14s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.vTabBtn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); color:var(--text); }
.vTabBtn.active{
  color:var(--text);
  background:linear-gradient(90deg, rgba(57,208,255,.18), rgba(65,242,182,.14));
  border-color:rgba(57,208,255,.28);
}

.newTag{
  display:none;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,120,150,.35);
  background:rgba(255,120,150,.14);
  color:rgba(255,230,238,.95);
  font-size:11px;
  font-weight:950;
  letter-spacing:.2px;
}
.newTag.show{ display:inline-flex; }

@media (max-width:980px){
  .settingsShell{ grid-template-columns: 1fr; height:auto; min-height: unset; }
  .settingsMain{ overflow:visible; }
}

.settingsGrid{ display:grid; grid-template-columns: 1fr; gap:14px; }
@media(min-width:900px){ .settingsGrid{ grid-template-columns: 1fr 1fr; } }
.settingsCard{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 16px;
  backdrop-filter: blur(10px);
}
.settingsTitle{ font-weight: 900; font-size: 18px; margin-bottom: 10px; }
.settingsRow{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.settingsRow label{ font-size: 13px; opacity:.85; }
.settingsRow input{
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  border-radius: 14px;
  padding: 12px 12px;
  outline: none;
}

.settingsRow select,
.settingsRow textarea{
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  border-radius: 14px;
  padding: 12px 12px;
  outline: none;
}
.settingsRow textarea{ min-height: 90px; resize: vertical; }

.settingsRow .chkLine{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.settingsRow .chkLine .k{ font-size:13px; opacity:.85; }
.settingsRow input[type="checkbox"]{ width:18px; height:18px; accent-color: var(--accent2); }

.subTabs{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin: 0 0 14px; }
.subTabs a{ text-decoration:none; }
.settingsActions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }
.settingsHint{ font-size:12px; opacity:.75; margin-top: 8px; line-height: 1.45; }

/* === Venue picker: apply butonu gereksiz === */
#apply{ display:none !important; }

/* === Daha "flash" hissi: sekmelerde parıltı + underline === */
.navTabs a{
  position:relative;
  overflow:hidden;
}
.navTabs a::before{
  content:"";
  position:absolute;
  inset:-60% -80%;
  background: conic-gradient(from 180deg, rgba(255,255,255,0), rgba(255,255,255,.18), rgba(255,255,255,0));
  opacity:0;
  transition: opacity .22s ease;
  animation: tabSpin 5.8s linear infinite;
}
.navTabs a:hover::before{ opacity:.35; }
.navTabs a.active::before{ opacity:.28; }
@keyframes tabSpin{ to{ transform: rotate(360deg);} }

.navTabs a::after{
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:6px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transform: scaleX(0);
  transform-origin:left;
  opacity:.85;
  transition: transform .22s ease;
}
.navTabs a.active::after,
.navTabs a:hover::after{ transform: scaleX(1); }

/* Input glow while active */
.input{ transition: box-shadow .2s ease, transform .12s ease; }
.input:focus{ transform: translateY(-1px); }

/* Order/item cards hover */
.order, .item, .card, .settingsCard{ transition: transform .16s ease, border-color .2s ease, background .2s ease; }
.order:hover, .item:hover, .card:hover, .settingsCard:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07); }

/* === Modern scrollbar (admin + waiter) === */
*{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
*::-webkit-scrollbar{ width: 6px; height: 6px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.28); }


.spanAll{ grid-column:1/-1; }
.setupTabs{ display:flex; gap:10px; flex-wrap:wrap; }
.setupTabs .chip{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.14);
  color: rgba(233,240,255,.88);
  font-weight:900;
  padding:8px 12px;
  border-radius: 999px;
  cursor:pointer;
  user-select:none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, outline-color .15s ease;
}
.setupTabs .chip:hover{ transform: translateY(-1px); border-color: rgba(57,208,255,.35); }
.setupTabs .chip.active{
  background: rgba(57,208,255,.14);
  border-color: rgba(57,208,255,.45);
  outline:2px solid rgba(57,208,255,.24);
}


/* RESET MODAL */
.modalWrap{width:min(780px, 92vw);}
.modalCard{
  width:100%;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  padding:18px;
}
.modalTitle{font-size:16px;font-weight:900;margin:0 0 6px}
.modalText{color:var(--muted);margin:0 0 12px;line-height:1.4}
.modalWarn{
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  border-radius:16px;
  padding:12px;
  margin-top:10px;
}
.resetSteps{display:grid;gap:10px;margin:10px 0 12px}
.rStep{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.rLeft{display:flex;align-items:center;gap:10px;min-width:0}
.rIcon{
  width:28px;height:28px;border-radius:10px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  flex:0 0 auto;
  color: var(--muted);
  font-weight:900;
}
.rLabel{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rMeta{color:var(--muted2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rStep.ok{border-color:rgba(65,242,182,.25); background: rgba(65,242,182,.08);}
.rStep.ok .rIcon{border-color:rgba(65,242,182,.35); color: var(--accent2);}
.rStep.bad{border-color:rgba(255,77,109,.25); background: rgba(255,77,109,.07);}
.rStep.bad .rIcon{border-color:rgba(255,77,109,.35); color: var(--danger);}
.progWrap{
  width:100%;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  overflow:hidden;
  margin:10px 0 6px;
}
.progBar{
  width:0%;
  height:100%;
  background: linear-gradient(90deg, rgba(57,208,255,.85), rgba(65,242,182,.85));
  border-radius:999px;
  transition: width .25s ease;
}
.resetReadyLine{
  margin-top:8px;
  color: var(--muted2);
  font-size:12px;
  line-height:1.25;
}
.modalActions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}
.modalActions .btn{min-width:140px}


/* HOLD TO CONFIRM */

.modalWrap{box-sizing:border-box}
.modalCard{box-sizing:border-box}
.holdConfirm{margin-top:6px}
.holdTop{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap}
.holdTitle{font-weight:950}
.holdDesc{font-size:12px;color:var(--muted2)}
.holdBtn{
  width:100%;
  position:relative;
  margin-top:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(233,240,255,.95);
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  overflow:hidden;
  cursor: pointer;
  user-select:none;
  touch-action: manipulation;
  transition: transform .08s ease, border-color .18s ease, background .18s ease;
}
.holdBtn:active{transform: scale(.99)}
.holdBtn:hover{border-color: rgba(57,208,255,.30)}
.holdFill{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0%;
  background: linear-gradient(90deg, rgba(57,208,255,.28), rgba(65,242,182,.26));
  border-right:1px solid rgba(255,255,255,.10);
  transition: width .08s linear;
  pointer-events:none;
}
.holdText{position:relative;font-weight:950;letter-spacing:.2px}
.holdPct{position:relative;font-size:12px;color:var(--muted2);min-width:38px;text-align:right}
.holdBtn.done{border-color: rgba(65,242,182,.35); background: rgba(65,242,182,.10)}
.holdBtn.done .holdPct{color: var(--accent2)}

/* === FULLSCREEN DESKTOP (kenarlarda boşluk yok + paneller %100) === */
@media (min-width: 980px){
  /* sayfa kenar boşluklarını kaldır */
  .container{
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  /* Header içeriği (Admin Panel + tel no + sekmeler) solda fazla yapışmasın;
     soldaki "Yönetim" başlığı ile aynı hizaya gelsin */
  header .hwrap{
    padding-left: 16px;
    padding-right: 16px;
  }
  header .navTabs{
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* ana içerik/panel alanı tam ekran gibi dursun */
  main.container.page{
    padding: 0 !important;
  }

  /* settings sayfalarında (Masalar/QR Kodlar vb.) panel yüksekliği %100 */
  .settingsWrap{
    padding: 0 !important;
  }
  .settingsShell{
    height: calc(100vh - 120px);
    min-height: calc(100vh - 120px);
  }

  /* sol taraftaki kartların soldan nefes alması */
  .settingsShell{
    padding-left: 16px;
    box-sizing: border-box;
  }
}

/* Büyük ekranlarda da çok ufak taşma olmasın */
@media (min-width: 980px){
  body{ overflow-x: hidden; }
}