:root {
    --bar-bg: #171316;
    --bar-accent: #b86a2f;
    --bar-accent-deep: #6b3415;
    --bar-gold: #d4a35f;
    --bar-dark: #120f12;
    --bar-soft: #f7efe6;
    --bar-olive: #58633a;
    --bar-ink: #2f2623;
    --bar-panel: #221b1d;
}

body {
    color: var(--bar-ink);
    background:
        radial-gradient(circle at top right, rgba(212, 163, 95, 0.16), transparent 24%),
        radial-gradient(circle at left 20%, rgba(184, 106, 47, 0.10), transparent 30%),
        linear-gradient(180deg, #2a2023 0%, #171316 18rem, #efe3d4 18rem, #f6efe7 100%);
    font-family: 'Manrope', sans-serif;
    min-height: 100vh;
}

h1,
h2,
h3,
h4,
.restaurant-brand-title,
.hero-title,
.login-title {
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: 0.01em;
}

.restaurant-orb {
    position: fixed;
    border-radius: 999px;
    filter: blur(10px);
    pointer-events: none;
    z-index: 0;
}

.restaurant-orb-a {
    width: 18rem;
    height: 18rem;
    right: -5rem;
    top: 4.5rem;
    background: radial-gradient(circle, rgba(212, 163, 95, 0.18), rgba(212, 163, 95, 0));
}

.restaurant-orb-b {
    width: 16rem;
    height: 16rem;
    left: -4rem;
    bottom: 2rem;
    background: radial-gradient(circle, rgba(184, 106, 47, 0.12), rgba(184, 106, 47, 0));
}

.restaurant-main {
    position: relative;
}

.restaurant-navbar {
    background: linear-gradient(90deg, rgba(18, 15, 18, 0.98), rgba(47, 27, 24, 0.98));
    border-bottom: 1px solid rgba(212, 163, 95, 0.18);
}

.restaurant-navbar .navbar-toggler {
    border-color: rgba(255, 222, 185, 0.28);
}

.restaurant-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(212, 163, 95, 0.18);
}

.restaurant-navbar .navbar-toggler-icon {
    filter: brightness(1.4);
}

.restaurant-navbar .nav-link,
.restaurant-navbar .dropdown-toggle,
.restaurant-navbar .navbar-text {
    color: rgba(255, 240, 222, 0.88) !important;
}

.restaurant-navbar .nav-link:hover,
.restaurant-navbar .nav-link:focus,
.restaurant-navbar .dropdown-toggle:hover,
.restaurant-navbar .dropdown-toggle:focus {
    color: #fff8ef !important;
    background: rgba(255, 222, 185, 0.08);
}

.restaurant-navbar .nav-link.active,
.restaurant-navbar .show > .nav-link,
.restaurant-navbar .show > .dropdown-toggle {
    color: #fff8ef !important;
    background: rgba(212, 163, 95, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 222, 185, 0.10);
}

.restaurant-navbar .nav-link,
.restaurant-navbar .dropdown-toggle {
    border-radius: 0.85rem;
    transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.restaurant-navbar .dropdown-menu {
    background: linear-gradient(180deg, rgba(32, 22, 23, 0.98), rgba(57, 31, 28, 0.98));
    border: 1px solid rgba(212, 163, 95, 0.14);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.22);
}

.restaurant-navbar .dropdown-item {
    color: rgba(255, 240, 222, 0.88);
}

.restaurant-navbar .dropdown-item:hover,
.restaurant-navbar .dropdown-item:focus {
    color: #fff8ef;
    background: rgba(212, 163, 95, 0.12);
}

.restaurant-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    color: #fff;
    text-decoration: none;
}

.restaurant-brand:hover,
.restaurant-brand:focus {
    color: #fff;
}

.restaurant-brand-mark {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--bar-gold), #f2c78b);
    color: var(--bar-dark);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    font-weight: 700;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
}

.restaurant-brand-title {
    display: block;
    font-size: 1.55rem;
    line-height: 1;
}

.restaurant-brand-subtitle {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.78;
    margin-top: 0.15rem;
}

.hero-panel {
    background:
        linear-gradient(135deg, rgba(18, 15, 18, 0.97), rgba(76, 42, 24, 0.90)),
        radial-gradient(circle at top left, rgba(212, 163, 95, 0.22), transparent 35%);
    border: 1px solid rgba(255, 222, 185, 0.10);
}

.restaurant-hero::after {
    content: '';
    position: absolute;
    inset: auto -4rem -5rem auto;
    width: 15rem;
    height: 15rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 196, 109, 0.14), rgba(255, 196, 109, 0));
}

.hero-kicker {
    letter-spacing: 0.18em;
}

.hero-title {
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    line-height: 0.95;
}

.hero-copy {
    max-width: 44rem;
    font-size: 1.02rem;
    color: rgba(255, 241, 227, 0.82);
}

.hero-chip-row {
    position: relative;
    z-index: 1;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 248, 238, 0.08);
    border: 1px solid rgba(255, 214, 168, 0.14);
    font-size: 0.88rem;
    color: #ffe9cf;
}

.glass-card {
    background: rgba(255, 246, 235, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 214, 168, 0.12);
}

.hero-aside {
    min-width: min(18rem, 100%);
}

.hero-aside-note {
    font-size: 0.9rem;
    color: rgba(255, 240, 222, 0.68);
}

.min-vh-75 {
    min-height: 75vh;
}

.form-control,
.form-select,
.btn,
.card {
    border-radius: 1rem;
}

.form-control,
.form-select {
    border-color: rgba(73, 54, 44, 0.12);
    background: rgba(255, 252, 247, 0.92);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(180, 70, 47, 0.35);
    box-shadow: 0 0 0 0.25rem rgba(180, 70, 47, 0.12);
}

.btn-dark {
    background: linear-gradient(135deg, var(--bar-accent-deep), var(--bar-accent));
    border-color: transparent;
    box-shadow: 0 0.8rem 1.6rem rgba(107, 52, 21, 0.18);
}

.btn-dark:hover,
.btn-dark:focus {
    background: linear-gradient(135deg, #6b1d15, #a73827);
    border-color: transparent;
}

.btn-outline-dark {
    color: var(--bar-accent-deep);
    border-color: rgba(125, 39, 27, 0.35);
    background: rgba(255, 250, 244, 0.72);
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
    background: rgba(180, 70, 47, 0.10);
    color: var(--bar-accent-deep);
    border-color: rgba(125, 39, 27, 0.55);
}

.restaurant-card {
    background: linear-gradient(180deg, rgba(255, 253, 249, 0.98), rgba(250, 244, 236, 0.98));
    border: 1px solid rgba(73, 54, 44, 0.06);
    box-shadow: 0 1rem 2.5rem rgba(64, 42, 31, 0.08) !important;
}

.bar-page-header {
    position: relative;
    color: #fff2e3;
    background:
        linear-gradient(135deg, rgba(18, 15, 18, 0.94), rgba(86, 45, 24, 0.86)),
        radial-gradient(circle at top left, rgba(212, 163, 95, 0.20), transparent 36%);
    border: 1px solid rgba(255, 214, 168, 0.10);
    box-shadow: 0 1.3rem 2.8rem rgba(17, 12, 10, 0.20);
}

.bar-page-header::after {
    content: '';
    position: absolute;
    inset: auto -3rem -4rem auto;
    width: 13rem;
    height: 13rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 196, 109, 0.12), rgba(255, 196, 109, 0));
}

.page-kicker {
    color: rgba(255, 230, 199, 0.72);
    letter-spacing: 0.18em;
}

.page-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 3.2vw, 3rem);
    line-height: 0.96;
    color: #fff8ef;
}

.page-copy {
    max-width: 45rem;
    color: rgba(255, 240, 222, 0.78);
}

.page-aside,
.page-meta {
    color: rgba(255, 235, 212, 0.72);
}

.table-shell {
    overflow: hidden;
}

.table-shell .card-body {
    position: relative;
}

.table-shell .table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
}

.table-shell .table tbody tr:hover {
    background: rgba(212, 163, 95, 0.08);
}

.modal-content {
    background: linear-gradient(180deg, rgba(255, 251, 246, 0.99), rgba(247, 238, 227, 0.99));
    border: 1px solid rgba(86, 51, 32, 0.10);
    box-shadow: 0 1.4rem 3rem rgba(17, 12, 10, 0.22);
}

.modal-header,
.modal-footer {
    border-color: rgba(86, 51, 32, 0.08);
}

.modal-header {
    background: linear-gradient(90deg, rgba(36, 27, 29, 0.98), rgba(86, 45, 24, 0.92));
    color: #fff3e4;
}

.modal-header .modal-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.55rem;
}

.modal-header .btn-close {
    filter: invert(1) brightness(1.1);
}

.modal-footer {
    background: rgba(255, 249, 241, 0.82);
}

.modal-body {
    padding: 1.25rem;
}

.form-label {
    font-weight: 700;
    color: #4d3730;
    letter-spacing: 0.01em;
}

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

.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(184, 106, 47, 0.18);
}

.alert-light {
    background: rgba(255, 249, 241, 0.92);
    border-color: rgba(86, 51, 32, 0.10) !important;
    color: #5a4338;
}

.table thead th {
    color: #684d41;
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.modal .form-control,
.modal .form-select {
    min-height: 2.85rem;
}

.modal .form-check {
    padding: 0.75rem 1rem 0.75rem 2.2rem;
    background: rgba(255, 249, 241, 0.7);
    border: 1px solid rgba(86, 51, 32, 0.08);
    border-radius: 0.9rem;
}

.modal .form-check-input {
    margin-top: 0.15rem;
}

.modal .text-danger.small,
.modal .small.text-danger {
    padding-top: 0.25rem;
}

.payment-evidence-fields {
    display: grid;
    gap: 1rem;
}

.payment-evidence-field {
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(255, 249, 241, 0.78);
    border: 1px solid rgba(86, 51, 32, 0.08);
}

.payment-history-list {
    display: grid;
    gap: 1rem;
}

.payment-history-item {
    padding: 1.2rem;
    border-radius: 1.2rem;
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(248, 241, 232, 0.96));
    box-shadow: inset 0 0 0 1px rgba(73, 54, 44, 0.06);
}

.payment-history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.9rem;
}

.payment-history-grid.payment-history-grid-evidence-single {
    grid-template-columns: minmax(0, 24rem);
    justify-content: start;
    justify-items: start;
}

.payment-history-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
    border-radius: 0.95rem;
    background: rgba(255, 255, 255, 0.66);
}

.payment-evidence-card {
    padding: 0.85rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.6);
}

.payment-evidence-label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.4rem;
    max-width: fit-content;
    color: #7a6258;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.payment-history-grid-evidence-single .payment-evidence-card {
    width: 100%;
    max-width: 24rem;
}

.payment-evidence-media {
    min-height: 10rem;
}

.payment-evidence-link {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: zoom-in;
}

.payment-evidence-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0.85rem;
    box-shadow: 0 0.8rem 1.6rem rgba(34, 24, 20, 0.12);
}

.payment-evidence-empty {
    display: grid;
    place-items: center;
    min-height: 10rem;
    border-radius: 0.85rem;
    color: #7a6258;
    background: rgba(247, 239, 230, 0.88);
    border: 1px dashed rgba(125, 39, 27, 0.2);
}

.payment-evidence-empty-card {
    background:
        radial-gradient(circle at top, rgba(255, 242, 224, 0.78), transparent 42%),
        linear-gradient(180deg, rgba(247, 239, 230, 0.94), rgba(236, 220, 204, 0.88));
}

.payment-evidence-empty-transfer {
    background:
        radial-gradient(circle at top, rgba(230, 245, 241, 0.82), transparent 42%),
        linear-gradient(180deg, rgba(238, 247, 243, 0.96), rgba(216, 234, 228, 0.88));
}

.payment-evidence-empty-icon {
    font-size: 3rem;
    color: #8e5b3c;
    line-height: 1;
}

.payment-evidence-empty-transfer .payment-evidence-empty-icon {
    color: #497267;
}

.payment-preview-modal {
    overflow: hidden;
}

.payment-preview-body {
    padding: 0;
    background:
        radial-gradient(circle at top, rgba(212, 163, 95, 0.18), transparent 36%),
        linear-gradient(180deg, rgba(30, 23, 24, 0.98), rgba(56, 34, 29, 0.96));
}

.payment-preview-image {
    display: block;
    width: 100%;
    max-height: min(78vh, 58rem);
    object-fit: contain;
    margin: 0 auto;
}

.badge {
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 999px;
    padding: 0.48rem 0.75rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.text-bg-dark {
    background: linear-gradient(135deg, #332428, #1f171a) !important;
    color: #fff5eb !important;
}

.text-bg-secondary {
    background: linear-gradient(135deg, #6a5552, #4c3f3d) !important;
    color: #fff4ef !important;
}

.text-bg-warning {
    background: linear-gradient(135deg, #d6a04f, #b8772d) !important;
    color: #2c1d12 !important;
}

.payment-badge-pending {
    opacity: 0.5;
}

.text-bg-success {
    background: linear-gradient(135deg, #7a8f44, #4f6527) !important;
    color: #f4f8e8 !important;
}

.text-bg-info {
    background: linear-gradient(135deg, #4a7b86, #2d5964) !important;
    color: #eefbfd !important;
}

.text-bg-primary {
    background: linear-gradient(135deg, #8e4d62, #643245) !important;
    color: #fff1f6 !important;
}

.module-card {
    position: relative;
    overflow: hidden;
}

.module-card-topline {
    width: 3.5rem;
    height: 0.3rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--bar-gold), #cc7e37);
    margin-bottom: 1rem;
}

.module-card-title {
    color: var(--bar-dark);
    font-size: 1.7rem;
}

.action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.action-button-icon {
    line-height: 1;
    font-size: 0.95em;
}

.action-button-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.action-nav-link,
.dropdown-item.action-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.action-nav-icon {
    line-height: 1;
    font-size: 0.95em;
}

.action-nav-label {
    display: inline-flex;
    align-items: center;
}

.metric-card {
    border: 1px solid rgba(73, 54, 44, 0.08);
}

.metric-label {
    color: #7a6258;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.metric-value {
    color: var(--bar-dark);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
}

.login-card-shell {
    position: relative;
}

.login-card-shell::before {
    content: '';
    display: block;
    height: 0.45rem;
    background: linear-gradient(90deg, var(--bar-gold), var(--bar-accent), var(--bar-olive));
}

.user-access-panel {
    padding: 1.25rem;
    border-radius: 1.25rem;
    background: linear-gradient(180deg, rgba(255, 250, 244, 0.9), rgba(248, 241, 232, 0.92));
    box-shadow: inset 0 0 0 1px rgba(73, 54, 44, 0.06);
}

.user-access-panel-head {
    margin-bottom: 1rem;
}

.user-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.9rem;
}

.user-access-item {
    padding: 0.85rem 0.95rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.62);
    min-height: 0;
}

.user-access-check {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    padding-left: 0;
}

.user-access-check .form-check-input {
    float: none;
    margin: 0;
}

.user-access-check .form-check-label {
    color: var(--bar-dark);
    font-weight: 700;
    line-height: 1.2;
}

.order-item-form {
    border-color: rgba(31, 31, 36, 0.08) !important;
}

.table > :not(caption) > * > * {
    padding: 0.9rem 0.75rem;
}

.table-light,
.table > thead {
    --bs-table-bg: rgba(113, 69, 47, 0.06);
}

@media (max-width: 767.98px) {
    .hero-panel {
        padding: 1.5rem;
    }

    .bar-page-header {
        padding: 1.35rem !important;
    }

    .page-header-layout,
    .section-heading-row {
        gap: 0.85rem !important;
    }

    .page-title {
        font-size: clamp(1.75rem, 8vw, 2.3rem);
    }

    .page-copy {
        font-size: 0.94rem;
    }

    .page-aside {
        width: 100%;
        align-items: stretch !important;
    }

    .page-aside form,
    .page-aside .btn {
        width: 100%;
    }

    .section-heading-row {
        flex-direction: column;
        align-items: stretch !important;
    }

    .section-heading-row .btn,
    .section-heading-row .form-select,
    .section-heading-row form {
        width: 100%;
    }

    .metric-value {
        font-size: clamp(1.35rem, 7vw, 1.9rem);
    }

    .table-shell .card-body {
        padding: 1rem !important;
    }

    .table-shell .table {
        min-width: 38rem;
        font-size: 0.93rem;
    }

    .table-shell .table > :not(caption) > * > * {
        padding: 0.72rem 0.55rem;
    }

    .admin-table-actions,
    .order-list-actions {
        flex-direction: column;
        min-width: 6.5rem;
    }

    .admin-table-actions .btn,
    .order-list-actions .btn {
        width: 100%;
    }

    .table thead th {
        font-size: 0.75rem;
    }

    .badge {
        font-size: 0.73rem;
        padding: 0.42rem 0.62rem;
    }

    .restaurant-card.table-shell {
        border-radius: 1.15rem !important;
    }

    .modal-dialog {
        margin: 0.65rem;
    }

    .modal-content {
        border-radius: 1.15rem;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .modal-header {
        padding-top: 0.95rem;
        padding-bottom: 0.95rem;
    }

    .modal-header .modal-title {
        font-size: 1.3rem;
        line-height: 1.05;
        max-width: 85%;
    }

    .modal-body.row {
        row-gap: 0.8rem !important;
    }

    .modal-body .col-md-6,
    .modal-body .col-md-12,
    .modal-body .col-12 {
        width: 100%;
    }

    .modal-footer {
        flex-direction: column-reverse;
        gap: 0.6rem;
        align-items: stretch;
    }

    .modal-footer .btn {
        width: 100%;
        margin: 0;
    }

    form.row.g-4 {
        row-gap: 1rem !important;
    }

    form.row.g-4 > [class*='col-'] {
        width: 100%;
    }

    .form-label {
        font-size: 0.93rem;
    }

    .form-control,
    .form-select {
        font-size: 0.97rem;
    }

    .d-grid.d-md-flex.justify-content-md-end {
        display: grid !important;
    }

    .d-grid.d-md-flex.justify-content-md-end .btn {
        width: 100%;
    }

    .restaurant-brand-title {
        font-size: 1.25rem;
    }

    .restaurant-brand-subtitle {
        font-size: 0.63rem;
    }

    .navbar .nav-link {
        padding: 0.65rem 0;
    }

    .action-button-compact-mobile {
        min-width: 2.75rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .action-button-compact-mobile .action-button-label {
        display: none;
    }

    .action-button-compact-mobile .action-button-icon {
        margin: 0;
        font-size: 1rem;
    }
}