/* ============================================================
   SmartDine — Structure Tech tasarım sistemi
   Beyaz ağırlıklı, hassas çizgili (hairline), tek vurgu renkli
   kurumsal arayüz. Tüm kaynaklar lokaldir (CSP: default-src 'self').
   ============================================================ */

:root {
    /* Renk belirteçleri */
    --sd-bg: #f7f8fa;
    --sd-surface: #ffffff;
    --sd-ink: #0f172a;
    --sd-ink-2: #334155;
    --sd-muted: #64748b;
    --sd-faint: #94a3b8;
    --sd-border: #e7eaf0;
    --sd-border-strong: #d8dee8;

    /* Pastel mavi ana vurgu */
    --sd-accent: #7aa5dc;
    --sd-accent-ink: #4d7fbe;
    --sd-accent-deep: #3f6ba6;
    --sd-accent-soft: #ecf3fb;
    --sd-accent-softer: #f6f9fd;

    /* Structure Tech bordosu — ikincil marka vurgusu */
    --sd-wine: #822639;
    --sd-wine-ink: #6a1f2f;
    --sd-wine-soft: #f8edf0;

    --sd-success: #16794c;
    --sd-success-soft: #e5f6ec;
    --sd-danger: #c2333d;
    --sd-danger-soft: #fdecec;
    --sd-warning: #96660a;
    --sd-warning-soft: #fdf3df;
    --sd-info: #176a9c;
    --sd-info-soft: #e4f2fb;
    --sd-neutral-soft: #eef1f5;

    /* Geometri */
    --sd-radius: 12px;
    --sd-radius-sm: 8px;
    --sd-sidebar-w: 264px;
    --sd-topbar-h: 60px;

    /* Derinlik */
    --sd-shadow-1: 0 1px 2px rgba(15, 23, 42, .05);
    --sd-shadow-2: 0 4px 16px rgba(15, 23, 42, .07);
    --sd-shadow-3: 0 12px 40px rgba(15, 23, 42, .12);

    --sd-ring: 0 0 0 3px rgba(122, 165, 220, .28);
}

/* ---------- Taban ---------- */

html {
    font-size: 15px;
    height: 100%;
}

body {
    background: var(--sd-bg);
    color: var(--sd-ink);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100%;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--sd-ink);
    letter-spacing: -0.01em;
}

a {
    color: var(--sd-accent);
    text-decoration: none;
}

a:hover {
    color: var(--sd-accent-ink);
}

code {
    background: var(--sd-neutral-soft);
    border-radius: 6px;
    padding: 2px 6px;
    color: var(--sd-ink-2);
}

.text-muted {
    color: var(--sd-muted) !important;
}

::selection {
    background: rgba(122, 165, 220, .25);
}

/* ---------- Uygulama kabuğu (yönetim) ---------- */

.sd-shell {
    min-height: 100vh;
}

.sd-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
}

@media (min-width: 992px) {
    .sd-main {
        margin-left: var(--sd-sidebar-w);
    }
}

.sd-content {
    flex: 1 1 auto;
    width: 100%;
    max-width: 1440px;
    padding: 26px clamp(16px, 3vw, 36px) 48px;
}

.sd-footer {
    border-top: 1px solid var(--sd-border);
    color: var(--sd-faint);
    font-size: .8rem;
    padding: 14px clamp(16px, 3vw, 36px);
    background: var(--sd-surface);
}

/* ---------- Kenar çubuğu ---------- */

.sd-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sd-sidebar-w);
    background: var(--sd-surface);
    border-right: 1px solid var(--sd-border);
    display: flex;
    flex-direction: column;
    z-index: 1045;
    transform: translateX(-100%);
    transition: transform .22s ease;
}

@media (min-width: 992px) {
    .sd-sidebar {
        transform: none;
    }
}

body.sd-nav-open .sd-sidebar {
    transform: none;
    box-shadow: var(--sd-shadow-3);
}

.sd-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .35);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
}

body.sd-nav-open .sd-backdrop {
    opacity: 1;
    pointer-events: auto;
}

@media (min-width: 992px) {
    .sd-backdrop {
        display: none;
    }
}

.sd-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--sd-border);
    color: var(--sd-ink);
}

.sd-brand:hover {
    color: var(--sd-ink);
}

.sd-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #93304a 0%, var(--sd-wine-ink) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-shadow: var(--sd-shadow-1);
}

.sd-brand-name {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.sd-brand-tag {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    color: var(--sd-wine);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sd-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 12px 20px;
}

.sd-nav-group-label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sd-faint);
    padding: 18px 10px 6px;
}

.sd-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin: 1px 0;
    border-radius: var(--sd-radius-sm);
    color: var(--sd-ink-2);
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.2;
}

.sd-nav-link .sd-icon {
    color: var(--sd-faint);
    flex: 0 0 auto;
}

.sd-nav-link:hover {
    background: #f3f5f9;
    color: var(--sd-ink);
}

.sd-nav-link:hover .sd-icon {
    color: var(--sd-muted);
}

.sd-nav-link.active {
    background: var(--sd-accent-soft);
    color: var(--sd-accent-ink);
    font-weight: 600;
}

.sd-nav-link.active .sd-icon {
    color: var(--sd-accent);
}

.sd-sidebar-foot {
    border-top: 1px solid var(--sd-border);
    padding: 12px 20px;
    font-size: .72rem;
    color: var(--sd-faint);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ---------- Üst çubuk ---------- */

.sd-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--sd-topbar-h);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--sd-border);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 clamp(16px, 3vw, 36px);
}

.sd-topbar-title {
    font-size: .95rem;
    font-weight: 600;
    color: var(--sd-ink);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--sd-radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--sd-muted);
    padding: 0;
}

.sd-icon-btn:hover {
    background: var(--sd-neutral-soft);
    color: var(--sd-ink);
}

.sd-seg {
    display: inline-flex;
    align-items: center;
    background: var(--sd-neutral-soft);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.sd-seg a {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--sd-muted);
}

.sd-seg a:hover {
    color: var(--sd-ink);
}

.sd-seg a.active {
    background: var(--sd-surface);
    color: var(--sd-ink);
    box-shadow: var(--sd-shadow-1);
}

.sd-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 260px;
}

.sd-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sd-accent-soft);
    color: var(--sd-accent-ink);
    font-size: .78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.sd-user-name {
    font-size: .82rem;
    font-weight: 500;
    color: var(--sd-ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Sayfa başlığı ---------- */

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.page-title {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

.page-subtitle {
    color: var(--sd-muted);
    font-size: .88rem;
    margin: 4px 0 0;
    max-width: 70ch;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.count-chip {
    display: inline-block;
    background: var(--sd-neutral-soft);
    color: var(--sd-muted);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    padding: 2px 10px;
    vertical-align: 3px;
    margin-left: 8px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .95rem;
    font-weight: 650;
    margin-bottom: 12px;
}

.section-title::before {
    content: "";
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--sd-wine);
    display: inline-block;
}

/* ---------- Kartlar ---------- */

.card {
    background: var(--sd-surface);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow-1);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--sd-border);
    font-weight: 600;
    font-size: .9rem;
    color: var(--sd-ink);
    padding: .8rem 1.1rem;
    border-top-left-radius: var(--sd-radius) !important;
    border-top-right-radius: var(--sd-radius) !important;
}

.card-body {
    padding: 1.1rem;
}

.sd-card-flat {
    box-shadow: none;
}

/* ---------- Tablolar ---------- */

.sd-table-card {
    overflow: hidden;
}

.table {
    color: var(--sd-ink);
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    padding: .72rem 1rem;
    border-bottom-color: var(--sd-border);
    background-color: transparent;
}

.table thead th {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sd-muted);
    background: #fbfcfe;
    border-bottom: 1px solid var(--sd-border);
    white-space: nowrap;
}

.table tbody tr:last-child > * {
    border-bottom: 0;
}

.table-hover tbody tr:hover > * {
    background-color: #f8fafd;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent;
    box-shadow: none;
}

.table .table-danger,
.table .table-danger > * {
    background-color: var(--sd-danger-soft) !important;
    --bs-table-accent-bg: transparent;
}

td.sd-num, th.sd-num {
    font-variant-numeric: tabular-nums;
}

.row-actions {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ---------- Rozetler (yumuşak tonlar) ---------- */

.badge {
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .01em;
    padding: .32em .62em;
    border-radius: 999px;
}

.badge.bg-success { background-color: var(--sd-success-soft) !important; color: var(--sd-success) !important; }
.badge.bg-danger { background-color: var(--sd-danger-soft) !important; color: var(--sd-danger) !important; }
.badge.bg-warning { background-color: var(--sd-warning-soft) !important; color: var(--sd-warning) !important; }
.badge.bg-info { background-color: var(--sd-info-soft) !important; color: var(--sd-info) !important; }
.badge.bg-primary { background-color: var(--sd-accent-soft) !important; color: var(--sd-accent-ink) !important; }
.badge.bg-secondary { background-color: var(--sd-neutral-soft) !important; color: var(--sd-muted) !important; }
.badge.bg-light { background-color: var(--sd-surface) !important; color: var(--sd-muted) !important; border: 1px solid var(--sd-border); }
.badge.bg-dark { background-color: var(--sd-ink) !important; color: #fff !important; }

/* ---------- Butonlar ---------- */

.btn {
    border-radius: var(--sd-radius-sm);
    font-weight: 600;
    font-size: .88rem;
    padding: .48rem 1rem;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.btn-sm {
    font-size: .78rem;
    padding: .3rem .7rem;
}

.btn-lg {
    font-size: 1rem;
    padding: .7rem 1.4rem;
}

.btn .sd-icon {
    vertical-align: -3px;
    margin-right: 4px;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: var(--sd-ring);
}

.btn-primary {
    background-color: var(--sd-accent);
    border-color: var(--sd-accent);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--sd-accent-ink) !important;
    border-color: var(--sd-accent-ink) !important;
}

.btn-outline-secondary, .btn-light {
    color: var(--sd-ink-2);
    background: var(--sd-surface);
    border-color: var(--sd-border-strong);
}

.btn-outline-secondary:hover, .btn-light:hover {
    background: var(--sd-neutral-soft);
    border-color: var(--sd-border-strong);
    color: var(--sd-ink);
}

.btn-success {
    background-color: #2f9e6d;
    border-color: #2f9e6d;
}

.btn-success:hover, .btn-success:focus {
    background-color: #268257 !important;
    border-color: #268257 !important;
}

/* Yumuşak (tonlu) aksiyon butonları — satır içi işlemler için */
.btn-soft-accent, .btn-soft-danger, .btn-soft-neutral,
.btn-soft-success, .btn-soft-warning, .btn-soft-info {
    border: 1px solid transparent;
}

.btn-soft-accent { background: var(--sd-accent-soft); color: var(--sd-accent-ink); }
.btn-soft-accent:hover { background: #dfe9ff; color: var(--sd-accent-ink); }
.btn-soft-danger { background: var(--sd-danger-soft); color: var(--sd-danger); }
.btn-soft-danger:hover { background: #fbdcdc; color: var(--sd-danger); }
.btn-soft-neutral { background: var(--sd-neutral-soft); color: var(--sd-ink-2); }
.btn-soft-neutral:hover { background: #e2e7ee; color: var(--sd-ink); }
.btn-soft-success { background: var(--sd-success-soft); color: var(--sd-success); }
.btn-soft-success:hover { background: #d4efdf; color: var(--sd-success); }
.btn-soft-warning { background: var(--sd-warning-soft); color: var(--sd-warning); }
.btn-soft-warning:hover { background: #fae9c6; color: var(--sd-warning); }
.btn-soft-info { background: var(--sd-info-soft); color: var(--sd-info); }
.btn-soft-info:hover { background: #d2e9f8; color: var(--sd-info); }

/* ---------- Formlar ---------- */

.form-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--sd-ink-2);
    margin-bottom: .35rem;
}

.form-control, .form-select {
    border-color: var(--sd-border-strong);
    border-radius: var(--sd-radius-sm);
    color: var(--sd-ink);
    padding: .48rem .8rem;
    font-size: .9rem;
    background-color: var(--sd-surface);
}

.form-control::placeholder {
    color: var(--sd-faint);
}

.form-control:focus, .form-select:focus {
    border-color: var(--sd-accent);
}

.form-check-input {
    border-color: var(--sd-border-strong);
}

.form-check-input:checked {
    background-color: var(--sd-accent);
    border-color: var(--sd-accent);
}

.form-text, .form-hint {
    color: var(--sd-faint);
    font-size: .78rem;
}

fieldset.sd-option-group {
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius-sm);
    background: #fafbfd;
    padding: .55rem .75rem .35rem;
    margin-bottom: .6rem;
}

fieldset.sd-option-group legend {
    font-size: .74rem;
    font-weight: 650;
    color: var(--sd-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    float: none;
    width: auto;
    padding: 0 4px;
    margin-bottom: .2rem;
}

.form-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 18px;
    margin-top: 6px;
    border-top: 1px solid var(--sd-border);
}

/* ---------- Uyarılar ---------- */

.alert {
    border-radius: var(--sd-radius);
    border: 1px solid transparent;
    font-size: .9rem;
    padding: .85rem 1.1rem;
}

.alert-success { background: var(--sd-success-soft); color: var(--sd-success); border-color: #cdebda; }
.alert-danger { background: var(--sd-danger-soft); color: var(--sd-danger); border-color: #f6d4d4; }
.alert-warning { background: var(--sd-warning-soft); color: var(--sd-warning); border-color: #f3e3bb; }
.alert-info { background: var(--sd-info-soft); color: var(--sd-info); border-color: #cfe7f6; }
.alert-secondary { background: var(--sd-neutral-soft); color: var(--sd-ink-2); border-color: var(--sd-border); }

/* ---------- Boş durumlar ---------- */

.empty-state {
    background: var(--sd-surface);
    border: 1px dashed var(--sd-border-strong);
    border-radius: var(--sd-radius);
    padding: 44px 24px;
    text-align: center;
}

.empty-state-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--sd-accent-soft);
    color: var(--sd-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-text {
    color: var(--sd-muted);
    font-size: .92rem;
    margin: 0 auto;
    max-width: 46ch;
}

.empty-state .btn {
    margin-top: 16px;
}

.empty-state-sm {
    padding: 22px 16px;
}

.empty-state-sm .empty-state-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
}

/* ---------- İstatistik kartları ---------- */

.stat-card {
    position: relative;
    overflow: hidden;
    background: var(--sd-surface);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow-1);
    padding: 16px 18px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: box-shadow .15s ease, transform .15s ease;
}

.stat-card:hover {
    box-shadow: var(--sd-shadow-2);
}

.stat-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--sd-accent) 0%, #a8c6ea 100%);
}

.stat-card.is-wine::before {
    background: linear-gradient(180deg, var(--sd-wine) 0%, #b06376 100%);
}

.stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--sd-accent-soft);
    color: var(--sd-accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.stat-card.is-wine .stat-icon {
    background: var(--sd-wine-soft);
    color: var(--sd-wine);
}

.stat-icon .sd-icon {
    width: 21px;
    height: 21px;
}

.stat-label {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sd-muted);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-value {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

/* ---------- Yatay çubuk grafik (Raporlar) ---------- */

.bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.bar-row-label {
    width: 52px;
    color: var(--sd-muted);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.bar-row-track {
    flex: 1 1 auto;
    background: var(--sd-neutral-soft);
    border-radius: 6px;
    height: 16px;
    overflow: hidden;
}

.bar-row-fill {
    background: linear-gradient(90deg, var(--sd-accent) 0%, #aac7eb 100%);
    border-radius: 6px;
    height: 100%;
    min-width: 2px;
    transition: width .3s ease;
}

.bar-row-fill.is-peak {
    background: linear-gradient(90deg, var(--sd-wine) 0%, #a5556a 100%);
}

.bar-row-value {
    width: 112px;
    text-align: right;
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

.bar-row.is-peak .bar-row-label,
.bar-row.is-peak .bar-row-value {
    color: var(--sd-wine);
    font-weight: 700;
}

/* Tablo içi mini pay çubuğu (ödeme kırılımı) */
.share-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    width: 100%;
}

.share-track {
    width: 64px;
    height: 6px;
    border-radius: 4px;
    background: var(--sd-neutral-soft);
    overflow: hidden;
}

.share-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--sd-accent) 0%, #aac7eb 100%);
    min-width: 2px;
}

/* Sıralama rozeti (en çok satanlar) */
.rank-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: .7rem;
    font-weight: 700;
    margin-right: 8px;
    background: var(--sd-accent-soft);
    color: var(--sd-accent-ink);
    vertical-align: 1px;
}

.rank-chip.is-first {
    background: linear-gradient(135deg, #93304a 0%, var(--sd-wine-ink) 100%);
    color: #fff;
}

/* ---------- Mutfak panosu (kanban) ---------- */

.kanban-col {
    background: #f2f4f8;
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    padding: 12px;
    height: 100%;
}

.kanban-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .82rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sd-ink-2);
    padding: 2px 6px 10px;
}

.kanban-count {
    background: var(--sd-surface);
    border: 1px solid var(--sd-border);
    color: var(--sd-wine);
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    padding: 1px 9px;
}

.order-card {
    background: var(--sd-surface);
    border: 1px solid var(--sd-border);
    border-left: 3px solid var(--sd-faint);
    border-radius: var(--sd-radius-sm);
    box-shadow: var(--sd-shadow-1);
    padding: 10px 12px;
    margin-bottom: 10px;
}

.order-card.is-submitted { border-left-color: var(--sd-accent); }
.order-card.is-preparing { border-left-color: #d99e0b; }
.order-card.is-ready { border-left-color: #159957; }

.order-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.order-code {
    font-weight: 700;
    font-size: .88rem;
    font-variant-numeric: tabular-nums;
}

.order-table {
    color: var(--sd-muted);
    font-size: .8rem;
    font-weight: 600;
}

.order-items {
    list-style: none;
    padding: 0;
    margin: 0 0 6px;
    font-size: .84rem;
}

.order-items li {
    padding: 2px 0;
}

.order-note {
    display: block;
    background: var(--sd-warning-soft);
    color: var(--sd-warning);
    border-radius: 6px;
    font-size: .78rem;
    padding: 3px 8px;
    margin: 4px 0;
}

.order-time {
    color: var(--sd-faint);
    font-size: .76rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ---------- Salon planı (POS) ---------- */

.floor-legend {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: .78rem;
    color: var(--sd-muted);
}

.floor-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}

.dot-empty { background: #cbd5e1; }
.dot-occupied { background: var(--sd-accent); }
.dot-orders { background: #e0ab00; }
.dot-payment { background: var(--sd-wine); }
.dot-ready { background: #2fa872; }

.floor-zone-label {
    font-size: .74rem;
    font-weight: 650;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sd-wine);
    margin: 18px 0 10px;
}

.floor-tile {
    background: var(--sd-surface);
    border: 1px solid var(--sd-border);
    border-top: 3px solid #cbd5e1;
    border-radius: var(--sd-radius-sm);
    box-shadow: var(--sd-shadow-1);
    padding: 12px 10px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: box-shadow .15s ease, transform .15s ease;
}

.floor-tile:hover {
    box-shadow: var(--sd-shadow-2);
}

.floor-tile.is-occupied { border-top-color: var(--sd-accent); }
.floor-tile.is-orders { border-top-color: #e0ab00; }
.floor-tile.is-payment { border-top-color: var(--sd-wine); }

.floor-tile-name {
    font-weight: 700;
    font-size: .95rem;
}

.floor-tile-status {
    font-size: .74rem;
    color: var(--sd-muted);
}

.floor-tile-meta {
    font-size: .76rem;
    color: var(--sd-ink-2);
    font-variant-numeric: tabular-nums;
}

.floor-tile .btn {
    margin-top: auto;
}

/* ---------- Liste grupları ---------- */

.list-group {
    border-radius: var(--sd-radius);
}

.list-group-item {
    border-color: var(--sd-border);
    padding: .8rem 1rem;
}

.list-group-item-action:hover {
    background: #f8fafd;
}

/* ---------- Müşteri (QR) kabuğu ---------- */

.sdc-body {
    background: var(--sd-bg);
}

.sdc-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--sd-border);
    padding: 10px clamp(14px, 4vw, 24px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sdc-main {
    max-width: 860px;
    margin: 0 auto;
    padding: 18px clamp(14px, 4vw, 24px) 96px;
}

.sdc-table-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #93304a 0%, var(--sd-wine-ink) 100%);
    color: #fff;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 650;
    padding: 4px 12px;
    white-space: nowrap;
}

.sdc-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--sd-border);
    display: flex;
    justify-content: space-around;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}

.sdc-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 72px;
    padding: 6px 10px;
    border-radius: var(--sd-radius-sm);
    color: var(--sd-muted);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.sdc-tab:hover {
    color: var(--sd-ink);
    background: var(--sd-neutral-soft);
}

.sdc-tab.active {
    color: var(--sd-accent-ink);
    background: var(--sd-accent-soft);
}

.sdc-tab-badge {
    position: absolute;
    top: 0;
    right: 12px;
    background: var(--sd-wine);
    color: #fff;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 700;
    min-width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.sdc-category {
    margin-bottom: 30px;
}

.sdc-category-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.sdc-category-title::before {
    content: "";
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--sd-wine);
}

.sdc-category-desc {
    color: var(--sd-muted);
    font-size: .84rem;
    margin: 0 0 14px;
}

.product-card {
    background: var(--sd-surface);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow-1);
    padding: 14px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.product-img {
    width: 68px;
    height: 68px;
    border-radius: 10px;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid var(--sd-border);
}

.product-name {
    font-size: .95rem;
    font-weight: 650;
    margin: 0 0 3px;
}

.product-desc {
    color: var(--sd-muted);
    font-size: .82rem;
    margin: 0;
}

.product-price {
    text-align: right;
    margin-left: auto;
    white-space: nowrap;
}

.price-now {
    font-weight: 700;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
}

.price-old {
    display: block;
    color: var(--sd-faint);
    font-size: .76rem;
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

.price-now.is-discounted {
    color: var(--sd-wine);
}

.product-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--sd-faint);
    font-size: .76rem;
}

.allergen-note {
    background: var(--sd-danger-soft);
    color: var(--sd-danger);
    border-radius: 6px;
    font-size: .76rem;
    padding: 4px 8px;
}

.call-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
}

.call-chip {
    background: var(--sd-surface);
    border: 1px solid var(--sd-border-strong);
    border-radius: 999px;
    color: var(--sd-ink-2);
    font-size: .8rem;
    font-weight: 600;
    padding: 6px 14px;
}

.call-chip:hover {
    border-color: var(--sd-accent);
    color: var(--sd-accent-ink);
    background: var(--sd-accent-softer);
}

/* ---------- Segment sekmeler (ödeme modları) ---------- */

.sd-tabs {
    display: flex;
    gap: 4px;
    background: var(--sd-neutral-soft);
    padding: 4px;
    border-radius: 10px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    border: 0;
}

.sd-tabs .nav-link {
    border: 0;
    border-radius: 8px;
    color: var(--sd-muted);
    font-weight: 600;
    font-size: .84rem;
    padding: .4rem .8rem;
    flex: 1 1 auto;
    text-align: center;
}

.sd-tabs .nav-link:hover {
    color: var(--sd-ink);
}

.sd-tabs .nav-link.active {
    background: var(--sd-surface);
    color: var(--sd-ink);
    box-shadow: var(--sd-shadow-1);
}

/* Bahşiş seçici */
.tip-group .btn {
    font-size: .8rem;
}

.btn-check:checked + .btn.btn-outline-secondary {
    background: var(--sd-accent-soft);
    border-color: var(--sd-accent);
    color: var(--sd-accent-ink);
}

/* ---------- Kimlik doğrulama ---------- */

.auth-body {
    background: var(--sd-bg);
    background-image: radial-gradient(circle at 15% 10%, rgba(122, 165, 220, .12), transparent 40%),
                      radial-gradient(circle at 85% 90%, rgba(130, 38, 57, .07), transparent 45%);
}

.auth-wrap {
    min-height: calc(100vh - var(--sd-topbar-h));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--sd-surface);
    border: 1px solid var(--sd-border);
    border-top: 3px solid var(--sd-wine);
    border-radius: 16px;
    box-shadow: var(--sd-shadow-2);
    padding: 34px 30px;
}

.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    text-align: center;
}

/* ---------- Durum sayfaları ---------- */

.status-page {
    max-width: 480px;
    margin: 8vh auto 0;
    text-align: center;
    padding: 0 16px;
}

.status-page-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-page-icon.is-danger { background: var(--sd-danger-soft); color: var(--sd-danger); }
.status-page-icon.is-info { background: var(--sd-accent-soft); color: var(--sd-accent); }

.status-page h1 {
    font-size: 1.35rem;
    font-weight: 700;
}

.status-page p {
    color: var(--sd-muted);
}

/* ---------- Hızlı erişim (Ana sayfa) ---------- */

.quick-card {
    background: var(--sd-surface);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow-1);
    padding: 18px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--sd-ink);
    transition: box-shadow .15s ease, border-color .15s ease;
}

.quick-card:hover {
    box-shadow: var(--sd-shadow-2);
    border-color: #c3d6ef;
    color: var(--sd-ink);
}

.quick-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--sd-accent-soft);
    color: var(--sd-accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* Hızlı erişim kartlarında mavi/bordo dönüşümlü ikonlar */
.row > div:nth-child(3n+2) .quick-card-icon {
    background: var(--sd-wine-soft);
    color: var(--sd-wine);
}

.row > div:nth-child(3n+2) .quick-card:hover {
    border-color: #dfc0c8;
}

.quick-card-title {
    font-weight: 650;
    font-size: .92rem;
}

.quick-card-sub {
    color: var(--sd-faint);
    font-size: .76rem;
}

/* ---------- Yardımcılar ---------- */

.sd-icon {
    display: inline-block;
    vertical-align: middle;
}

.min-w-0 {
    min-width: 0;
}

.sd-brand-mark .sd-icon { width: 18px; height: 18px; }
.empty-state-icon .sd-icon { width: 24px; height: 24px; }
.empty-state-sm .empty-state-icon .sd-icon { width: 20px; height: 20px; }
.quick-card-icon .sd-icon { width: 22px; height: 22px; }
.status-page-icon .sd-icon { width: 30px; height: 30px; }
.sdc-tab .sd-icon { width: 20px; height: 20px; }

.thumb-sm {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--sd-border);
}

.thumb-md {
    width: 92px;
    height: 92px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--sd-border);
}

.qr-thumb {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    border: 1px solid var(--sd-border);
    background: #fff;
}

.scroll-panel {
    max-height: 64vh;
    overflow-y: auto;
}

.divider-label {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--sd-wine);
    font-size: .74rem;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 26px 0 14px;
}

.divider-label::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--sd-border);
}