/* ============================================================
   SADE CAFE — Yönetim paneli (Bootstrap 5 üzerine marka katmanı)
   ============================================================ */

:root {
  --s-ink:    #14110F;
  --s-ink-2:  #1C1815;
  --s-ink-3:  #262019;
  --s-cream:  #F4EFE6;
  --s-gold:   #C8A16B;
  --s-line:   rgba(244, 239, 230, .12);

  --bs-body-font-family: 'Jost', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --bs-body-bg: #F6F3EE;
  --bs-body-color: #2A241F;
  --bs-primary: #C8A16B;
  --bs-primary-rgb: 200, 161, 107;
  --bs-border-color: #E3DCD1;
  --bs-link-color: #9C7A3E;
  --bs-link-hover-color: #7E6231;
}

body {
  font-family: var(--bs-body-font-family);
  font-weight: 300;
  background: var(--bs-body-bg);
  font-size: 15px;
}

h1, h2, h3, h4, h5, h6 { font-weight: 400; letter-spacing: -.01em; }

/* ── Yerleşim ────────────────────────────────────────────── */
.layout { display: flex; min-height: 100vh; }

.side {
  width: 250px; flex-shrink: 0;
  background: var(--s-ink);
  color: var(--s-cream);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
}

.side__brand {
  padding: 24px 22px 20px;
  border-bottom: 1px solid var(--s-line);
  text-align: center;
}
.side__brand .word {
  display: block; font-size: 19px; font-weight: 300;
  letter-spacing: .32em; text-indent: .32em; margin-top: 8px;
}
.side__brand .sub {
  display: block; font-size: 8px; letter-spacing: .4em; text-indent: .4em;
  color: rgba(244,239,230,.5); margin-top: 4px;
}

.side__nav { padding: 14px 12px; flex: 1; }
.side__label {
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(244,239,230,.34);
  padding: 16px 10px 8px;
}
.side__link {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; margin-bottom: 2px;
  border-radius: 8px;
  color: rgba(244,239,230,.74);
  font-size: 14px; text-decoration: none;
  transition: background .2s, color .2s;
}
.side__link:hover { background: var(--s-ink-3); color: var(--s-cream); }
.side__link.is-active { background: var(--s-gold); color: var(--s-ink); font-weight: 400; }
.side__link i { font-size: 16px; width: 18px; text-align: center; }
.side__link .badge { margin-left: auto; }

.side__foot {
  padding: 14px 18px 20px;
  border-top: 1px solid var(--s-line);
  font-size: 12px;
  color: rgba(244,239,230,.5);
}
.side__foot a { color: var(--s-gold); text-decoration: none; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: #fff;
  border-bottom: 1px solid var(--bs-border-color);
  padding: 14px 26px;
  display: flex; align-items: center; gap: 16px;
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 20px; margin: 0; font-weight: 400; }
.topbar .spacer { flex: 1; }

.content { padding: 26px; flex: 1; }

/* Mobil */
.side__toggle { display: none; }
@media (max-width: 991px) {
  .side {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 1050;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.22,.61,.36,1);
    box-shadow: 0 0 40px rgba(0,0,0,.3);
  }
  body.side-open .side { transform: none; }
  body.side-open::after {
    content: ''; position: fixed; inset: 0; z-index: 1040;
    background: rgba(20,17,15,.5);
  }
  .side__toggle { display: inline-flex; }
  .content { padding: 18px 14px; }
  .topbar { padding: 12px 14px; }
}

/* ── Kartlar ─────────────────────────────────────────────── */
.card {
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20,17,15,.04);
}
.card-header {
  background: #fff;
  border-bottom: 1px solid var(--bs-border-color);
  font-weight: 400;
  padding: 15px 20px;
  border-radius: 12px 12px 0 0 !important;
}

.stat {
  background: #fff; border: 1px solid var(--bs-border-color);
  border-radius: 12px; padding: 20px;
  display: flex; align-items: center; gap: 16px;
}
.stat__icon {
  width: 46px; height: 46px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(200,161,107,.14); color: #9C7A3E;
  font-size: 20px;
}
.stat__num { font-size: 26px; line-height: 1; font-weight: 400; }
.stat__label { font-size: 12px; color: #8C8377; letter-spacing: .04em; }

/* ── Tablolar ────────────────────────────────────────────── */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: 12px 14px; vertical-align: middle; }
.table thead th {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #8C8377; font-weight: 400;
  border-bottom: 1px solid var(--bs-border-color);
  white-space: nowrap;
}
.table tbody tr { border-bottom: 1px solid #EFEAE2; }
.table tbody tr:last-child { border-bottom: 0; }
.table-hover tbody tr:hover { background: #FAF7F2; }

.thumb {
  width: 46px; height: 46px; border-radius: 8px;
  object-fit: cover; background: #EFEAE2;
}
.thumb--empty {
  display: grid; place-items: center; color: #C0B7A9; font-size: 18px;
}

.drag { cursor: grab; color: #C0B7A9; }
.drag:active { cursor: grabbing; }
tr.is-dragging { opacity: .4; }

/* ── Formlar ─────────────────────────────────────────────── */
.form-label {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: #8C8377; margin-bottom: 6px; font-weight: 400;
}
.form-control, .form-select {
  border-color: var(--bs-border-color);
  border-radius: 8px;
  padding: 10px 13px;
  font-weight: 300;
}
.form-control:focus, .form-select:focus {
  border-color: var(--s-gold);
  box-shadow: 0 0 0 .18rem rgba(200,161,107,.2);
}
.form-text { font-size: 12px; color: #9A9086; }

.form-check-input:checked { background-color: var(--s-gold); border-color: var(--s-gold); }
.form-switch .form-check-input:focus { box-shadow: 0 0 0 .18rem rgba(200,161,107,.2); }

.btn { border-radius: 8px; font-size: 14px; padding: 9px 18px; font-weight: 400; }
.btn-primary {
  background: var(--s-ink); border-color: var(--s-ink); color: var(--s-cream);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--s-ink-3); border-color: var(--s-ink-3); color: var(--s-cream);
}
.btn-gold { background: var(--s-gold); border-color: var(--s-gold); color: var(--s-ink); }
.btn-gold:hover { background: #B8905A; border-color: #B8905A; color: var(--s-ink); }
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* Etiket seçim kutuları */
.badge-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.badge-picker input { position: absolute; opacity: 0; pointer-events: none; }
.badge-picker label {
  padding: 7px 14px; border: 1px solid var(--bs-border-color);
  border-radius: 40px; font-size: 13px; cursor: pointer;
  transition: all .2s; background: #fff; user-select: none;
}
.badge-picker input:checked + label {
  background: var(--s-gold); border-color: var(--s-gold); color: var(--s-ink);
}
.badge-picker input:focus-visible + label { box-shadow: 0 0 0 .2rem rgba(200,161,107,.3); }

/* Görsel önizleme */
.img-drop {
  border: 1.5px dashed var(--bs-border-color);
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  background: #FCFAF7;
  transition: border-color .2s, background .2s;
}
.img-drop.is-over { border-color: var(--s-gold); background: rgba(200,161,107,.07); }
.img-drop img { max-height: 150px; border-radius: 8px; margin: 0 auto 12px; }

/* Bildirimler */
.alert { border: 0; border-left: 3px solid; border-radius: 8px; font-size: 14px; }
.alert-success { border-color: #4E8C5B; background: rgba(78,140,91,.1); color: #34613D; }
.alert-danger  { border-color: #B4564E; background: rgba(180,86,78,.1); color: #8C3F38; }
.alert-info    { border-color: var(--s-gold); background: rgba(200,161,107,.12); color: #7E6231; }

.badge.text-bg-gold { background: var(--s-gold); color: var(--s-ink); }

/* Giriş ekranı */
.login-page {
  min-height: 100vh;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 10%, rgba(200,161,107,.15), transparent 55%),
    linear-gradient(165deg, #1C1815, #14110F);
  padding: 24px;
}
.login-card {
  width: 100%; max-width: 400px;
  background: #fff; border-radius: 14px;
  padding: 40px 34px;
  box-shadow: 0 28px 70px rgba(0,0,0,.42);
}
.login-card .mark { color: var(--s-ink); margin: 0 auto 14px; }
.login-card .word {
  display: block; text-align: center; font-size: 22px; font-weight: 300;
  letter-spacing: .32em; text-indent: .32em;
}
.login-card .sub {
  display: block; text-align: center; font-size: 8.5px;
  letter-spacing: .42em; text-indent: .42em; color: #9A9086; margin: 5px 0 28px;
}

/* QR önizleme */
.qr-preview {
  background: #fff; padding: 22px; border-radius: 12px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--bs-border-color);
}
.qr-preview img, .qr-preview canvas { display: block; }

/* Yazdırılabilir masa kartı */
@media print {
  .side, .topbar, .no-print { display: none !important; }
  body { background: #fff; }
  .content { padding: 0; }
}