:root {
    --app-cream: #FAF3E3;
    --app-secondary: #FFFAFA;
    --app-border: #F0DFC8;
    --app-terracotta: #D96C4F;
    --app-cinnamon: #B5532F;
    --app-espresso: #2E1F1B;
    --app-muted: #7A6258;
    --app-table-line: #C7AC8F;
    --bs-primary-rgb: 46, 31, 27;
    --bs-success-rgb: 46, 31, 27;
    --bs-danger-rgb: 217, 108, 79;
    --bs-warning-rgb: 217, 108, 79;
    --bs-info-rgb: 122, 98, 88;
    --bs-light-rgb: 255, 250, 250;
    --bs-dark-rgb: 46, 31, 27;
    --bs-white-rgb: 255, 250, 250;
    --bs-body-bg: #FAF3E3;
    --bs-body-color: #2E1F1B;
    --bs-secondary-color: #7A6258;
    --bs-border-color: #F0DFC8;
}

html.user-facing-page,
html.user-facing-page body,
html.user-facing-page .min-h-screen {
    background-color: var(--app-cream) !important;
}

html.cafe-motif-page body {
    background-color: var(--app-cream) !important;
    background-image: url("../images/cafe-line-motif.svg") !important;
    background-repeat: repeat !important;
    background-size: 180px 180px !important;
}

html.user-facing-page .bg-gray-50,
html.user-facing-page .bg-gray-100,
html.user-facing-page .bg-white,
html.user-facing-page .guest-auth-panel,
html.user-facing-page .guest-auth-icon {
    background-color: var(--app-secondary) !important;
}

body {
    background-color: var(--app-cream) !important;
}

/* Use the designated secondary surface color while keeping the page background distinct. */
.card,
.modal-content,
.form-control,
.form-select,
.table-light,
.bg-white,
.bg-light,
.alert,
.login-card,
.products-side,
.cart-side,
.product-card,
.product-card .card-body,
.login-card .password-toggle,
.login-card .demo-box,
.category-btn,
.order-type-btn,
.payment-btn,
[style*="background" i][style*="#F8E8D4" i] {
    background-color: var(--app-secondary) !important;
}

.page-header {
    background-color: #F8E8D4 !important;
}

.table thead th,
table thead th {
    background-color: var(--app-espresso) !important;
    background-image: none !important;
    color: #F8E8D4 !important;
}

/* Keep table body and totals on the shared card surface; table headers stay cocoa. */
.table tbody tr,
.table tbody td,
.table tbody th,
table tbody tr,
table tbody td,
table tbody th,
.table tfoot tr,
.table tfoot td,
.table tfoot th,
table tfoot tr,
table tfoot td,
table tfoot th {
    background-color: var(--app-secondary) !important;
}

.card,
.modal-content,
.form-control,
.form-select,
.table,
.table > :not(caption) > * > *,
.btn-light {
    border-color: var(--app-border);
}

/* Bootstrap tables and inline row styles both get a clear beige separator. */
.table,
table {
    --bs-table-border-color: var(--app-table-line);
    border: 1px solid var(--app-table-line) !important;
    border-collapse: collapse;
}

.table > :not(caption) > * > *,
table > :not(caption) > * > * {
    border-right: 1px solid var(--app-table-line) !important;
    border-bottom: 1px solid var(--app-table-line) !important;
}

.table > :not(caption) > * > *:last-child,
table > :not(caption) > * > *:last-child {
    border-right: 0 !important;
}

.table tbody tr,
table tbody tr {
    border-bottom: 1px solid var(--app-table-line) !important;
}

.table thead th,
table thead th {
    border-right: 1px solid rgb(248 232 212 / 45%) !important;
    border-bottom: 2px solid var(--app-table-line) !important;
}

.table thead th:last-child,
table thead th:last-child {
    border-right: 0 !important;
}

.table tbody td,
table tbody td {
    border-right: 1px solid var(--app-table-line) !important;
}

.table tbody td:last-child,
table tbody td:last-child {
    border-right: 0 !important;
}

.table tfoot,
table tfoot {
    background-color: var(--app-secondary) !important;
    font-weight: 700;
}

.table tfoot th,
.table tfoot td,
table tfoot th,
table tfoot td {
    border-top: 2px solid var(--app-espresso) !important;
    border-bottom: 1px solid var(--app-table-line) !important;
    vertical-align: middle;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.text-muted,
.text-secondary,
::placeholder {
    color: var(--app-muted) !important;
}

.btn-light,
.modal .btn-light,
.modal [data-bs-dismiss="modal"].btn-light {
    border: 1px solid #8B6E60 !important;
}

.report-table tfoot .report-total-label {
    text-align: left !important;
}

.report-table tfoot .report-total-number {
    text-align: right !important;
    white-space: nowrap;
}

.report-table tfoot .report-total-count {
    text-align: center !important;
}

.card,
.modal-content {
    border-color: var(--app-border) !important;
}

.login-card .form-control {
    border: 1.5px solid var(--app-espresso) !important;
}

.login-card .form-control:focus {
    border-color: var(--app-terracotta) !important;
    box-shadow: 0 0 0 3px rgb(217 108 79 / 22%) !important;
}

a:hover {
    color: var(--app-cinnamon) !important;
}

.btn-primary:hover,
.btn-danger:hover,
.btn-teal:hover,
.category-btn:hover,
.category-btn.active,
.order-type-btn.active,
.payment-btn.active {
    background-color: var(--app-cinnamon) !important;
    border-color: var(--app-cinnamon) !important;
    color: var(--app-secondary) !important;
}

.product-card .card-body .fw-bold {
    color: var(--app-terracotta) !important;
}

.product-card {
    display: flex;
    flex-direction: column;
}

.product-card .card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.product-card .card-title {
    min-height: 2.4em;
}

.product-card .card-body .fw-bold {
    margin-top: auto;
}

#cart-table,
#cart-table tbody,
#cart-table tbody tr,
#cart-table tbody td {
    background-color: var(--app-secondary) !important;
}

.input-group-text {
    background-color: var(--app-secondary) !important;
    border-color: var(--app-border) !important;
    color: var(--app-espresso) !important;
}

.order-type-btn[onclick*="Take Away"] {
    background-color: var(--app-secondary) !important;
    border-color: var(--app-terracotta) !important;
    color: var(--app-espresso) !important;
}

.order-type-btn {
    border-color: var(--app-muted) !important;
}

.order-type-btn.active,
.order-type-btn[onclick*="Take Away"].active {
    background-color: var(--app-terracotta) !important;
    border-color: var(--app-terracotta) !important;
    color: var(--app-secondary) !important;
}

input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea,
.form-control:not(.form-control-color),
.form-select {
    background-color: var(--app-secondary) !important;
    color: var(--app-espresso) !important;
    border-color: var(--app-muted) !important;
    border-style: solid !important;
    border-width: 1px !important;
}

input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--app-terracotta) !important;
    box-shadow: 0 0 0 3px rgb(217 108 79 / 18%) !important;
    outline: none;
}

input[type="checkbox"],
input[type="radio"] {
    border: 1px solid var(--app-muted) !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: var(--app-terracotta);
}

/* Small-screen layout adjustments; desktop rules above remain unchanged. */
@media (max-width: 767.98px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .main-content,
    .main-content > .container-fluid,
    .main-content .row,
    .main-content [class*="col-"] {
        min-width: 0;
    }

    .main-content > .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    .main-content .card:has(table),
    .main-content .table-responsive {
        max-width: 100%;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .main-content table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    .main-content .table-responsive:has(table thead tr:first-child > th:nth-child(7)) {
        overflow-x: auto;
    }

    .main-content .card:has(table thead tr:first-child > th:nth-child(7)) {
        overflow-x: auto;
    }

    .main-content table:has(thead tr:first-child > th:nth-child(7)) {
        width: max-content;
        min-width: max(760px, 100%);
        table-layout: auto;
    }

    .main-content table:not(:has(thead tr:first-child > th:nth-child(7))) th,
    .main-content table:not(:has(thead tr:first-child > th:nth-child(7))) td {
        padding: 5px 3px !important;
        font-size: .68rem !important;
        white-space: normal !important;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .main-content .dashboard-recent-orders th.customer-column {
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: keep-all !important;
    }

    .main-content table:not(:has(thead tr:first-child > th:nth-child(7))) .btn {
        max-width: 100%;
        padding: .2rem .3rem;
        font-size: .65rem;
        white-space: normal;
    }

    .main-content .report-table { width: 100%; table-layout: fixed; }
    .main-content .report-table th {
        padding: 4px 2px !important;
        font-size: .58rem !important;
        line-height: 1.1;
        white-space: normal !important;
        overflow-wrap: break-word;
        vertical-align: middle;
    }
    .main-content .report-table td {
        padding: 4px 3px !important;
        font-size: .62rem !important;
        line-height: 1.15;
        overflow-wrap: break-word;
        vertical-align: middle;
    }

    #staffTable { width: 100% !important; table-layout: fixed !important; }
    #staffTable th,
    #staffTable td {
        padding: 4px 2px !important;
        font-size: .6rem !important;
        line-height: 1.15;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: normal !important;
    }
    #staffTable th { font-size: .52rem !important; }
    #staffTable th:nth-child(1), #staffTable td:nth-child(1) { width: 7%; }
    #staffTable th:nth-child(2), #staffTable td:nth-child(2) { width: 19%; }
    #staffTable th:nth-child(3), #staffTable td:nth-child(3) { width: 22%; }
    #staffTable th:nth-child(4), #staffTable td:nth-child(4) { width: 17%; }
    #staffTable th:nth-child(5), #staffTable td:nth-child(5) { width: 14%; }
    #staffTable th:nth-child(6), #staffTable td:nth-child(6) { width: 21%; }
    #staffTable td:nth-child(2) > div { gap: 4px !important; min-width: 0; }
    #staffTable td:nth-child(2) > div > div:first-child {
        width: 22px !important;
        height: 22px !important;
        margin-right: 0 !important;
        font-size: .62rem !important;
    }
    #staffTable .user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #staffTable td:nth-child(4) span { display: inline-block; max-width: 100%; padding: 2px 3px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #staffTable td:nth-child(4) i { display: none; }
    #staffTable td:last-child { text-align: center !important; }
    #staffTable td:last-child form { display: inline-block !important; margin: 0 !important; }
    #staffTable td:last-child .btn { width: 20px; height: 22px; padding: 0 !important; font-size: .72rem !important; vertical-align: middle; }

    #rolesTable { width: 100% !important; table-layout: fixed !important; }
    #rolesTable th,
    #rolesTable td {
        padding: 4px 3px !important;
        font-size: .62rem !important;
        line-height: 1.15;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: normal !important;
    }
    #rolesTable th { font-size: .58rem !important; }
    #rolesTable th:nth-child(1), #rolesTable td:nth-child(1) { width: 10% !important; }
    #rolesTable th:nth-child(2), #rolesTable td:nth-child(2) { width: 30% !important; }
    #rolesTable th:nth-child(3), #rolesTable td:nth-child(3) { width: 26% !important; }
    #rolesTable th:nth-child(4), #rolesTable td:nth-child(4) { width: 34% !important; }
    #rolesTable .role-name,
    #rolesTable td:nth-child(3) span {
        display: block !important;
        max-width: 100%;
        padding: 2px 4px !important;
        font-size: .58rem !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }
    #rolesTable .role-name i,
    #rolesTable td:nth-child(3) span i { display: none !important; }
    #rolesTable td:last-child { text-align: center !important; }
    #rolesTable td:last-child form { display: inline-block !important; margin: 0 !important; }
    #rolesTable td:last-child .btn { width: 24px; height: 24px; padding: 0 !important; font-size: .76rem !important; vertical-align: middle; }

    .main-content .page-header {
        align-items: flex-start;
        gap: 10px;
    }

    .main-content .page-header h1,
    .main-content .page-header h2,
    .main-content .page-header h3,
    .main-content .page-header h4 {
        overflow-wrap: anywhere;
    }

    .main-content .modal-dialog {
        width: auto;
        max-width: calc(100vw - 1rem);
        margin: .5rem;
    }

    .main-content .modal-body {
        overflow-wrap: anywhere;
    }

    .main-content .form-control,
    .main-content .form-select,
    .main-content input:not([type="checkbox"]):not([type="radio"]),
    .main-content select,
    .main-content textarea {
        max-width: 100%;
        min-width: 0;
    }

    .guest-auth-panel {
        width: 100%;
        max-width: 460px;
    }

    .guest-auth-panel-register {
        padding: 24px 20px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .main-content .card:has(table),
    .main-content .table-responsive {
        max-width: 100%;
        overflow-x: hidden;
    }

    .main-content table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    .main-content .table-responsive:has(table thead tr:first-child > th:nth-child(7)) {
        overflow-x: auto;
    }

    .main-content .card:has(table thead tr:first-child > th:nth-child(7)) {
        overflow-x: auto;
    }

    .main-content table:has(thead tr:first-child > th:nth-child(7)) {
        width: max-content;
        min-width: max(760px, 100%);
        table-layout: auto;
    }

    .main-content table:not(:has(thead tr:first-child > th:nth-child(7))) th,
    .main-content table:not(:has(thead tr:first-child > th:nth-child(7))) td {
        padding: 7px 5px !important;
        font-size: .76rem !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .main-content .table:not(#cart-table) {
        width: 100%;
        table-layout: fixed;
    }

    .main-content .table:not(#cart-table) th,
    .main-content .table:not(#cart-table) td {
        padding: 7px 5px !important;
        font-size: .76rem;
        overflow-wrap: anywhere;
    }

    .main-content .table:not(#cart-table) .btn {
        padding: .25rem .4rem;
        font-size: .72rem;
        white-space: normal;
    }

    .main-content .report-table th,
    .main-content .report-table td {
        overflow-wrap: break-word;
        word-break: normal;
        vertical-align: middle;
    }
}

@media (max-width: 991.98px) {
    #categoriesTable {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
    }
    #categoriesTable th,
    #categoriesTable td {
        padding: 6px 4px !important;
        font-size: .68rem !important;
        line-height: 1.2;
        vertical-align: middle;
    }
    #categoriesTable th { font-size: .64rem !important; }
    #categoriesTable th:nth-child(1), #categoriesTable td:nth-child(1) { width: 10% !important; }
    #categoriesTable th:nth-child(2), #categoriesTable td:nth-child(2) { width: 20% !important; }
    #categoriesTable th:nth-child(3), #categoriesTable td:nth-child(3) { width: 24% !important; }
    #categoriesTable th:nth-child(4), #categoriesTable td:nth-child(4) { width: 18% !important; }
    #categoriesTable th:nth-child(5), #categoriesTable td:nth-child(5) { width: 28% !important; }
    #categoriesTable td:nth-child(1),
    #categoriesTable td:nth-child(2),
    #categoriesTable td:nth-child(3),
    #categoriesTable td:nth-child(4) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap !important;
    }
    #categoriesTable .category-actions-cell { overflow: visible; white-space: nowrap !important; }

    .orders-table-wrap {
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #ordersTable {
        width: 760px !important;
        min-width: 760px !important;
        table-layout: fixed !important;
    }
    #ordersTable th,
    #ordersTable td {
        white-space: nowrap !important;
        overflow-wrap: normal !important;
    }

    .staff-table-wrap {
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #staffTable {
        width: 600px !important;
        min-width: 600px !important;
        table-layout: fixed !important;
    }
    #staffTable th,
    #staffTable td {
        padding: 7px 9px !important;
        font-size: .76rem !important;
    }
    #staffTable th { font-size: .7rem !important; }
    #staffTable td:last-child .btn { width: 28px; height: 28px; font-size: .85rem !important; }

    #rolesTable th:first-child,
    #rolesTable td:first-child {
        padding-right: 2px !important;
        padding-left: 2px !important;
    }

    #categoryReportTable th:first-child,
    #categoryReportTable td:first-child,
    #itemsReportTable th:first-child,
    #itemsReportTable td:first-child,
    #productsReportTable th:first-child,
    #productsReportTable td:first-child,
    #salesReportTable th:first-child,
    #salesReportTable td:first-child,
    #ordersReportTable th:first-child,
    #ordersReportTable td:first-child {
        width: 44px !important;
        padding-right: 3px !important;
        padding-left: 3px !important;
        white-space: nowrap !important;
    }

    #customersTable {
        width: 820px !important;
        min-width: 820px !important;
        table-layout: fixed !important;
    }

    #customersTable colgroup col:nth-child(1) { width: 44px !important; }
    #customersTable colgroup col:nth-child(2) { width: 175px !important; }
    #customersTable colgroup col:nth-child(3) { width: 120px !important; }
    #customersTable colgroup col:nth-child(4),
    #customersTable colgroup col:nth-child(5) { width: 105px !important; }
    #customersTable colgroup col:nth-child(6) { width: 130px !important; }
    #customersTable colgroup col:nth-child(7) { width: 130px !important; }

    #customersTable th,
    #customersTable td {
        padding: 4px 6px !important;
        font-size: .68rem !important;
        line-height: 1.2;
        white-space: nowrap !important;
    }

    #customersTable th { font-size: .64rem !important; }
    #customersTable .customer-name-content { gap: 0; }
    #customersTable .customer-name-content > div:first-child {
        width: 26px !important;
        height: 26px !important;
        margin-right: 6px !important;
        font-size: .7rem !important;
    }
    #customersTable .customer-name-details { overflow: hidden; text-overflow: ellipsis; }
    #customersTable .customer-name-details > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #customersTable td .badge {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 3px 5px !important;
        font-size: .62rem !important;
        vertical-align: middle;
    }
    #customersTable .customer-actions-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 26px) !important;
        justify-content: center;
        gap: 2px !important;
        white-space: nowrap !important;
    }
    #customersTable .customer-actions-grid > .btn,
    #customersTable .customer-actions-grid > form {
        width: 26px !important;
        height: 26px !important;
        margin: 0 !important;
    }
    #customersTable .customer-actions-grid > .btn,
    #customersTable .customer-actions-grid > form .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 0 !important;
        font-size: .66rem !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .main-content .card:has(table),
    .main-content .table-responsive {
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .main-content table {
        width: max-content;
        min-width: 100%;
        table-layout: auto;
    }

    .main-content table th,
    .main-content table td {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
    }

    #categoriesTable {
        width: max-content !important;
        min-width: 100% !important;
        table-layout: auto !important;
    }

    #categoriesTable th:nth-child(n),
    #categoriesTable td:nth-child(n) {
        width: auto !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .staff-table-wrap,
    .main-content .table-responsive:has(#salesReportTable),
    .main-content .table-responsive:has(#ordersReportTable) {
        overflow-x: auto !important;
        overflow-y: hidden;
    }

    #staffTable {
        width: max-content !important;
        min-width: 760px !important;
        table-layout: auto !important;
    }

    #staffTable th,
    #staffTable td,
    #salesReportTable th,
    #salesReportTable td,
    #ordersReportTable th,
    #ordersReportTable td {
        white-space: nowrap !important;
        overflow: visible !important;
        overflow-wrap: normal !important;
        text-overflow: clip !important;
    }

    #salesReportTable,
    #ordersReportTable {
        width: max-content !important;
        min-width: 100% !important;
        table-layout: auto !important;
    }
}

@media (max-width: 767.98px) {
    #staffTable {
        width: 600px !important;
        min-width: 600px !important;
    }
    #staffTable th,
    #staffTable td {
        padding: 5px 6px !important;
        font-size: .68rem !important;
        line-height: 1.15;
    }
    #staffTable th { font-size: .64rem !important; }
    #staffTable td:last-child .btn {
        width: 24px;
        height: 24px;
        font-size: .72rem !important;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding: 12px !important;
    }

    .main-content .btn-toolbar,
    .main-content .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .main-content .modal-body {
        padding: 1rem;
    }
}