/* ============ TOKENS ============
   Tema: "adisyon-pos-app" referans uygulamasının beyaz + sıcak tema diline
   uyarlanmıştır. O uygulamada marka rengi olarak kullanılan yeşil tonları,
   burada turuncu tonlarla değiştirildi; diğer renkler (kağıt/beyaz zemin,
   mürekkep/metin tonları, altın/gold vurgu, tehlike kırmızısı, sınır rengi)
   referans uygulamadaki ile birebir aynı bırakıldı. */
:root{
  --paper:#EEF1EA;
  --surface:#FFFFFF;

  /* eski koyu temadan kalan değişken adları korunuyor (js/css genelinde
     kullanılıyor), fakat artık açık temaya uygun değerler taşıyorlar */
  --ink-950:#EEF1EA;   /* input / gömük yüzey zemini (kağıt tonu) */
  --ink-900:#FFFFFF;   /* kart / modal zemini */
  --ink-800:#FFFFFF;   /* kart üst gradyanı (düz beyaz) */
  --ink-700:#F1EDE3;   /* ikincil buton / mobil menü zemini */
  --ink-600:#E8E1D2;   /* ikincil buton hover */
  --ink-500:#B9AF9C;   /* orta ton kenarlık / hover vurgusu */
  --line:#DCE1D6;

  --text-hi:#1B221D;
  --text-mid:#62705F;
  --text-dim:#8B9186;

  /* marka rengi: turuncu (referans uygulamadaki yeşilin karşılığı) */
  --amber:#E2711D;
  --amber-hi:#C75E14;
  --amber-soft:#FBE3CB;

  /* durum renkleri (anlamları evrensel olduğu için korunuyor: yeşil=uygun/teslim, kırmızı=dolu/iptal) */
  --emerald:#2F9E5B;
  --emerald-bg:#E3F5EA;
  --rose:#A6303F;
  --rose-bg:#F5E1E3;
  --sky:#2D6FA6;
  --sky-bg:#E4F0F8;

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --shadow-card:0 1px 2px rgba(27,34,29,0.05), 0 10px 24px -14px rgba(27,34,29,0.18);
  --font-display:'Fraunces', serif;
  --font-body:'Manrope', system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
/* HTML'in `hidden` özelliği, .login-screen / .app gibi display:flex tanımlayan
   kurallar tarafından ezilmesin diye en yüksek öncelikle burada zorlanıyor. */
[hidden]{ display:none !important; }
body{
  margin:0;
  background:var(--paper);
  color:var(--text-hi);
  font-family:var(--font-body);
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
h1,h2,h3,h4{font-family:var(--font-display); margin:0;}
button{font-family:inherit;}
input,select,textarea{font-family:inherit;}
::selection{background:var(--amber-soft); color:var(--amber-hi);}

/* ============ LOGIN ============ */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.login-card{
  width:100%; max-width:380px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:36px 30px;
  box-shadow:var(--shadow-card);
}
.login-brand{ text-align:center; margin-bottom:28px;}
.login-brand-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:14px; margin-bottom:14px;
  background:var(--amber);
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:15px;
}
.login-brand h1{ font-size:24px; letter-spacing:-0.01em; }
.login-brand p{ margin:4px 0 0; color:var(--text-dim); font-size:13px; letter-spacing:.06em; text-transform:uppercase;}
.login-form{ display:flex; flex-direction:column; gap:16px; }
.login-form label{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--text-mid);}
.login-form input{
  background:var(--paper); border:1px solid var(--line); color:var(--text-hi);
  border-radius:var(--radius-sm); padding:13px 14px; font-size:16px; outline:none;
  transition:border-color .15s, background .15s;
}
.login-form input:focus{ border-color:var(--amber); background:var(--surface); }
.login-error{ color:var(--rose); font-size:13px; text-align:center; margin:0;}

/* ============ BUTTONS ============ */
.btn{
  appearance:none; border:none; cursor:pointer; border-radius:var(--radius-sm);
  padding:12px 18px; font-size:14.5px; font-weight:600; display:inline-flex; align-items:center;
  justify-content:center; gap:8px; transition:transform .08s ease, opacity .15s, background .15s;
  white-space:nowrap; user-select:none;
}
.btn:active{ transform:scale(0.97); }
.btn-block{ width:100%; }
.btn-sm{ padding:8px 12px; font-size:13px; border-radius:8px;}
.btn-lg{ padding:16px 22px; font-size:16px; }
.btn-primary{ background:var(--amber); color:#fff;}
.btn-primary:hover{ background:var(--amber-hi); }
.btn-secondary{ background:var(--ink-700); color:var(--text-hi); border:1px solid var(--line);}
.btn-secondary:hover{ background:var(--ink-600); }
.btn-ghost{ background:transparent; color:var(--text-mid); border:1px solid var(--line);}
.btn-ghost:hover{ color:var(--text-hi); border-color:var(--ink-500);}
.btn-danger{ background:var(--rose-bg); color:var(--rose); border:1px solid #e3c1c7;}
.btn-danger:hover{ background:#f0d2d6; }
.btn-success{ background:var(--emerald-bg); color:var(--emerald); border:1px solid #c7e9d3;}
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none;}
.icon-btn{
  width:38px; height:38px; border-radius:10px; background:var(--ink-700); border:1px solid var(--line);
  color:var(--text-hi); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px;
}

/* ============ APP SHELL ============ */
.app{ min-height:100vh; display:flex; flex-direction:column; }
.topbar{
  display:flex; align-items:center; gap:24px; padding:14px 24px;
  border-bottom:1px solid var(--line); background:rgba(255,255,255,0.9); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:20;
}
.topbar-brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:var(--amber); color:#fff; font-family:var(--font-display);
  font-weight:700; font-size:12px;
}
.brand-name{ font-family:var(--font-display); font-weight:600; font-size:16px; letter-spacing:-.01em;}
.tab-nav{ display:flex; gap:4px; flex:1; }
.tab-btn{
  background:transparent; border:none; color:var(--text-mid); padding:10px 16px; border-radius:10px;
  font-weight:600; font-size:14px; cursor:pointer; transition:.15s;
}
.tab-btn:hover{ color:var(--text-hi); background:var(--paper); }
.tab-btn.active{ color:#fff; background:var(--amber); }
.topbar-user{ display:flex; align-items:center; gap:12px; }
.user-name{ color:var(--text-mid); font-size:13.5px; font-weight:500; }

.tab-nav-mobile{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:30;
  background:rgba(255,255,255,0.95); backdrop-filter:blur(12px); border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.tab-btn-m{
  background:transparent; border:none; color:var(--text-dim); flex-direction:column; gap:2px;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600;
  padding:8px 4px; border-radius:10px; cursor:pointer; flex:1;
}
.tab-btn-m .ic{ font-size:19px; }
.tab-btn-m.active{ color:var(--amber); }

.main{ flex:1; padding:22px 24px 40px; max-width:1400px; width:100%; margin:0 auto; }
.tab-panel{ animation:fadein .18s ease; }
@keyframes fadein{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

/* ============ PANEL HEADER ============ */
.panel-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:12px;}
.panel-header h2{ font-size:20px; }
.panel-sub{ color:var(--text-dim); font-size:13px; margin-top:2px; }

/* ============ CARDS / GRID ============ */
.grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); }
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:16px; box-shadow:var(--shadow-card); cursor:pointer;
  transition:border-color .15s, transform .08s, box-shadow .15s;
}
.card:hover{ border-color:var(--amber); box-shadow:0 6px 20px -10px rgba(27,34,29,0.22); }
.card:active{ transform:scale(0.985); }

/* table card */
.table-card{ display:flex; flex-direction:column; gap:10px; min-height:120px; }
.table-card-top{ display:flex; align-items:center; justify-content:space-between; }
.table-card-name{ font-family:var(--font-display); font-weight:700; font-size:17px; }
.status-dot{ width:10px; height:10px; border-radius:50%; }
.status-dot.empty{ background:var(--emerald); box-shadow:0 0 0 4px var(--emerald-bg); }
.status-dot.occupied{ background:var(--rose); box-shadow:0 0 0 4px var(--rose-bg); }
.table-card-total{ font-family:var(--font-display); font-size:22px; font-weight:700; }
.table-card-badge{
  align-self:flex-start; font-size:11px; font-weight:700; padding:4px 9px; border-radius:20px; letter-spacing:.03em;
}
.badge-empty{ background:var(--emerald-bg); color:var(--emerald); }
.badge-occupied{ background:var(--rose-bg); color:var(--rose); }

.add-table-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:120px;
  border:1.5px dashed var(--ink-500); color:var(--text-dim); background:transparent;
}
.add-table-card:hover{ color:var(--amber); border-color:var(--amber); }
.add-table-card .plus{ font-size:26px; }

/* ============ ORDERS TAB ============ */
.order-ticket{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:16px; box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:10px;
}
.order-ticket.delivered{ opacity:.6; }
.order-ticket-top{ display:flex; align-items:center; justify-content:space-between; }
.order-ticket-table{ font-family:var(--font-display); font-weight:700; font-size:16px; }
.order-ticket-time{ font-size:12px; color:var(--text-dim); }
.order-ticket-body{ display:flex; flex-direction:column; gap:4px; }
.order-ticket-product{ font-size:15px; font-weight:600; }
.order-ticket-meta{ font-size:12.5px; color:var(--text-mid); }
.order-ticket-note{ font-size:12.5px; color:var(--amber-hi); background:var(--amber-soft); padding:6px 10px; border-radius:8px; }
.order-ticket-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.order-ticket-price{ font-weight:700; }
.order-ticket-waiter{ font-size:12px; color:var(--text-dim); }

/* ============ TABLE DETAIL / SIDE PANEL ============ */
.detail-layout{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:18px; align-items:start; }
@media (max-width:980px){ .detail-layout{ grid-template-columns:1fr; } }
.panel-box{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:18px; box-shadow:var(--shadow-card);
}
.line-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0;
  border-bottom:1px solid var(--line);
}
.line-item:last-child{ border-bottom:none; }
.line-item-main{ display:flex; flex-direction:column; gap:2px; }
.line-item-title{ font-weight:600; font-size:14.5px; }
.line-item-sub{ font-size:12px; color:var(--text-dim); }
.line-item-price{ font-weight:700; font-size:14.5px; }
.pill{ font-size:11px; font-weight:700; padding:3px 8px; border-radius:20px; }
.pill-sent{ background:var(--sky-bg); color:var(--sky); }
.pill-delivered{ background:var(--emerald-bg); color:var(--emerald); }
.pill-cancelled{ background:var(--rose-bg); color:var(--rose); text-decoration:line-through; }

.section-label{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); font-weight:700; margin:0 0 10px; }
.total-row{ display:flex; justify-content:space-between; align-items:baseline; padding-top:14px; margin-top:6px; border-top:1px solid var(--line);}
.total-row .amount{ font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--amber-hi); }

.product-pick-category{ margin-bottom:18px; }
.product-pick-category:last-child{ margin-bottom:0; }
.product-pick{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border:1px solid var(--line);
  border-radius:12px; margin-bottom:8px; cursor:pointer; background:var(--surface);
}
.product-pick:hover{ border-color:var(--amber); }
.product-pick-name{ font-weight:600; font-size:14.5px; }
.product-pick-desc{ font-size:12px; color:var(--text-dim); margin-top:2px; }
.product-pick-price{ font-weight:700; color:var(--amber-hi); white-space:nowrap; }

/* ============ MODAL ============ */
.modal-overlay{
  position:fixed; inset:0; background:rgba(27,34,29,0.45); backdrop-filter:blur(3px);
  display:flex; align-items:flex-end; justify-content:center; z-index:100; animation:fadein .15s ease;
}
@media (min-width:720px){ .modal-overlay{ align-items:center; } }
.modal{
  background:var(--surface); border:1px solid var(--line); width:100%; max-width:520px; max-height:92vh;
  overflow-y:auto; border-radius:20px 20px 0 0; padding:22px; box-shadow:0 -8px 40px rgba(27,34,29,.2);
}
@media (min-width:720px){ .modal{ border-radius:var(--radius-lg); box-shadow:0 24px 60px rgba(27,34,29,.22); } }
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.modal-head h3{ font-size:18px; }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label{ font-size:12.5px; color:var(--text-mid); font-weight:600; }
.field input, .field textarea, .field select{
  background:var(--ink-950); border:1px solid var(--line); color:var(--text-hi); border-radius:10px;
  padding:11px 13px; font-size:15px; outline:none; width:100%; resize:vertical;
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--amber); background:var(--surface); }
.modal-actions{ display:flex; gap:10px; margin-top:18px; }
.modal-actions .btn{ flex:1; }

.option-group{ margin-bottom:14px; }
.option-choices{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  padding:8px 14px; border-radius:20px; border:1px solid var(--line); background:var(--surface); color:var(--text-mid);
  font-size:13px; font-weight:600; cursor:pointer; transition:.12s;
}
.chip.selected{ background:var(--amber); color:#fff; border-color:var(--amber); }

.stepper{ display:flex; align-items:center; gap:14px; justify-content:center; padding:6px 0; }
.stepper button{
  width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--text-hi);
  font-size:20px; cursor:pointer;
}
.stepper span{ font-family:var(--font-display); font-size:22px; font-weight:700; min-width:32px; text-align:center; }

.radio-row{ display:flex; flex-direction:column; gap:8px; }
.radio-opt{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:12px;
  cursor:pointer; background:var(--surface);
}
.radio-opt.selected{ border-color:var(--amber); background:var(--amber-soft); }
.radio-opt input{ accent-color:var(--amber); width:16px; height:16px;}

.method-toggle{ display:flex; gap:10px; }
.method-btn{
  flex:1; padding:14px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--text-mid);
  font-weight:700; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px;
}
.method-btn.selected{ border-color:var(--amber); background:var(--amber-soft); color:var(--amber-hi); }

.pay-line{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.pay-line:last-child{ border-bottom:none; }
.pay-line-check{ width:20px; height:20px; accent-color:var(--amber); }
.pay-line-info{ flex:1; }
.pay-line-name{ font-weight:600; font-size:14px; }
.pay-line-sub{ font-size:11.5px; color:var(--text-dim); }
.mini-stepper{ display:flex; align-items:center; gap:6px; }
.mini-stepper button{ width:26px; height:26px; border-radius:7px; border:1px solid var(--line); background:var(--ink-700); color:var(--text-hi); cursor:pointer; }
.mini-stepper span{ min-width:20px; text-align:center; font-weight:700; font-size:13px; }

/* ============ TOAST ============ */
.toast-root{ position:fixed; top:16px; right:16px; z-index:200; display:flex; flex-direction:column; gap:10px; }
.toast{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--amber); color:var(--text-hi);
  padding:12px 16px; border-radius:10px; font-size:13.5px; box-shadow:var(--shadow-card); animation:fadein .15s ease;
  max-width:320px;
}
.toast.success{ border-left-color:var(--emerald); }
.toast.error{ border-left-color:var(--rose); }

/* ============ EMPTY STATES ============ */
.empty-state{ text-align:center; padding:60px 20px; color:var(--text-dim); }
.empty-state .icon{ font-size:36px; margin-bottom:10px; }

/* ============ DAY-END ============ */
.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:20px; }
.stat-box{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px; }
.stat-box .label{ font-size:12px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; font-weight:700;}
.stat-box .value{ font-family:var(--font-display); font-size:24px; font-weight:700; margin-top:6px; }
table.data-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.data-table th{ text-align:left; color:var(--text-dim); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; padding:10px 12px; border-bottom:1px solid var(--line); }
table.data-table td{ padding:11px 12px; border-bottom:1px solid var(--line); }
table.data-table tr:last-child td{ border-bottom:none; }
.table-wrap{ overflow-x:auto; }
.date-picker-row{ display:flex; align-items:center; gap:10px; }
.date-picker-row input{
  background:var(--ink-950); border:1px solid var(--line); color:var(--text-hi); border-radius:10px; padding:10px 12px; font-size:14px;
}

/* ============ RESPONSIVE ============ */
@media (max-width:860px){
  .topbar{ padding:12px 16px; }
  .tab-nav{ display:none; }
  .tab-nav-mobile{ display:flex; }
  .main{ padding:16px 14px 100px; }
  .detail-layout{ gap:14px; }
}
@media (min-width:861px){
  .tab-nav-mobile{ display:none; }
}

/* touch target comfort on tablet */
@media (pointer:coarse){
  .btn{ padding:14px 18px; }
  .chip{ padding:10px 16px; }
}

/* scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--ink-600); border-radius:10px; }
::-webkit-scrollbar-track{ background:transparent; }