:root {
    --tdv-primary: #294c35;
    --tdv-primary-dark: #1c3525;
    --tdv-accent: #d5ad67;
    --tdv-accent-dark: #ae8244;
    --tdv-light: #f5f2e9;
    --tdv-surface: #ffffff;
    --tdv-muted: #6c757d;
    --tdv-border: #e6e9ea;

    /* Sidebar/nav accents (legacy variables kept for compatibility) */
    --tdv-nav-blue: #416a4b;
    --tdv-nav-blue-dark: #294c35;
    --tdv-nav-blue-soft: rgba(65, 106, 75, 0.10);
    --tdv-nav-blue-soft-hover: rgba(65, 106, 75, 0.16);
}

/* =========================================================
   GLOBAL PAGE FOUNDATION
========================================================= */
html,
body {
    min-height: 100%;
}

body {
    background: var(--tdv-light);
    color: #1f2937;
    font-size: 14px;
}

a {
    text-decoration: none;
}

/* =========================================================
   PAGE SHELL
========================================================= */
.page-shell {
    min-height: calc(100vh - 160px);
}

/* =========================================================
   FULL-WIDTH CONTENT LAYOUT (NO SIDEBAR)
========================================================= */
.content-full-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
}

.content-full {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* =========================================================
   STAFF / APP LAYOUT (WITH SIDEBAR)
   ---------------------------------------------------------
   Purpose:
   - Keep sidebar narrow on desktop and small screens
   - Prevent sidebar from becoming full-width on mobile
========================================================= */
.app-layout {
    display: grid;
    grid-template-columns: 188px minmax(0, 1fr) !important;
    gap: 0.65rem;
    align-items: start;
}

.app-main {
    min-width: 0;
    width: 100%;
}

/* Force fixed narrow sidebar width */
.app-layout > .app-sidebar {
    width: 188px !important;
    min-width: 188px !important;
    max-width: 188px !important;
}

/* =========================================================
   NAVBAR
========================================================= */
.app-fixed-header {
    position: sticky;
    top: 0;
    z-index: 9050;
}
.navbar-main {
    background: var(--tdv-primary);
    position: relative;
    z-index: 9000;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

/* ensure dropdowns appear above sidebars */
.navbar-main .dropdown-menu {
    z-index: 9100;
}

.navbar-topbar {
    font-size: 0.78rem;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.navbar-main .navbar-nav .nav-link {
    padding: 0.35rem 0.5rem;
    font-size: 0.86rem;
    white-space: nowrap;
}

.navbar-main .navbar-brand {
    margin-right: 0.5rem;
}

.navbar-main .dropdown-toggle::after {
    margin-left: 0.25rem;
}

.navbar-main .navbar-nav {
    gap: 0.1rem;
}

@media (min-width: 1800px) {
    .navbar-main .navbar-primary-links {
        margin-left: 5.5in;
    }
}

@media (min-width: 1400px) and (max-width: 1799.98px) {
    .navbar-main .navbar-primary-links {
        margin-left: 3.5in;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar-main .navbar-primary-links {
        margin-left: 2in;
    }
}

@media (min-width: 768px) {
    .navbar-main .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
        flex-wrap: wrap !important;
        row-gap: 0.15rem;
    }

    .navbar-main .navbar-toggler {
        display: none;
    }

    .navbar-main .navbar-nav .nav-link {
        font-size: 0.78rem;
        padding: 0.3rem 0.38rem;
    }
}

.store-search-form {
    min-width: 0;
}

.store-search-group {
    width: 100%;
    max-width: 420px;
}

.store-search-category,
.store-search-input,
.store-search-btn {
    font-size: 0.9rem;
}

.store-search-btn {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}

@media (min-width: 1200px) {
    .navbar-main .container-fluid {
        gap: 0.5rem;
    }
}

.navbar-topbar {
    background: #1f2937;
    color: #f8f9fa;
}

/* =========================================================
   NAVBAR MENU SIZE TUNING
========================================================= */
.navbar-main .nav-link {
    font-size: 0.82rem;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
    white-space: nowrap;
}

.navbar-main .nav-link i {
    font-size: 0.85rem;
}

.navbar-main .dropdown-toggle::after {
    margin-left: 0.2rem;
}

.navbar-main .navbar-nav {
    gap: 0.1rem;
}

.navbar-main .btn.btn-sm {
    font-size: 0.82rem;
    padding: 0.3rem 0.55rem;
}

/* =========================================================
   STORE SEARCH BAR (AMAZON-STYLE)
========================================================= */
.store-search-form {
    min-width: 420px;
    max-width: 650px;
    width: 100%;
}

.store-search-group {
    width: 100%;
    background: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.store-search-category {
    width: 150px;
    min-width: 150px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.store-search-divider {
    width: 1px;
    background: rgba(0, 0, 0, 0.15);
    display: inline-block;
}

.store-search-input {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-width: 220px;
}

.store-search-input:focus,
.store-search-category:focus {
    box-shadow: none;
}

.store-search-btn {
    border-radius: 0;
    border: 0;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* =========================================================
   BUTTONS
========================================================= */
.btn-primary {
    background: var(--tdv-primary);
    border-color: var(--tdv-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--tdv-primary-dark);
    border-color: var(--tdv-primary-dark);
}

.btn-warning {
    background: var(--tdv-accent);
    border-color: var(--tdv-accent);
    color: #212529;
}

.btn-warning:hover,
.btn-warning:focus {
    background: var(--tdv-accent-dark);
    border-color: var(--tdv-accent-dark);
    color: #212529;
}

/* =========================================================
   HERO SECTION
========================================================= */
.hero {
    background:
        linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
        url("../images/wood-bg.jpg");
    background-size: cover;
    background-position: center;
    color: white;
    padding: 4rem 0;
    margin-bottom: 0;
}

/* =========================================================
   REUSABLE CARD / SURFACE
========================================================= */
.section-card {
    background: var(--tdv-surface);
    border: 1px solid var(--tdv-border);
    border-radius: 0.9rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.04);
}

/* =========================================================
   FEATURE PRODUCTS CARD
========================================================= */
.feature-products-card {
    width: 100%;
}

/* =========================================================
   SIDEBAR SHELL
========================================================= */
.app-layout > .app-sidebar,
.app-sidebar {
    background: var(--tdv-surface);
    border: 1px solid var(--tdv-border);
    border-radius: 0.9rem;
    box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.04);
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sidebar-header,
.sidebar-footer {
    background: #fff;
}

.sidebar-header {
     padding: 0.55rem 0.65rem !important;
}

.sidebar-header .small {
    font-size: 0.72rem;
    line-height: 1.15;
}

.sidebar-footer {
    padding: 0.75rem !important;
}

/* =========================================================
   SIDEBAR BODY / GROUPS
========================================================= */
.sidebar-body {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.55rem 0.3rem;
}

.sidebar-group {
    margin-bottom: 0.45rem;
}

.sidebar-group-title {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #6b7280 !important;
    letter-spacing: 0.05em;
    padding: 0;
    margin: 0 0 0.15rem 0;
}

/* =========================================================
   SIDEBAR COLLAPSIBLE SECTIONS
========================================================= */
.app-sidebar .sidebar-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent !important;
    border: 0 !important;
    color: #6b7280 !important;
    text-align: left;
    border-radius: 0.6rem;
    transition: all 0.2s ease;
    padding: 0.38rem 0.5rem !important;
    font-size: 1rem;
    font-weight: 800;
    box-shadow: none !important;
    letter-spacing: 0.01em;
}

.app-sidebar .sidebar-section-toggle i {
    color: #6b7280 !important;
    font-size: 0.9rem;
}

.app-sidebar .sidebar-section-toggle:hover {
    background: rgba(107, 114, 128, 0.08) !important;
    color: #4b5563 !important;
}

.app-sidebar .sidebar-section-toggle:hover i {
    color: #4b5563 !important;
}

/* =========================================================
   SIDEBAR LINKS
========================================================= */
.app-sidebar .sidebar-link,
.app-sidebar a.sidebar-link,
.app-sidebar .sidebar-body a.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    width: 100%;
    padding: 0.42rem 0.58rem;
    border-radius: 0.62rem;
    color: var(--tdv-nav-blue) !important;
    margin-bottom: 0.08rem;
    transition: all 0.2s ease;
    line-height: 1.08;
    text-decoration: none !important;
    font-size: 0.76rem;
    font-weight: 500;
    font-style: italic;
    background: transparent;
}

.app-sidebar .sidebar-link i,
.app-sidebar a.sidebar-link i,
.app-sidebar .sidebar-body a.sidebar-link i {
    flex-shrink: 0;
    color: var(--tdv-nav-blue) !important;
    font-size: 0.78rem;
}

.app-sidebar .sidebar-link:hover,
.app-sidebar a.sidebar-link:hover,
.app-sidebar .sidebar-body a.sidebar-link:hover {
    background: var(--tdv-nav-blue-soft-hover) !important;
    color: var(--tdv-nav-blue-dark) !important;
    text-decoration: none !important;
}

.app-sidebar .sidebar-link:hover i,
.app-sidebar a.sidebar-link:hover i,
.app-sidebar .sidebar-body a.sidebar-link:hover i {
    color: var(--tdv-nav-blue-dark) !important;
}

.app-sidebar .sidebar-link.active,
.app-sidebar a.sidebar-link.active,
.app-sidebar .sidebar-body a.sidebar-link.active {
    background: var(--tdv-nav-blue-soft) !important;
    color: var(--tdv-nav-blue-dark) !important;
    font-weight: 700;
    font-style: italic;
}

.app-sidebar .sidebar-link.active i,
.app-sidebar a.sidebar-link.active i,
.app-sidebar .sidebar-body a.sidebar-link.active i {
    color: var(--tdv-nav-blue-dark) !important;
}

.app-sidebar .sidebar-group .ps-2 .sidebar-link,
.app-sidebar .sidebar-group .ps-2 a.sidebar-link {
    padding-left: 0.8rem;
}

/* =========================================================
   SIDEBAR ANIMATION HELPERS
========================================================= */
.transition-all {
    transition: all 0.2s ease;
}

.rotate-180 {
    transform: rotate(180deg);
}

/* =========================================================
   BREADCRUMBS
========================================================= */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 0;
}

.breadcrumb-item a {
    color: var(--tdv-primary);
}

.breadcrumb-item.active {
    color: var(--tdv-muted);
}

/* =========================================================
   MODAL
========================================================= */
.modal-dialog {
    margin-top: 5rem;
}

/* =========================================================
   OFFCANVAS / MINI CART
========================================================= */
.offcanvas-header {
    border-bottom: 1px solid var(--tdv-border);
}

.offcanvas-body {
    background: #fff;
}

/* =========================================================
   TOASTS / FLOATING ALERTS
========================================================= */
.toast-area {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2000;
    width: min(360px, calc(100vw - 2rem));
}

.alert-floating {
    border: 0;
    border-left: 4px solid currentColor;
}

/* =========================================================
   BADGES / SMALL UI HELPERS
========================================================= */
.badge-notify {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.65rem;
}

/* =========================================================
   CART COUNT ANIMATION
========================================================= */
.cart-bump {
    animation: bump 0.25s ease;
}

@keyframes bump {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.4);
    }
    100% {
        transform: scale(1);
    }
}

/* =========================================================
   FINAL STOREFRONT PRODUCT GRID
========================================================= */
.product-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: stretch;
}

.product-card-col {
    width: 100%;
    max-width: none;
    min-width: 0;
}

/* =========================================================
   PRODUCT CARD STYLING
========================================================= */
.product-store-card {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 100%;
    margin: 0;
    border-radius: 0.6rem;
    overflow: hidden;
}

.product-store-card .card-body,
.product-card-col .card-body {
    padding: 0.75rem;
}

/* =========================================================
   COMPACT PRODUCT CARD TEXT
========================================================= */
.product-card-body-compact {
    padding: 0.65rem !important;
}

.product-card-title-compact {
    font-size: 0.77rem;
    line-height: 1.18;
    min-height: 1.7rem;
    margin-bottom: 0.25rem !important;
}

.product-meta-compact {
    font-size: 0.68rem;
    line-height: 1.18;
    margin-bottom: 0.22rem !important;
}

.product-description-compact {
    font-size: 0.64rem;
    line-height: 1.18;
    min-height: 1.8rem;
    margin-bottom: 0.32rem !important;
}

.product-price-compact {
    font-size: 0.86rem;
    line-height: 1.1;
}

.product-badge-compact {
    font-size: 0.55rem;
    padding: 0.24em 0.42em;
}

.product-store-card .small.mb-1,
.product-store-card .small.mb-2,
.product-store-card .small.mb-3 {
    margin-bottom: 0.2rem !important;
}

.product-price-wrap-compact {
    margin-bottom: 0.3rem !important;
}

/* =========================================================
   PRODUCT CARD ACTIONS
========================================================= */
.product-qty-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    margin-bottom: 0.35rem !important;
}

.qty-btn {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
}

.qty-input {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
}

.product-card-links {
    margin-top: 0.35rem !important;
    min-height: 24px;
}

.product-card-links a.small {
    color: var(--tdv-primary);
    font-weight: 500;
}

.product-card-links a.small:hover {
    color: var(--tdv-primary-dark);
    text-decoration: underline;
}

.product-store-card .btn-sm {
    border-radius: 0.55rem;
}

.product-store-card .btn-warning.btn-sm {
    min-width: 88px;
}

/* =========================================================
   FOOTER
========================================================= */
footer a:hover {
    color: var(--tdv-primary-dark) !important;
}

/* =========================================================
   RESPONSIVE RULES
   ---------------------------------------------------------
   Purpose:
   - Keep sidebar narrow on tablets and phones
   - Do NOT stack sidebar above content
========================================================= */
@media (max-width: 991.98px) {
    .app-layout {
        grid-template-columns: 188px minmax(0, 1fr) !important;
        gap: 0.5rem;
    }

    .app-layout > .app-sidebar {
        width: 188px !important;
        min-width: 188px !important;
        max-width: 188px !important;
    }

    .app-sidebar {
        position: sticky;
        top: 0.5rem;
        max-height: calc(100vh - 1rem);
        overflow: hidden;
    }

    .sidebar-body {
        max-height: calc(100vh - 145px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    .page-shell {
        min-height: auto;
    }

    .store-search-form {
        max-width: 100%;
    }

    .store-search-category {
        max-width: 110px;
        min-width: 90px;
        font-size: 0.9rem;
    }

    .pos-cart-sticky {
        position: static;
        top: auto;
    }
}

/* Prevent Alpine-controlled sections from appearing before Alpine starts. */
[x-cloak] {
  display: none !important;
}

#page-content {
  min-height: 55vh;
}

/* Normal links remain normal Django navigations. Supporting browsers use a
   short native document transition without JavaScript interception. */
@view-transition {
  navigation: auto;
}

.app-fixed-header {
  view-transition-name: app-header;
}

#page-content {
  view-transition-name: app-content;
}

::view-transition-old(app-header),
::view-transition-new(app-header) {
  animation-duration: 80ms;
}

::view-transition-old(app-content),
::view-transition-new(app-content) {
  animation-duration: 120ms;
}

@media (max-width: 575.98px) {
    .app-layout {
        grid-template-columns: 168px minmax(0, 1fr) !important;
        gap: 0.45rem;
    }

    .app-layout > .app-sidebar {
        width: 168px !important;
        min-width: 168px !important;
        max-width: 168px !important;
    }

    .app-sidebar {
        border-radius: 0.8rem;
    }

    .sidebar-body {
        max-height: calc(100vh - 140px);
    }

}

/* =========================================================
   SINGLE-COLUMN PRODUCT DETAIL LAYOUT
========================================================= */
.product-detail-page {
    max-width: 760px;
    margin: 0 auto;
}

.product-detail-card-single {
    max-width: 760px;
    margin: 0 auto;
}

.product-detail-actions-bar {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0.9rem;
}

.product-detail-meta-wrap p:last-child {
    margin-bottom: 0;
}

.product-detail-description h6 {
    font-size: 0.9rem;
    font-weight: 700;
}

.product-detail-description p {
    font-size: 0.92rem;
    line-height: 1.45;
}

.detail-stat-card {
    padding: 0.7rem 0.85rem;
}

.detail-action-price {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

@media (max-width: 991.98px) {
    .product-detail-page,
    .product-detail-card-single,
    .product-detail-actions-bar {
        max-width: 100%;
    }
}

/* =========================================================
   STANDARD POS RECEIPT PAGE
========================================================= */
.pos-receipt-page {
    max-width: 980px;
    margin: 0 auto;
}

.pos-receipt-card {
    max-width: 860px;
    margin: 0 auto;
    border-radius: 1rem;
}

.receipt-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.45rem;
}

.receipt-meta-label {
    color: var(--tdv-muted);
    font-size: 0.9rem;
}

.receipt-meta-value {
    font-weight: 600;
    text-align: right;
}

.receipt-items-table thead th {
    font-size: 0.85rem;
    color: var(--tdv-muted);
    border-bottom-width: 1px;
}

.receipt-items-table tbody td {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    vertical-align: top;
}

.receipt-section-card {
    background: #fff;
    border: 1px solid var(--tdv-border);
    border-radius: 0.85rem;
    padding: 1rem;
    height: 100%;
}

.receipt-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.receipt-grand-total .receipt-meta-label,
.receipt-grand-total .receipt-meta-value {
    font-size: 1rem;
    font-weight: 700;
}

/* =========================================================
   PRINT STYLES FOR STANDARD RECEIPT
========================================================= */
@media print {
    .navbar,
    .navbar-topbar,
    .app-sidebar,
    .toast-area,
    footer,
    .btn,
    .offcanvas,
    .modal {
        display: none !important;
    }

    .page-shell,
    .container,
    .container-fluid,
    .pos-receipt-page {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pos-receipt-card {
        box-shadow: none !important;
        border: 0 !important;
        max-width: 100% !important;
    }

    body {
        background: #fff !important;
    }
}

/* =========================================================
   POS PRODUCT CARD
========================================================= */
.pos-product-card {
    border-radius: 0.9rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pos-product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08) !important;
}

/* =========================================================
   POS HOME PAGE
========================================================= */
.pos-home-page .section-card {
    border-radius: 1rem;
}

.pos-cart-sticky {
    position: sticky;
    top: 1rem;
}


.timber-content-shell {
        min-height: 480px;
        position: relative;
    }

    .htmx-request.timber-content-shell,
    .timber-content-shell.htmx-request {
        opacity: 0.75;
        transition: opacity 0.15s ease;
    }

    .htmx-settling.timber-content-shell,
    .timber-content-shell.htmx-settling {
        opacity: 1;
        transition: opacity 0.15s ease;
    }

    .htmx-indicator {
        display: none;
    }
    .htmx-request .htmx-indicator,
    .htmx-request.htmx-indicator {
        display: block;
    }
 



/* =========================================================
   FIXED NAVBAR ONLY - KEEP CURRENT COLORS
   Keep previous layout. Do not float sidebar over page.
========================================================= */

:root {
    --app-header-height: 92px;
}

/* Keep the existing topbar + green navbar fixed */
.app-fixed-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 5000 !important;
}

/* Keep your original colors */
.app-fixed-header .navbar-topbar {
    background: #1f2937 !important;
    color: #f8f9fa !important;
}

.app-fixed-header .navbar-main {
    background: var(--tdv-primary) !important;
}

/* Push page content below fixed navbar */
.page-shell {
    padding-top: var(--app-header-height) !important;
    min-height: 100vh !important;
}

/* Keep dropdowns above content */
.dropdown-menu {
    z-index: 5050 !important;
}

/* Keep modal/offcanvas above navbar */
.offcanvas,
.modal {
    z-index: 6000 !important;
}

.offcanvas-backdrop,
.modal-backdrop {
    z-index: 5900 !important;
}

/* Django messages below fixed navbar */
.django-message-container {
    position: fixed !important;
    top: calc(var(--app-header-height) + 10px) !important;
    right: 20px !important;
    z-index: 7000 !important;
    max-width: 420px !important;
    margin-top: 0 !important;
}

/* =========================================================
   SIDEBAR — RESTORE PREVIOUS LAYOUT
   Sidebar stays inside grid, does not overlay page.
   It remains visible while page content scrolls.
========================================================= */

.app-layout {
    display: grid !important;
    grid-template-columns: 188px minmax(0, 1fr) !important;
    gap: 0.65rem !important;
    align-items: start !important;
}

.app-layout > .app-sidebar {
    width: 188px !important;
    min-width: 188px !important;
    max-width: 188px !important;
}

.app-sidebar {
    position: sticky !important;
    top: calc(var(--app-header-height) + 1rem) !important;
    left: auto !important;

    width: 188px !important;
    min-width: 188px !important;
    max-width: 188px !important;

    height: auto !important;
    max-height: calc(100vh - var(--app-header-height) - 2rem) !important;

    overflow: hidden !important;
    z-index: 1000 !important;
}

/* Only sidebar body scrolls internally if the menu is long */
.app-sidebar .sidebar-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: calc(100vh - var(--app-header-height) - 145px) !important;
}

/* Main content stays in normal grid position */
.app-main {
    margin-left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* POS sticky cart should respect fixed navbar */
.pos-cart-sticky {
    top: calc(var(--app-header-height) + 1rem) !important;
}

/* POS: focused two-pane sales workspace */
.pos-home-page { max-width: 1540px; margin: 0 auto; }
.pos-command-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.pos-live-dot { width:.55rem; height:.55rem; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.12); }
.pos-warehouse-select { width:auto; max-width:190px; padding-top:.15rem; padding-bottom:.15rem; }
.pos-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,390px); gap:1rem; align-items:start; }
.pos-catalog { overflow:hidden; }
.pos-search { display:flex; align-items:center; gap:.8rem; margin:1rem; padding:.7rem .9rem; border:3px solid #142b4a; border-radius:.75rem; background:#fff; box-shadow:0 .2rem .65rem rgba(20,43,74,.16); transition:border-color .15s,box-shadow .15s; }
.pos-search:focus-within { border-color:#0b3767; box-shadow:0 0 0 .22rem rgba(20,43,74,.18); }
.pos-search>i { display:grid; place-items:center; flex:0 0 2rem; width:2rem; height:2rem; border-radius:50%; color:#142b4a; background:rgba(20,43,74,.10); font-size:1.05rem; }
.pos-search-field { flex:1; min-width:0; }
.pos-search-field label { display:block; margin-bottom:.05rem; color:#355743; font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.pos-search input { display:block; border:0; outline:0; min-width:0; width:100%; padding:0; color:#172033; font-size:1rem; background:transparent; }
.pos-search input::placeholder { color:#7a8491; opacity:1; }
.guest-report-dashboard{max-width:1500px;margin:0 auto}.guest-report-filters{display:grid;grid-template-columns:repeat(5,minmax(135px,1fr)) auto auto;gap:.7rem;align-items:end}.guest-report-filters label{display:block;margin-bottom:.2rem;font-size:.7rem;font-weight:700;color:#56635b}.guest-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem}.guest-kpi-grid article{padding:1rem;border:1px solid #dfe6e1;border-radius:.8rem;background:#fff}.guest-kpi-grid span,.guest-kpi-grid small{display:block;color:#69746d;font-size:.72rem}.guest-kpi-grid strong{display:block;margin:.25rem 0;color:#182338;font-size:1.25rem}.guest-report-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.guest-report-panel{min-width:0;padding:1rem;border:1px solid #dfe6e1;border-radius:.85rem;background:#fff;box-shadow:0 .25rem .8rem rgba(22,40,31,.06)}.guest-report-panel.guest-report-wide{grid-column:span 2}.guest-report-panel header{display:flex;justify-content:space-between;align-items:start;gap:.5rem;margin-bottom:.9rem}.guest-report-panel h3{margin:0;color:#1d2939;font-size:.92rem}.guest-report-panel header>span{color:#768078;font-size:.66rem;text-align:right}.guest-rank{margin-bottom:.75rem}.guest-rank>div:first-child{display:flex;justify-content:space-between;gap:.7rem;font-size:.75rem}.guest-rank>div:first-child span{color:#56635b}.guest-rank>div:last-child{height:7px;margin-top:.28rem;overflow:hidden;border-radius:99px;background:#e8eeea}.guest-rank i{display:block;height:100%;border-radius:inherit;background:#2b6545}.guest-empty{margin:1rem 0;color:#778078;font-size:.78rem}.guest-line-wrap{min-width:470px;overflow:hidden}.guest-line-wrap svg{display:block;width:100%;height:190px;overflow:visible}.guest-line-wrap svg line{stroke:#e5ebe7;stroke-width:1;vector-effect:non-scaling-stroke}.guest-line-wrap polyline{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.guest-line-wrap polyline.revenue{stroke:#245638}.guest-line-wrap polyline.paid{stroke:#d2a64e}.guest-line-wrap circle{stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke}.guest-line-wrap .revenue-dot{fill:#245638}.guest-line-wrap .paid-dot{fill:#d2a64e}.guest-line-wrap>div{display:flex;justify-content:space-between;gap:.35rem}.guest-line-wrap>div span{flex:1;text-align:center;color:#5d675f;font-size:.67rem}.guest-line-wrap>div small{display:block}.guest-chart-legend{text-align:center;margin:.75rem 0 0;color:#667168;font-size:.72rem}.guest-chart-legend i{display:inline-block;width:10px;height:10px;margin:0 .25rem 0 .7rem;border-radius:50%}.guest-chart-legend i.revenue{background:#245638}.guest-chart-legend i.paid{background:#d2a64e}
@media(max-width:1199.98px){.guest-report-filters{grid-template-columns:repeat(3,minmax(150px,1fr))}.guest-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.guest-report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:767.98px){.guest-report-filters,.guest-kpi-grid,.guest-report-grid{grid-template-columns:1fr}.guest-report-panel.guest-report-wide{grid-column:auto}.guest-report-panel{overflow:auto}}
.pos-product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.85rem; }
.pos-product-card { border:1px solid var(--tdv-border); border-radius:.8rem; overflow:hidden; background:#fff; transition:border-color .15s,box-shadow .15s; }
.pos-product-card:hover { transform:none; border-color:rgba(13,107,63,.4); box-shadow:0 .4rem 1rem rgba(15,23,42,.08)!important; }
.pos-product-card.is-unavailable { opacity:.58; }
.pos-product-image { height:112px; display:flex; align-items:center; justify-content:center; position:relative; background:#f1f5f2; color:#94a3b8; font-size:2rem; }
.pos-product-image img { width:100%; height:100%; object-fit:contain; background:#f8f8f6; }
.pos-stock-badge { position:absolute; left:.55rem; bottom:.55rem; padding:.2rem .45rem; border-radius:99px; background:rgba(255,255,255,.92); color:#475569; font-size:.68rem; font-weight:600; }
.pos-product-info { padding:.75rem; }
.pos-product-info h3 { font-size:.9rem; line-height:1.3; margin:0 0 .2rem; min-height:2.35em; }
.pos-product-footer { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.75rem; }
.pos-product-footer>strong { font-size:1rem; color:var(--tdv-primary); }
.pos-sale-panel { overflow:hidden; }
.pos-cart-header { display:flex; align-items:center; justify-content:space-between; padding:1rem; border-bottom:1px solid var(--tdv-border); }
.pos-cart-total { font-size:1.3rem; font-weight:750; color:var(--tdv-primary); }
.pos-cart-items { max-height:310px; overflow:auto; }
.pos-cart-item { display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; align-items:center; gap:.65rem; padding:.8rem 1rem; border-bottom:1px solid #edf0f2; }
.pos-qty-control { display:flex; align-items:center; border:1px solid #dce1e5; border-radius:.5rem; overflow:hidden; }
.pos-qty-control input { width:42px; height:30px; border:0; text-align:center; padding:0; }
.pos-qty-control button { width:30px; height:30px; border:0; background:#f8fafc; color:var(--tdv-primary); }
.pos-checkout { padding:1rem; background:#fff; }
.pos-options { border-bottom:1px solid var(--tdv-border); padding:.8rem 0; }
.pos-options summary { cursor:pointer; display:flex; align-items:center; justify-content:space-between; font-weight:600; list-style:none; }
.pos-options summary::-webkit-details-marker { display:none; }
.pos-totals { padding:1rem 0; }
.pos-totals>div { display:flex; justify-content:space-between; margin-bottom:.45rem; font-size:.85rem; }
.pos-grand-total { margin-top:.8rem!important; padding-top:.8rem; border-top:1px solid var(--tdv-border); font-size:1.15rem!important; }
.pos-payment-methods { display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem; }
.pos-payment-methods input { position:absolute; opacity:0; }
.pos-payment-methods span { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; min-height:58px; border:1px solid #dce1e5; border-radius:.55rem; font-size:.7rem; cursor:pointer; }
.pos-payment-methods input:checked+span { border-color:var(--tdv-primary); background:rgba(13,107,63,.08); color:var(--tdv-primary); font-weight:700; }
.pos-payment-methods i { font-size:1rem; }
.pos-empty-cart,.pos-empty-state { min-height:240px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; color:#64748b; text-align:center; }
.pos-empty-cart i,.pos-empty-state i { font-size:2rem; color:#94a3b8; }
.min-w-0 { min-width:0; }
@media(max-width:1199.98px){.pos-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pos-workspace{grid-template-columns:minmax(0,1fr) 340px}}
@media(max-width:991.98px){.pos-workspace{grid-template-columns:1fr}.pos-cart-sticky{position:static!important}.pos-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767.98px){.pos-command-bar{align-items:flex-start}.pos-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pos-cart-item{grid-template-columns:minmax(0,1fr) auto auto}.pos-cart-item>strong{grid-column:2}.pos-qty-control{grid-column:1/3}.pos-product-image{height:90px}}

/* Customer storefront and checkout */
.storefront-intro{display:flex;align-items:center;justify-content:space-between;gap:1rem}.storefront-intro h1{font-size:clamp(1.6rem,3vw,2.4rem);margin:.2rem 0}.storefront-intro p{margin:0;color:rgba(255,255,255,.82)}
.storefront-search{display:flex;align-items:center;gap:.7rem;background:#fff;border-radius:.75rem;padding:.45rem .45rem .45rem 1rem;max-width:760px}.storefront-search i{color:#64748b}.storefront-search input{border:0;outline:0;min-width:0;flex:1;font-size:1rem}.storefront-promises{display:flex;gap:1.25rem;flex-wrap:wrap;margin-top:1rem;font-size:.82rem;color:rgba(255,255,255,.88)}.storefront-promises i{margin-right:.35rem;color:#f4cf58}
.storefront-search-top{width:50%;max-width:760px;margin-left:auto;margin-right:auto;position:relative;top:auto;z-index:20;box-shadow:0 .35rem 1.2rem rgba(15,23,42,.14)}.store-add-success{padding:.65rem;border:1px solid #bbdfc8;border-radius:.65rem;background:#f0faf3;color:#14532d;font-size:.82rem;font-weight:600}
.customer-checkout{max-width:none;margin:0}.checkout-heading{border-bottom:1px solid var(--tdv-border);padding-bottom:.65rem}.checkout-heading h1{font-size:1.35rem;margin:.15rem 0}.checkout-heading p,.checkout-section-title p{color:#64748b;margin:0}.checkout-step{color:var(--tdv-primary);font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em}.checkout-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}.checkout-section{padding:.85rem 0;border-bottom:1px solid var(--tdv-border)}.checkout-section:nth-of-type(3),.checkout-form-grid>.checkout-order-total,.checkout-form-grid>.checkout-submit,.checkout-form-grid>p{grid-column:1/-1}.checkout-section-title{display:flex;gap:.55rem;align-items:flex-start;margin-bottom:.65rem}.checkout-section-title>span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--tdv-primary);color:#fff;font-size:.75rem;font-weight:700;flex:0 0 auto}.checkout-section-title h2{font-size:.95rem;margin:0}.checkout-section-title p{font-size:.74rem}.checkout-section .form-label{font-size:.78rem;margin-bottom:.2rem}.checkout-section .form-control{font-size:.82rem;padding:.38rem .55rem}.checkout-section .form-text{font-size:.68rem}.checkout-choice-grid{display:grid;gap:.45rem}.checkout-choice-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.checkout-choice-grid.payments{grid-template-columns:repeat(5,minmax(0,1fr))}.checkout-choice-grid label{min-width:0}.checkout-choice-grid input{position:absolute;opacity:0}.checkout-choice-grid label>span{display:flex;flex-direction:column;gap:.1rem;height:100%;padding:.55rem;border:1px solid #dce2e5;border-radius:.6rem;cursor:pointer;background:#fff;font-size:.76rem}.checkout-choice-grid label>span i{font-size:1rem;color:var(--tdv-primary)}.checkout-choice-grid label>span small{color:#64748b;font-size:.66rem;line-height:1.2}.checkout-choice-grid input:checked+span{border:2px solid var(--tdv-primary);padding:calc(.55rem - 1px);background:rgba(13,107,63,.05)}.checkout-submit{margin-top:.75rem}.store-empty{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem}.store-empty i{font-size:2rem;color:#94a3b8}
.checkout-order-total{display:flex;justify-content:space-between;align-items:center;padding:.7rem 0 0;font-size:1rem}.checkout-order-total strong{font-size:1.2rem;color:var(--tdv-primary)}
.checkout-summary-column>.section-card{position:sticky;top:calc(var(--app-header-height) + .75rem)}
@media(min-width:1600px){.product-card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:767.98px){.storefront-intro{align-items:flex-start;flex-direction:column}.storefront-search,.storefront-search-top{width:100%;max-width:none}.product-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.checkout-form-grid{grid-template-columns:1fr}.checkout-section:nth-of-type(3),.checkout-form-grid>.checkout-order-total,.checkout-form-grid>.checkout-submit,.checkout-form-grid>p{grid-column:auto}.checkout-choice-grid.payments{grid-template-columns:repeat(3,minmax(0,1fr))}.checkout-summary-column>.section-card{position:static}}
@media(max-width:479.98px){.product-card-grid{grid-template-columns:1fr}.checkout-choice-grid.two,.checkout-choice-grid.payments{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Compact, centered customer checkout */
.checkout-page-layout {
    max-width: 1380px;
    margin-left: auto;
    margin-right: auto;
    align-items: start;
}

.checkout-page-layout .customer-checkout {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem !important;
}

.checkout-page-layout .checkout-heading {
    padding-bottom: .45rem;
}

.checkout-page-layout .checkout-heading h1 {
    font-size: 1.15rem;
}

.checkout-page-layout .checkout-heading p,
.checkout-page-layout .checkout-section-title p {
    font-size: .7rem;
}

.checkout-page-layout .checkout-section {
    padding: .6rem 0;
}

.checkout-page-layout .checkout-section-title {
    margin-bottom: .45rem;
}

.checkout-page-layout .checkout-section-title > span {
    width: 20px;
    height: 20px;
    font-size: .65rem;
}

.checkout-page-layout .checkout-section-title h2 {
    font-size: .85rem;
}

.checkout-page-layout .checkout-choice-grid label > span {
    min-height: 58px;
    padding: .4rem .45rem;
    justify-content: center;
    font-size: .7rem;
}

.checkout-page-layout .checkout-choice-grid label > span i {
    font-size: .82rem;
}

.checkout-page-layout .checkout-choice-grid label > span small {
    font-size: .6rem;
}

.checkout-page-layout .checkout-choice-grid input:checked + span {
    padding: calc(.4rem - 1px) calc(.45rem - 1px);
}

.checkout-page-layout .checkout-section .form-control {
    min-height: 32px;
    padding: .28rem .45rem;
    font-size: .76rem;
}

.checkout-page-layout textarea.form-control {
    min-height: 34px;
}

.checkout-page-layout #payment-note {
    padding: .45rem .6rem;
    font-size: .68rem !important;
}

.checkout-page-layout .checkout-order-total {
    padding: .55rem 0;
    font-size: .9rem;
}

.checkout-page-layout .checkout-submit {
    min-height: 36px;
    padding: .4rem .75rem;
    font-size: .86rem;
}

@media (max-width: 1199.98px) {
    .checkout-page-layout .customer-checkout { max-width: none; }
}

@media (max-width: 767.98px) {
    .checkout-page-layout { max-width: 680px; }
    .checkout-page-layout .customer-checkout { padding: .85rem !important; }
    .checkout-page-layout .checkout-choice-grid label > span { min-height: 54px; }
}

/* Keep checkout actions compact instead of stretching edge to edge. */
.checkout-page-layout {
    max-width: 1180px;
    padding-left: 1rem;
    padding-right: 1rem;
}

.checkout-page-layout .customer-checkout {
    max-width: 900px;
}

.checkout-page-layout .checkout-choice-grid.two {
    width: min(100%, 520px);
    margin-left: auto;
    margin-right: auto;
}

.checkout-page-layout .checkout-choice-grid.payments,
.checkout-page-layout #payment-note {
    width: min(100%, 720px);
    margin-left: auto;
    margin-right: auto;
}

.checkout-page-layout .checkout-choice-grid label > span {
    min-height: 44px;
    padding: .25rem .4rem;
}

.checkout-page-layout .checkout-choice-grid input:checked + span {
    padding: calc(.25rem - 1px) calc(.4rem - 1px);
}

.checkout-page-layout .checkout-order-total {
    width: min(100%, 720px);
    margin-left: auto;
    margin-right: auto;
}

.checkout-page-layout .checkout-submit {
    width: min(100%, 420px) !important;
    margin-left: auto;
    margin-right: auto;
}

.checkout-page-layout .checkout-submit + p {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767.98px) {
    .checkout-page-layout {
        padding-left: .35rem;
        padding-right: .35rem;
    }

    .checkout-page-layout .checkout-choice-grid label > span {
        min-height: 48px;
    }
}

/* Premium customer checkout visual system. */
.checkout-shell {
    --checkout-forest: #214f35;
    --checkout-forest-dark: #173b28;
    --checkout-gold: #d9ad58;
    --checkout-cream: #f7f2e8;
    --checkout-ink: #1f2937;
    --checkout-muted: #657268;
    padding: clamp(.75rem, 2vw, 1.5rem);
    margin: -.5rem;
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 100% 0, rgba(217,173,88,.15), transparent 30rem),
        linear-gradient(145deg, #faf8f2 0%, var(--checkout-cream) 100%);
}

.checkout-shell .checkout-page-layout {
    max-width: 1440px;
    padding: 0;
}

.checkout-shell .section-card {
    border: 1px solid rgba(33,79,53,.13);
    border-radius: 1rem;
    box-shadow: 0 1rem 2.6rem rgba(31,41,55,.08);
}

.checkout-shell .customer-checkout {
    max-width: none;
    padding: clamp(1rem, 2.2vw, 1.7rem) !important;
    border-top: 4px solid var(--checkout-forest);
    overflow: hidden;
}

.checkout-shell .checkout-heading {
    position: relative;
    padding: 0 0 1rem 3.25rem;
    border-bottom: 1px solid #e2e8e3;
}

.checkout-shell .checkout-heading::before {
    content: "\f52f";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: .1rem;
    display: grid;
    place-items: center;
    width: 2.55rem;
    height: 2.55rem;
    border-radius: .75rem;
    color: #fff;
    background: linear-gradient(145deg, var(--checkout-forest), var(--checkout-forest-dark));
    box-shadow: 0 .45rem 1rem rgba(33,79,53,.2);
}

.checkout-shell .checkout-heading h1 {
    color: var(--checkout-ink);
    font-size: 1.45rem;
    font-weight: 750;
    letter-spacing: -.02em;
    margin: .15rem 0;
}

.checkout-shell .checkout-step {
    color: var(--checkout-forest);
    letter-spacing: .09em;
}

.checkout-shell .checkout-form-grid { gap: 0 1.35rem; }

.checkout-shell .checkout-section {
    padding: 1rem 0;
    border-color: #e7ebe8;
}

/* Present each checkout step as a separate information group. */
.checkout-shell .checkout-section-customer,
.checkout-shell .checkout-section-fulfillment,
.checkout-shell .checkout-section-payment {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #dce4df;
    border-radius: .85rem;
    background: linear-gradient(180deg, #fff 0%, #fbfcfb 100%);
    box-shadow: 0 .25rem .7rem rgba(31, 41, 55, .035);
}

.checkout-shell .checkout-section-customer {
    border-top: 3px solid var(--checkout-forest);
}

.checkout-shell .checkout-section-fulfillment {
    border-left: 3px solid var(--checkout-gold);
}

.checkout-shell .checkout-section-payment {
    border-top: 3px solid var(--checkout-gold);
}

.checkout-shell .checkout-section-title { margin-bottom: .75rem; }

.checkout-shell .checkout-section-title > span {
    width: 1.7rem;
    height: 1.7rem;
    border: 2px solid rgba(217,173,88,.68);
    background: var(--checkout-forest);
    box-shadow: 0 .25rem .6rem rgba(33,79,53,.14);
}

.checkout-shell .checkout-section-title h2 {
    color: var(--checkout-ink);
    font-size: .96rem;
    font-weight: 750;
}

.checkout-shell .checkout-section-title p,
.checkout-shell .checkout-heading p { color: #607087; }

.checkout-shell .checkout-section .form-label {
    color: #34423a;
    font-weight: 650;
}

.checkout-shell .checkout-section .form-control {
    min-height: 2.45rem;
    padding: .48rem .65rem;
    border: 1px solid #d7dfda;
    border-radius: .6rem;
    background: #fcfdfc;
    color: var(--checkout-ink);
    box-shadow: inset 0 1px 2px rgba(15,23,42,.02);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.checkout-shell .checkout-section .form-control:focus {
    border-color: var(--checkout-gold);
    background: #fff;
    box-shadow: 0 0 0 .2rem rgba(217,173,88,.18);
}

.checkout-shell .checkout-choice-grid.two { width: 100%; }
.checkout-shell .checkout-choice-grid.payments,
.checkout-shell #payment-note { width: 100%; }

.checkout-shell .checkout-choice-grid { gap: .65rem; }

.checkout-shell .checkout-choice-grid label > span {
    position: relative;
    justify-content: flex-start;
    min-height: 4.7rem;
    padding: .7rem;
    border: 1px solid #dce3df;
    border-radius: .75rem;
    background: linear-gradient(180deg, #fff 0%, #fbfcfb 100%);
    box-shadow: 0 .2rem .55rem rgba(31,41,55,.035);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.checkout-shell .checkout-choice-grid label > span:hover {
    transform: translateY(-2px);
    border-color: rgba(33,79,53,.45);
    box-shadow: 0 .55rem 1rem rgba(31,41,55,.08);
}

.checkout-shell .checkout-choice-grid label > span i {
    color: var(--checkout-forest);
    font-size: 1.05rem;
}

.checkout-shell .checkout-choice-grid label > span strong { color: var(--checkout-ink); }

.checkout-shell .checkout-choice-grid input:focus-visible + span {
    outline: 3px solid rgba(217,173,88,.38);
    outline-offset: 2px;
}

.checkout-shell .checkout-choice-grid input:checked + span {
    padding: calc(.7rem - 1px);
    border: 2px solid var(--checkout-forest);
    background: linear-gradient(145deg, #f0f7f2 0%, #fffdf7 100%);
    box-shadow: 0 .55rem 1.1rem rgba(33,79,53,.1);
}

.checkout-shell .checkout-choice-grid input:checked + span::after {
    content: "\f26a";
    font-family: "bootstrap-icons";
    position: absolute;
    top: .5rem;
    right: .55rem;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    color: #fff;
    background: var(--checkout-forest);
    border-radius: 50%;
    font-size: .7rem;
}

.checkout-shell .checkout-choice-grid input:disabled + span {
    cursor: not-allowed;
    opacity: .55;
    background: #f4f5f4;
    box-shadow: none;
}

.checkout-shell #payment-note {
    padding: .65rem .8rem;
    border: 1px solid rgba(217,173,88,.4) !important;
    border-left: 4px solid var(--checkout-gold) !important;
    border-radius: .55rem;
    background: #fffcf4;
    color: #4b5563;
}

.checkout-shell .checkout-order-total {
    width: 100%;
    margin-top: .85rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(33,79,53,.16);
    border-radius: .75rem;
    background: linear-gradient(90deg, #f1f7f3 0%, #fffaf0 100%);
}

.checkout-shell .checkout-order-total strong {
    color: var(--checkout-forest);
    font-size: 1.45rem;
}

.checkout-shell .checkout-submit {
    min-height: 3rem;
    width: min(100%, 560px) !important;
    margin-top: .85rem;
    border: 0;
    border-radius: .7rem;
    background: linear-gradient(135deg, var(--checkout-forest) 0%, var(--checkout-forest-dark) 100%);
    box-shadow: 0 .7rem 1.25rem rgba(33,79,53,.22);
    font-weight: 750;
    letter-spacing: .01em;
}

.checkout-shell .checkout-submit:hover,
.checkout-shell .checkout-submit:focus {
    background: linear-gradient(135deg, #2c6645 0%, var(--checkout-forest) 100%);
    transform: translateY(-1px);
}

.checkout-assurance {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .55rem 1.15rem;
    margin-top: .75rem;
    color: var(--checkout-muted);
    font-size: .67rem;
}

.checkout-assurance i { color: var(--checkout-forest); margin-right: .2rem; }

.checkout-shell .checkout-summary-card {
    border-top: 4px solid var(--checkout-gold);
    background: linear-gradient(180deg, #fff 0%, #fffdf8 100%);
}

.checkout-shell .checkout-summary-card h2 {
    color: var(--checkout-ink);
    font-size: 1.2rem !important;
    font-weight: 750;
}

.checkout-count-badge {
    min-width: 1.7rem;
    padding: .42rem .5rem;
    color: #fff;
    background: var(--checkout-forest);
    border-radius: 999px;
}

.checkout-shell .checkout-summary-items { max-height: 380px; overflow-y: auto; }

.checkout-shell .checkout-summary-items > div {
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
    border-color: #e8ebe9 !important;
}

.checkout-shell .checkout-summary-product-name {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.checkout-shell .checkout-summary-items img {
    width: 52px !important;
    height: 52px !important;
    border-radius: .6rem !important;
    border-color: #e1e6e3 !important;
    background: #f8faf8 !important;
}

.checkout-summary-total {
    border-top: 1px solid #dce3df;
}

.checkout-shell .checkout-summary-total span:last-child {
    color: var(--checkout-forest);
    font-size: 1.45rem !important;
}

.checkout-shell .checkout-summary-card .btn {
    border-radius: .6rem;
    font-weight: 650;
}

@media (max-width: 1199.98px) {
    .checkout-shell .checkout-page-layout { max-width: 1080px; }
    .checkout-shell .checkout-choice-grid.payments { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 767.98px) {
    .checkout-shell { padding: .55rem; margin: -.35rem; border-radius: .85rem; }
    .checkout-shell .checkout-page-layout { padding: 0; }
    .checkout-shell .customer-checkout { padding: 1rem !important; }
    .checkout-shell .checkout-heading { padding-left: 2.8rem; }
    .checkout-shell .checkout-heading::before { width: 2.2rem; height: 2.2rem; }
    .checkout-shell .checkout-heading h1 { font-size: 1.2rem; }
    .checkout-shell .checkout-choice-grid label > span { min-height: 4.3rem; }
    .checkout-shell .checkout-section-fulfillment {
        border-left: 1px solid #dce4df;
        border-top: 3px solid var(--checkout-gold);
    }
    .checkout-assurance { grid-column: auto; }
}

@media (max-width: 479.98px) {
    .checkout-shell .checkout-choice-grid.two,
    .checkout-shell .checkout-choice-grid.payments { grid-template-columns: 1fr 1fr; }
    .checkout-shell .checkout-choice-grid label > span { padding: .6rem; }
    .checkout-shell .checkout-choice-grid input:checked + span { padding: calc(.6rem - 1px); }
}

/* Center and compact operational dashboards on wide displays. */
.compact-operations-page {
    padding-left: clamp(.5rem, 2vw, 1.5rem);
    padding-right: clamp(.5rem, 2vw, 1.5rem);
}

.compact-operations-content {
    width: min(100%, 860px);
    margin-left: auto;
    margin-right: auto;
}

.compact-operations-content > .d-flex:first-child {
    margin-bottom: 1rem !important;
}

.compact-operations-content > .d-flex:first-child h1 {
    font-size: 1.25rem;
}

.compact-operations-content > .d-flex:first-child p {
    font-size: .78rem;
}

.compact-operations-content .btn {
    padding: .3rem .6rem;
    font-size: .75rem;
}

.compact-operations-content .row.g-4 {
    --bs-gutter-x: .75rem;
    --bs-gutter-y: .75rem;
}

.compact-operations-content .section-card {
    border-radius: .65rem;
}

.compact-operations-content .section-card.p-3,
.compact-operations-content .section-card.p-md-4 {
    padding: .55rem .65rem !important;
}

.compact-operations-content .section-card.mb-4 {
    margin-bottom: .75rem !important;
}

.compact-operations-content .section-card h2.h4 {
    font-size: 1rem;
}

.compact-operations-content .section-card h2.h5 {
    font-size: .88rem;
}

.compact-operations-content .section-card .fs-4 {
    font-size: 1rem !important;
}

.compact-operations-content .section-card .small,
.compact-operations-content .table {
    font-size: .72rem;
}

.compact-operations-content .section-card .mb-3 {
    margin-bottom: .4rem !important;
}

.compact-operations-content .section-card .row.g-3 {
    --bs-gutter-x: .55rem;
    --bs-gutter-y: .55rem;
}

.compact-operations-content .section-card .row.g-3.mt-1 {
    margin-top: .05rem !important;
}

.compact-operations-content .section-card .section-card.p-3 {
    min-height: 66px;
    padding: .5rem .6rem !important;
}

.compact-operations-content .alert {
    padding: .45rem .65rem;
    margin-top: .55rem !important;
    font-size: .72rem;
}

.compact-operations-content .compact-data-table {
    width: 100%;
    table-layout: fixed;
}

.compact-operations-content .compact-data-table th,
.compact-operations-content .compact-data-table td {
    padding: .23rem .35rem;
    line-height: 1.2;
    vertical-align: middle;
}

.compact-operations-content .compact-data-table th {
    white-space: nowrap;
}

.compact-operations-content .compact-data-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compact-operations-content .movements-table .col-date { width: 24%; }
.compact-operations-content .movements-table .col-product { width: 16%; }
.compact-operations-content .movements-table .col-type { width: 17%; }
.compact-operations-content .movements-table .col-warehouse { width: 28%; }
.compact-operations-content .movements-table .col-value { width: 15%; }

.compact-operations-content .payments-table .col-date { width: 22%; }
.compact-operations-content .payments-table .col-order { width: 36%; }
.compact-operations-content .payments-table .col-method { width: 17%; }
.compact-operations-content .payments-table .col-status { width: 11%; }
.compact-operations-content .payments-table .col-value { width: 14%; }

/* Full-width dashboard ledgers are stacked so identifiers and dates remain readable. */
.compact-operations-content .dashboard-wide-table-card .table-responsive {
    width: 100%;
    max-width: none;
}

.compact-operations-content .dashboard-wide-table-card .compact-data-table {
    table-layout: auto;
}

.compact-operations-content .dashboard-wide-table-card .compact-data-table th,
.compact-operations-content .dashboard-wide-table-card .compact-data-table td {
    padding: .42rem .55rem;
}

.compact-operations-content .dashboard-wide-table-card .compact-data-table td {
    overflow: visible;
    text-overflow: clip;
}

.compact-operations-content .form-select-sm,
.compact-operations-content .form-control-sm {
    min-height: 30px;
    padding-top: .2rem;
    padding-bottom: .2rem;
    font-size: .72rem;
}

@media (max-width: 991.98px) {
    .compact-operations-page {
        padding-left: .35rem;
        padding-right: .35rem;
    }

    .compact-operations-content {
        width: 100%;
    }
}

/* Bordered compact tables keep each value attached to its heading. */
.compact-operations-content .table-responsive {
    width: min(100%, 740px);
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #cbd5e1;
    border-radius: .45rem;
}

.compact-operations-content .table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
}

.compact-operations-content .table > :not(caption) > * > * {
    padding: .22rem .35rem !important;
    border-right: 1px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
}

.compact-operations-content .table > :not(caption) > * > *:last-child {
    border-right: 0;
}

.compact-operations-content .table tbody tr:last-child td {
    border-bottom: 0;
}

.compact-operations-content .table thead th {
    background: #edf4ef;
    color: #1f2937;
    font-weight: 700;
}

.compact-operations-content .table tbody tr:nth-child(even) td {
    background: #f8fafc;
}

.compact-operations-content .table tbody tr:hover td {
    background: #eef8f1;
}

/* Login and system messages should read like notifications, not banners. */
.django-message-container {
    left: auto !important;
    right: 12px !important;
    width: min(380px, calc(100vw - 24px)) !important;
    max-width: 380px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.django-message-container .alert {
    padding: .55rem 2.25rem .55rem .7rem;
    margin-bottom: .45rem;
    font-size: .76rem;
    line-height: 1.3;
}

/* Keep large sales totals contained inside their KPI cards. */
.sales-dashboard .section-card .fs-4 {
    font-size: clamp(0.82rem, 1.2vw, 1.05rem) !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere;
    word-break: normal;
}

.sales-dashboard .section-card {
    min-width: 0;
    overflow: hidden;
}

.welcome-by-user{display:inline-flex;align-items:center;padding:.12rem .4rem;border-radius:999px;background:#dcfce7;color:#166534;font-size:.68rem;font-weight:700}
.app-footer{border-top:1px solid #dfe6e2;background:#fff;color:#475569}.app-footer-inner{width:min(100% - 2rem,1120px);margin:0 auto;padding:1.1rem 0 .7rem}.app-footer-grid{display:grid;grid-template-columns:minmax(220px,1.25fr) minmax(240px,1fr) minmax(230px,auto);align-items:start;gap:1.5rem}.app-footer-brand{display:flex;flex-direction:column;gap:.22rem}.app-footer-brand strong{color:#1f2937;font-size:.82rem;letter-spacing:.04em}.app-footer-brand span{max-width:380px;font-size:.72rem;line-height:1.45}.app-footer-links{display:flex;flex-wrap:wrap;gap:.35rem 1rem}.app-footer-links a,.app-footer-contact a{color:#475569;text-decoration:none;font-size:.72rem}.app-footer-links a:hover,.app-footer-contact a:hover{color:var(--tdv-primary)}.app-footer-contact{display:grid;gap:.3rem;font-size:.72rem}.app-footer-contact a,.app-footer-contact>span{display:flex;align-items:center;gap:.4rem}.app-footer-contact i{color:var(--tdv-primary);width:1rem;text-align:center}.app-footer-bottom{display:flex;justify-content:space-between;gap:1rem;margin-top:.75rem;padding-top:.55rem;border-top:1px solid #edf1ef;font-size:.66rem;color:#64748b}@media(max-width:767.98px){.app-footer-grid{grid-template-columns:1fr 1fr;gap:1rem}.app-footer-brand{grid-column:1/-1}}@media(max-width:479.98px){.app-footer-inner{width:min(100% - 1.25rem,1120px)}.app-footer-grid{grid-template-columns:1fr}.app-footer-brand{grid-column:auto}.app-footer-bottom{align-items:flex-start;flex-direction:column;gap:.2rem}}

@media (max-width: 575.98px) {
    .compact-operations-content .table-responsive {
        width: 100%;
    }

    .django-message-container {
        right: 10px !important;
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
    }
}
.fulfillment-page{max-width:820px}.fulfillment-address{display:flex;gap:.8rem;padding:1rem;border-radius:.75rem;background:#f8fafc;border:1px solid #e2e8f0}.fulfillment-address>i{font-size:1.3rem;color:var(--tdv-primary)}.fulfillment-address div{display:flex;flex-direction:column}.fulfillment-address span,.fulfillment-address small{color:#64748b;font-size:.78rem}.fulfillment-items{border:1px solid #e2e8f0;border-radius:.75rem;overflow:hidden}.fulfillment-items>div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:1rem;padding:.8rem 1rem;border-bottom:1px solid #edf0f2;align-items:center}.fulfillment-items>div:last-child{border:0}.fulfillment-items span:first-child{display:flex;flex-direction:column}.fulfillment-items small{color:#64748b}.fulfillment-list{border:1px solid #e2e8f0;border-radius:.75rem;overflow:hidden}.fulfillment-row{display:grid;grid-template-columns:minmax(0,1fr) 130px 110px auto;align-items:center;gap:1rem;padding:1rem;color:inherit;border-bottom:1px solid #edf0f2}.fulfillment-row:last-child{border:0}.fulfillment-row:hover{background:#f8fafc}.fulfillment-row>div:first-child{display:flex;flex-direction:column}.fulfillment-row>div:first-child span{color:#64748b;font-size:.8rem}.fulfillment-method{display:flex;gap:.4rem;align-items:center}@media(max-width:767.98px){.fulfillment-row{grid-template-columns:minmax(0,1fr) auto}.fulfillment-row>div:nth-child(2){grid-column:1}.fulfillment-row>div:nth-child(3){grid-column:2;grid-row:1}.fulfillment-items>div{grid-template-columns:minmax(0,1fr) auto}.fulfillment-items>div span:last-child{grid-column:2}}
@media print{.customer-invoice-page{max-width:100%!important;padding:0!important}.customer-invoice-page>.card{box-shadow:none!important;border:0!important}.customer-invoice-page .btn,.app-fixed-header,.app-sidebar,footer,.django-message-container{display:none!important}.page-shell,.app-main{margin:0!important;padding:0!important}.customer-invoice-page .card-body{padding:0!important}}
.offline-status-bar{position:sticky;top:0;z-index:9999;background:#7c2d12;color:#fff;text-align:center;padding:.55rem;font-weight:600}.manager-desktop{max-width:1200px;margin:0 auto}.manager-desktop-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem}.manager-desktop-heading h1{font-size:clamp(1.5rem,3vw,2.1rem);margin:.15rem 0}.manager-desktop-heading p{color:#64748b;margin:0}.connection-pill{display:flex;gap:.4rem;align-items:center;padding:.5rem .75rem;border-radius:99px;background:#dcfce7;color:#166534;font-weight:700;font-size:.8rem}.connection-pill.is-offline{background:#ffedd5;color:#9a3412}.manager-app-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.manager-app{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;padding:1.35rem .8rem;border:1px solid #e2e8f0;border-radius:1rem;background:#fff;color:#1f2937;box-shadow:0 .3rem 1rem rgba(15,23,42,.05);transition:transform .15s,box-shadow .15s}.manager-app:hover{transform:translateY(-3px);box-shadow:0 .7rem 1.4rem rgba(15,23,42,.1)}.manager-app>span{display:grid;place-items:center;width:64px;height:64px;border-radius:1rem;background:#e8f5ed;color:var(--tdv-primary);font-size:1.8rem}.manager-app strong{font-size:1rem}.manager-app small{color:#64748b}.app-sales>span{background:#dcfce7;color:#15803d}.app-orders>span{background:#dbeafe;color:#1d4ed8}.app-stock>span,.app-receive>span{background:#fef3c7;color:#a16207}.app-delivery>span{background:#e0e7ff;color:#4338ca}.app-finance>span{background:#fce7f3;color:#be185d}.app-reports>span{background:#ede9fe;color:#6d28d9}.app-suppliers>span{background:#cffafe;color:#0e7490}.app-staff>span{background:#fee2e2;color:#b91c1c}@media(max-width:991.98px){.manager-app-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:575.98px){.manager-app-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.manager-app{padding:1rem .5rem}.manager-app>span{width:54px;height:54px}.manager-desktop-heading{align-items:flex-start}}

/* =========================================================
   LUMBER / BUILDING MATERIALS HOME BACKGROUND
========================================================= */

.building-hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    color: #ffffff;
    overflow: hidden;

    background:
        linear-gradient(
            rgba(7, 39, 29, 0.78),
            rgba(7, 39, 29, 0.68)
        ),
        url("../images/backgrounds/building-materials-bg.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.building-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top left, rgba(200, 169, 81, 0.25), transparent 35%),
        radial-gradient(circle at bottom right, rgba(0, 0, 0, 0.35), transparent 40%);
    pointer-events: none;
}

.building-hero-content {
    position: relative;
    z-index: 2;
    max-width: 780px;
}

.building-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(200, 169, 81, 0.18);
    color: #f8f9fa;
    border: 1px solid rgba(200, 169, 81, 0.45);
    border-radius: 999px;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.building-hero h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 1rem;
}

.building-hero p {
    font-size: 1.05rem;
    max-width: 680px;
    color: rgba(255, 255, 255, 0.9);
}

.building-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.building-hero-card {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.92);
    color: #1f2937;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.18);
}

.building-material-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    background: #f4f6f5;
    border: 1px solid #e5e7eb;
    font-size: 0.82rem;
    font-weight: 600;
    color: #0b3d2e;
    margin: 0.15rem;
}

/* =========================================================
   STORE BUILDING MATERIALS BACKGROUND PAGE
   Keeps your previous store layout.
========================================================= */

.store-building-page {
    position: relative;
    min-height: calc(100vh - var(--app-header-height));
    margin: -1.5rem -1rem 0 -1rem;
    padding: 0.25rem 1rem 3rem 1rem;

    background:
        linear-gradient(
            rgba(7, 39, 29, 0.70),
            rgba(7, 39, 29, 0.78)
        ),
        url("../images/backgrounds/building-materials-bg.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Lumber-first public storefront */
.store-lumber-page {
    background: #e9e6df;
    padding-top: .35rem;
}

.store-lumber-hero {
    position: sticky;
    top: var(--app-header-height);
    z-index: 30;
    min-height: 145px;
    padding: .85rem clamp(1.1rem, 2vw, 1.75rem);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 1.4rem;
    box-shadow: 0 1.5rem 4rem rgba(10, 24, 16, .34);
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(18, 36, 25, .95) 0%, rgba(18, 36, 25, .78) 40%, rgba(18, 36, 25, .26) 76%, rgba(18, 36, 25, .16) 100%),
        url("../images/storefront/lumber-forest-hero.png") center top / cover no-repeat;
}

.store-lumber-layout {
    display: grid;
    grid-template-columns: minmax(360px, 590px) minmax(420px, 470px);
    column-gap: clamp(2rem, 10vw, 2in);
    align-items: stretch;
    justify-content: start;
}

.store-lumber-hero-copy { max-width: 590px; color: #fff; }
.store-lumber-hero .store-hero-badge { margin-bottom: .35rem !important; }
.store-lumber-hero h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.75rem, 2.6vw, 2.55rem); line-height: .94; letter-spacing: -.04em; margin: .1rem 0 .45rem; }
.store-lumber-hero h1 em { color: #e7bd72; font-weight: 400; }
.store-lumber-hero-copy > p { max-width: 540px; color: rgba(255,255,255,.84); font-size: .93rem; line-height: 1.35; margin-bottom: 0; }
.store-lumber-cta-panel { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-start; padding: 0; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; }
.store-lumber-actions { align-self: flex-start; display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 0; transform: translateX(-.35in); }
.store-lumber-actions .btn { border-radius: 999px; padding: .48rem .9rem; font-size: .88rem; font-weight: 700; }
.store-hero-search.navbar-store-search {
    flex: 0 0 42px;
    width: 100%;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    margin: auto 0 0;
    transform: translateX(-1in);
}

@media (max-width: 1199.98px) and (min-width: 768px) {
    .store-lumber-layout {
        grid-template-columns: minmax(300px, 1fr) minmax(340px, 470px);
        column-gap: 1.5rem;
    }
}

.store-lumber-page .storefront-search { border: 1px solid rgba(117, 77, 42, .18); }
.store-lumber-page .store-hero-panel.store-hero-panel-compact {
    position: static !important;
    background: rgba(250,246,238,.93) !important;
    padding: .8rem 1rem !important;
    border: 1px solid rgba(117,77,42,.18) !important;
    border-radius: .85rem !important;
    color: #2f241b !important;
}
.store-lumber-page .storefront-intro p { color: #756657; }
.store-lumber-page .store-products-glass { background: #e3e6e6; border-color: #d2d7d7; }

.product-store-card { overflow: hidden; border-radius: 1rem !important; transition: transform .2s ease, box-shadow .2s ease; }
.product-store-card:hover { transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(48,34,23,.16) !important; }
.product-card-image-link { position: relative; display: block; height: 145px; overflow: hidden; background: #eee6da; }
.product-card-image { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.product-store-card:hover .product-card-image { transform: scale(1.035); }
.product-card-category { position: absolute; left: .75rem; bottom: .75rem; padding: .3rem .65rem; border-radius: 999px; background: rgba(24,51,35,.9); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.product-card-kicker { color: #82572f; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.product-card-title { color: #2f241b; font-family: Georgia, "Times New Roman", serif; }
.product-price-compact { color: #1e5034; }
.product-detail-image { display: block; width: min(100%, 640px); height: 260px; object-fit: cover; border-radius: 1rem; background: #eee6da; margin-inline: auto; }

@media (max-width: 767.98px) {
    .store-lumber-page { padding-top: .25rem; }
    .store-lumber-hero { min-height: 0; padding: 1.25rem 1rem; }
    .store-lumber-layout { grid-template-columns: 1fr; gap: 1.2rem; }
    .store-lumber-cta-panel { padding: 0; transform: none; }
    .store-lumber-actions { transform: none; }
    .store-hero-search.navbar-store-search { min-width: 0; max-width: 470px; margin-top: .75rem; transform: none; }
    .product-card-image-link { height: 120px; }
    .product-detail-image { height: 210px; }
}

.store-building-overlay {
    position: relative;
    z-index: 1;
    max-width: 100%;
    padding-top: 0 !important;
}

/* Header panel over the image — not fixed */
.store-hero-panel {
    background: linear-gradient(
        135deg,
        rgba(11, 61, 46, 0.76),
        rgba(7, 39, 29, 0.52)
    );

    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 1.1rem;
    padding: 1.3rem 1.4rem;

    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);

    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.22);
}

.store-hero-panel.store-hero-panel-compact {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 1 !important;
}

/* Small badge */
.store-hero-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(200, 169, 81, 0.20);
    color: #fff;
    border: 1px solid rgba(200, 169, 81, 0.50);
    border-radius: 999px;
    padding: 0.38rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 700;
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* Product area becomes translucent/glass */
.store-products-glass {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 1.1rem;
    padding: 1rem;

    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);

    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.18);
}

.store-products-glass .card,
.store-products-glass .product-store-card,
.store-products-glass .section-card {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(229, 231, 235, 0.85) !important;
    box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.08) !important;
}

/* =========================================================
   RESPONSIVE FIXES
========================================================= */

@media (max-width: 991.98px) {
    .app-layout {
        grid-template-columns: 188px minmax(0, 1fr) !important;
        gap: 0.5rem !important;
    }

    .app-sidebar {
        position: sticky !important;
        top: calc(var(--app-header-height) + 0.5rem) !important;
        left: auto !important;

        width: 188px !important;
        min-width: 188px !important;
        max-width: 188px !important;

        height: auto !important;
        max-height: calc(100vh - var(--app-header-height) - 1rem) !important;
    }

    .app-sidebar .sidebar-body {
        max-height: calc(100vh - var(--app-header-height) - 140px) !important;
    }

    .app-main {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .django-message-container {
        top: calc(var(--app-header-height) + 8px) !important;
        right: 10px !important;
        left: 10px !important;
        max-width: none !important;
    }
}

@media (max-width: 767.98px) {
    .store-building-page {
        margin: -1rem -0.75rem 0 -0.75rem;
        padding: 1rem 0.75rem 2rem 0.75rem;
        background-attachment: scroll;
    }

    .store-hero-panel {
        padding: 1rem;
    }

    .store-products-glass {
        padding: 0.75rem;
    }
}

@media (max-width: 575.98px) {
    .app-layout {
        grid-template-columns: 168px minmax(0, 1fr) !important;
        gap: 0.45rem !important;
    }

    .app-layout > .app-sidebar,
    .app-sidebar {
        width: 168px !important;
        min-width: 168px !important;
        max-width: 168px !important;
    }

    .app-sidebar .sidebar-body {
        max-height: calc(100vh - var(--app-header-height) - 135px) !important;
    }
}





/* =========================================================
   STORE HOME CATEGORY BAR FIX
   Keep Lumber/Cement/Steel/Pharmacy/Extended Stay bar visible
   without changing the rest of the layout
========================================================= */

/* The store category bar stays visible under the fixed navbar */
.store-hero-panel.store-hero-panel-compact {
    position: sticky !important;
    top: calc(var(--app-header-height) + 0.5rem) !important;
    z-index: 2500 !important;
}

/* Keep your original design */
.store-hero-panel.store-hero-panel-compact {
    background: linear-gradient(
        135deg,
        rgba(11, 61, 46, 0.76),
        rgba(7, 39, 29, 0.52)
    ) !important;

    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    border-radius: 1.1rem !important;
    padding: 1.3rem 1.4rem !important;

    backdrop-filter: blur(10px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(150%) !important;

    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.22) !important;
}

/* Make sure the badge does not wrap badly */
.store-hero-badge {
    white-space: normal;
}





/* =========================================================
   STORE CATEGORY BAR — THINNER AND TRANSPARENT
   Keeps Lumber/Cement/Steel/Pharmacy/Extended Stay visible
   without the thick green background
========================================================= */

.store-hero-panel.store-hero-panel-compact {
    position: sticky !important;
    top: calc(var(--app-header-height) + 0.5rem) !important;
    z-index: 2500 !important;

    /* Make the thick green panel transparent and narrow */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    padding: 0.25rem 0.5rem !important;
    border-radius: 0 !important;
    margin-bottom: 0.5rem !important;
}

/* Keep only the small pill behind the text */
.store-hero-badge {
    background: rgba(11, 61, 46, 0.55) !important;
    border: 1px solid rgba(200, 169, 81, 0.45) !important;
    color: #fff !important;

    padding: 0.28rem 0.65rem !important;
    font-size: 0.78rem !important;
    line-height: 1.15 !important;
    border-radius: 999px !important;

    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

/* Make cart and checkout buttons smaller */
.store-hero-panel-compact .btn {
    padding: 0.25rem 0.65rem !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
}




/* Make sidebar nonscrollable  */

/* Final compact storefront card proportions */
.store-products-glass .product-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: .8rem;
}

.store-products-glass .product-store-card {
    min-height: 0 !important;
    height: 100%;
    border-radius: .45rem !important;
    border: 1px solid #d5d9d9 !important;
    box-shadow: 0 1px 2px rgba(15,17,17,.12) !important;
}

.store-products-glass .product-card-image-link {
    display: block !important;
    width: 100% !important;
    height: 118px !important;
    min-height: 118px !important;
    max-height: 118px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    flex: 0 0 118px !important;
    margin: .65rem .65rem 0;
    width: calc(100% - 1.3rem) !important;
    background: #f7f7f7;
}

.store-products-glass .product-card-image {
    display: block !important;
    width: 100% !important;
    height: 118px !important;
    min-height: 0 !important;
    max-height: 118px !important;
    object-fit: contain !important;
    object-position: center !important;
}

.store-products-glass .product-card-body-compact {
    min-height: 205px;
    padding: .75rem !important;
}

.store-products-glass .product-card-title-compact {
    font-family: Arial, sans-serif;
    font-size: .9rem;
    line-height: 1.25;
    min-height: 2.25rem;
}

.store-products-glass .product-description-compact {
    font-size: .72rem;
    line-height: 1.35;
    min-height: 1.95rem;
    color: #718096 !important;
}

.store-products-glass .product-price-compact {
    font-size: 1rem;
    color: #16232b;
}

.product-stock-line { color: #27845f; font-size: .75rem; margin-top: .25rem; }
.product-stock-line.is-out { color: #b23a3a; }
.product-card-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-top: 1px solid #e5ebe8; padding-top: .75rem; margin-top: .75rem; }
.product-detail-link { color: #17242c; font-size: .8rem; font-weight: 800; text-decoration: none; }
.product-detail-link:hover { color: var(--tdv-primary); }
.product-quick-add { width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0 !important; border-radius: 50% !important; }

@media (max-width: 1199.98px) {
    .store-products-glass .product-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 767.98px) {
    .store-products-glass .product-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 575.98px) {
    .store-products-glass .product-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .55rem; }
    .store-products-glass .product-card-image-link,
    .store-products-glass .product-card-image { height: 105px !important; min-height: 105px !important; max-height: 105px !important; }
    .store-products-glass .product-card-image-link { flex-basis: 105px !important; }
    .store-products-glass .product-card-body-compact { min-height: 210px; padding: .65rem !important; }
}

/* =========================================================
   FINAL SIDEBAR FIX ONLY
   Keep the existing layout/design.
   Sidebar stays visible while page content scrolls.
========================================================= */

/* Unified forest header and fixed storefront search */
.app-fixed-header .navbar-topbar {
    background: #17261d !important;
    color: rgba(255,255,255,.82) !important;
    border-bottom: 1px solid rgba(213,173,103,.22);
}

.app-fixed-header .navbar-main {
    background: #294c35 !important;
    border-bottom: 1px solid rgba(12,28,18,.45);
    box-shadow: 0 .35rem 1.2rem rgba(12,28,18,.22) !important;
    padding-block: .55rem !important;
}

.navbar-main .navbar-nav .nav-link,
.navbar-main .nav-link {
    color: rgba(255,255,255,.86) !important;
    font-size: .91rem !important;
    font-weight: 650;
    padding: .58rem .62rem !important;
    border-radius: .5rem;
    transition: color .15s ease, background .15s ease;
}

.navbar-main .navbar-nav .nav-link:hover,
.navbar-main .navbar-nav .nav-link:focus,
.navbar-main .navbar-nav .nav-link.active {
    color: #fff !important;
    background: rgba(255,255,255,.11);
}

.navbar-main .nav-link i { color: #d5ad67; font-size: .95rem; }
.navbar-main .navbar-brand img { height: 40px !important; max-height: 40px !important; }
.navbar-main .dropdown-menu { border: 1px solid #dfe6df; border-radius: .75rem; box-shadow: 0 .8rem 2rem rgba(17,38,25,.16); }
.navbar-main .dropdown-item { padding: .55rem .85rem; font-size: .88rem; }
.navbar-main .dropdown-item:active,
.navbar-main .dropdown-item.active { background: #416a4b; color: #fff; }

.navbar-main .navbar-secondary-start {
    margin-left: .35rem;
    padding-left: .55rem;
    border-left: 1px solid rgba(213,173,103,.48);
}

.navbar-main .navbar-secondary-link {
    color: rgba(255,255,255,.68) !important;
    font-size: .82rem !important;
    font-weight: 550;
}

.navbar-main .navbar-secondary-link:hover,
.navbar-main .navbar-secondary-link:focus {
    color: #fff !important;
}

.navbar-store-search {
    flex: 1 1 320px;
    min-width: 250px;
    max-width: 470px;
    height: 42px;
    margin: 0 .8rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding-left: .85rem;
    background: #fbfaf5;
    border: 1px solid rgba(213,173,103,.75);
    border-radius: .7rem;
    box-shadow: inset 0 1px 2px rgba(23,38,29,.07);
}

.navbar-store-search > i { color: #416a4b; font-size: 1rem; }
.navbar-store-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #17261d;
    font-size: .9rem;
}
.navbar-store-search input::placeholder { color: #7a857d; }
.navbar-store-search button {
    align-self: stretch;
    width: 44px;
    border: 0;
    border-radius: 0 .62rem .62rem 0;
    background: #d5ad67;
    color: #17261d;
    font-size: 1rem;
}
.navbar-store-search button:hover { background: #e3bd7d; }

@media (max-width: 1199.98px) {
    .navbar-main .navbar-nav .nav-link,
    .navbar-main .nav-link { font-size: .85rem !important; padding-inline: .45rem !important; }
    .navbar-store-search { min-width: 220px; max-width: 340px; }
}

@media (max-width: 767.98px) {
    :root { --app-header-height: 88px; }
    .navbar-main .navbar-collapse { padding: .75rem 0 .25rem; }
    .navbar-store-search { min-width: 100%; max-width: none; margin: .6rem 0; order: -1; }
    .navbar-main .navbar-nav .nav-link,
    .navbar-main .nav-link { font-size: .95rem !important; }
    .navbar-main .navbar-secondary-start { margin-top: .5rem; margin-left: 0; padding-top: .5rem; padding-left: 0; border-left: 0; border-top: 1px solid rgba(213,173,103,.38); }
}

:root {
    --app-header-height: 92px;
}

/* Keep the sidebar in the normal grid, but sticky under the navbar */
.app-sidebar {
    position: sticky !important;
    top: calc(var(--app-header-height) + 1rem) !important;

    width: 188px !important;
    min-width: 188px !important;
    max-width: 188px !important;

    height: auto !important;
    max-height: calc(100vh - var(--app-header-height) - 2rem) !important;

    overflow: hidden !important;
    z-index: 1000 !important;
}

/* Only the links/menu inside the sidebar should scroll if too long */
.app-sidebar .sidebar-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: calc(100vh - var(--app-header-height) - 145px) !important;
}

/* Keep your current two-column layout */
.app-layout {
    display: grid !important;
    grid-template-columns: 188px minmax(0, 1fr) !important;
    gap: 0.65rem !important;
    align-items: start !important;
}

/* Do not push or overlay the main content */
.app-main {
    margin-left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* Mobile/tablet: keep same design, just adjust height */
@media (max-width: 991.98px) {
    .app-sidebar {
        top: calc(var(--app-header-height) + 0.5rem) !important;
        max-height: calc(100vh - var(--app-header-height) - 1rem) !important;
    }

    .app-sidebar .sidebar-body {
        max-height: calc(100vh - var(--app-header-height) - 140px) !important;
    }
}

@media (max-width: 575.98px) {
    .app-layout {
        grid-template-columns: 168px minmax(0, 1fr) !important;
        gap: 0.45rem !important;
    }

    .app-sidebar {
        width: 168px !important;
        min-width: 168px !important;
        max-width: 168px !important;
    }

    .app-sidebar .sidebar-body {
        max-height: calc(100vh - var(--app-header-height) - 135px) !important;
    }
}




/* =========================================================
   FINAL TRUE FIXED SIDEBAR
   Keeps sidebar from scrolling with page content.
   Preserves existing two-column layout.
========================================================= */

:root {
    --app-header-height: 92px;
    --app-sidebar-width: 188px;
    --app-sidebar-gap: 0.65rem;
    --app-visible-height: 100dvh;
}

/* Keep the two-column layout */
.app-layout {
    display: grid !important;
    grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr) !important;
    gap: var(--app-sidebar-gap) !important;
    align-items: start !important;
}

/* Sidebar is fixed, but sized exactly like before */
.app-sidebar {
    position: fixed !important;

    top: calc(var(--app-header-height) + 0.25rem) !important;
    left: 1.5rem !important;

    width: var(--app-sidebar-width) !important;
    min-width: var(--app-sidebar-width) !important;
    max-width: var(--app-sidebar-width) !important;

    height: calc(var(--app-visible-height) - var(--app-header-height) - 0.5rem) !important;
    max-height: calc(var(--app-visible-height) - var(--app-header-height) - 0.5rem) !important;

    overflow: hidden !important;
    z-index: 3000 !important;
}

/* Make sure main content stays in the second column */
.app-main {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
}

/* Only sidebar links scroll internally if the menu is too long */
.app-sidebar .sidebar-body {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: none !important;
}

/* Header/footer stay fixed inside sidebar */
.sidebar-header,
.sidebar-footer {
    flex-shrink: 0 !important;
}

/* Tablet */
@media (max-width: 991.98px) {
    :root {
        --app-sidebar-width: 188px;
    }

    .app-layout {
        grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr) !important;
        gap: 0.5rem !important;
    }

    .app-sidebar {
        top: calc(var(--app-header-height) + 0.25rem) !important;
        left: 0.75rem !important;

        width: var(--app-sidebar-width) !important;
        min-width: var(--app-sidebar-width) !important;
        max-width: var(--app-sidebar-width) !important;

        height: calc(var(--app-visible-height) - var(--app-header-height) - 0.5rem) !important;
        max-height: calc(var(--app-visible-height) - var(--app-header-height) - 0.5rem) !important;
    }

    .app-sidebar .sidebar-body {
        max-height: none !important;
    }

    .app-main {
        grid-column: 2 !important;
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* Small phones */
@media (max-width: 575.98px) {
    :root {
        --app-sidebar-width: 168px;
    }

    .app-layout {
        grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr) !important;
        gap: 0.45rem !important;
    }

    .app-sidebar {
        left: 0.5rem !important;

        width: var(--app-sidebar-width) !important;
        min-width: var(--app-sidebar-width) !important;
        max-width: var(--app-sidebar-width) !important;
    }

    .app-sidebar .sidebar-body {
        max-height: none !important;
    }
}



/* =========================================================
   FOOTER ALIGNMENT WITH FIXED SIDEBAR
========================================================= */

body.has-sidebar .app-footer {
    margin-left: calc(var(--app-sidebar-width, 188px) + 2.2rem) !important;
    width: calc(100% - var(--app-sidebar-width, 188px) - 2.2rem) !important;
}

body:not(.has-sidebar) .app-footer {
    margin-left: 0 !important;
    width: 100% !important;
}

/* Keep validation and workflow messages above the fixed navigation. */
.django-message-container {
    top: 0.75rem !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(760px, calc(100vw - 1.5rem)) !important;
    max-width: 760px !important;
    max-height: calc(100dvh - 1.5rem) !important;
    overflow-y: auto !important;
    z-index: 8000 !important;
}

.django-message-container .alert {
    margin-bottom: 0.5rem;
    box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.24) !important;
}

@media (max-width: 575.98px) {
    body.has-sidebar .app-footer {
        margin-left: calc(var(--app-sidebar-width, 168px) + 1.2rem) !important;
        width: calc(100% - var(--app-sidebar-width, 168px) - 1.2rem) !important;
    }
}



/* ==========================================
   Compact financial report tables
========================================== */

.report-table-wrap{
    max-width: 1200px;
    margin:auto;
}

.report-table{
    width:1100px !important;
    min-width:1100px !important;
    max-width:1100px !important;
    table-layout:fixed;
    margin:auto;
    font-size:.84rem;
}

.report-table th,
.report-table td{
    padding:.45rem .55rem;
    vertical-align:middle;
}

.report-table thead th{
    font-size:.76rem;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.report-table td:last-child,
.report-table th:last-child{
    text-align:right;
    white-space:nowrap;
}

.app-access > span {
    background: #ede9fe;
    color: #6d28d9;
}

.access-control-workspace .table td {
    vertical-align: middle;
}
.inventory-batch-form-shell {
  max-width: 1080px;
}

.inventory-batch-form-intro {
  max-width: 760px;
  line-height: 1.55;
}

.inventory-batch-form-card {
  border-radius: 1rem;
}

.inventory-batch-form-card .form-label {
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.inventory-batch-form-card .form-control,
.inventory-batch-form-card .form-select {
  min-height: 46px;
}

.inventory-batch-form-card textarea.form-control {
  min-height: 104px;
}

/* Keep operational pages readable on very wide monitors. Full-bleed customer
   landing pages do not use this staff-only app-main container. */
.app-main > .container-fluid {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}

.compact-operations-page {
  max-width: 1180px !important;
}

/* The analytics dashboard needs more horizontal room than compact forms and
   batch lists: 1180px increased by exactly 25% = 1475px. */
.timber-admin-dashboard-shell {
  width: 100%;
  max-width: 1475px !important;
  margin-inline: auto;
}

/* Give the Lumber Admin overview 25% more usable width than its previous
   1075px dashboard canvas (1075px × 1.25 = 1343.75px). */
.timber-admin-dashboard-shell .compact-operations-content {
  width: min(100%, 1344px);
}

.timber-admin-dashboard-shell .compact-operations-content > .d-flex:first-child h1 {
  font-size: 1.4rem;
}

.timber-admin-dashboard-shell .compact-operations-content > .d-flex:first-child p {
  font-size: .88rem;
}

.timber-admin-dashboard-shell .compact-operations-content .btn {
  font-size: .82rem;
}

.timber-admin-dashboard-shell .compact-operations-content .section-card h2.h4 {
  font-size: 1.1rem;
}

.timber-admin-dashboard-shell .compact-operations-content .section-card h2.h5 {
  font-size: .98rem;
}

.timber-admin-dashboard-shell .compact-operations-content .section-card .fs-4 {
  font-size: 1.12rem !important;
}

.timber-admin-dashboard-shell .compact-operations-content .section-card .small,
.timber-admin-dashboard-shell .compact-operations-content .table,
.timber-admin-dashboard-shell .compact-operations-content .alert {
  font-size: .8rem;
}

.timber-admin-dashboard-shell .compact-operations-content .form-select-sm,
.timber-admin-dashboard-shell .compact-operations-content .form-control-sm {
  min-height: 34px;
  font-size: .8rem;
}

.timber-admin-dashboard-shell .compact-operations-content .table-responsive {
  width: 100%;
  max-width: none;
}

@media (max-width: 991.98px) {
  .timber-admin-dashboard-shell .compact-operations-content {
    width: 100%;
  }
}

.message-inbox-shell {
  width: min(100%, 1320px);
  margin-left: 0;
  margin-right: auto;
}

.message-inbox-workspace {
  grid-column: 2 !important;
  width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding-left: 0 !important;
}

.message-inbox-table {
  min-width: 1160px;
  font-size: 0.88rem;
}

.message-inbox-table > :not(caption) > * > * {
  padding: 0.65rem 0.7rem;
}

.compact-batch-content {
  width: min(100%, 1120px);
  margin-inline: auto;
}

.compact-data-card {
  border-radius: 0.9rem;
}

.compact-data-table {
  font-size: 0.88rem;
}

.compact-data-table > :not(caption) > * > * {
  padding: 0.65rem 0.7rem;
}

.compact-batch-page .table-responsive {
  overflow-x: auto;
}

.compact-batch-page .compact-data-table {
  min-width: 1040px;
}

.compact-batch-content .compact-data-table {
  min-width: 1040px;
}

@media (max-width: 991.98px) {
  .app-main > .container-fluid {
    max-width: 100%;
  }
}

/* =========================================================
   GUESTHOUSE MANAGEMENT THEME
   Gives internal lodging pages the same warm hospitality identity as the
   public Guesthouse experience without affecting other business modules.
========================================================= */
.guesthouse-admin-body .app-main {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - var(--app-header-height));
  background:
    radial-gradient(circle at 82% 18%, rgba(205, 171, 112, .20), transparent 30%),
    linear-gradient(135deg, #f2ede4 0%, #ebe3d6 56%, #dfd3c2 100%);
  overflow: hidden;
}

.guesthouse-admin-body .app-main::before {
  content: "";
  position: fixed;
  right: 1.5vw;
  bottom: 0;
  width: min(47vw, 760px);
  aspect-ratio: 3 / 2;
  background: url("../images/guesthouse/guesthouse-transparent-v2.png") center bottom / contain no-repeat;
  opacity: .22;
  filter: saturate(.72) contrast(.92);
  pointer-events: none;
  z-index: 0;
}

.guesthouse-admin-body .app-main > * {
  position: relative;
  z-index: 1;
}

.guesthouse-admin-body .section-card,
.guesthouse-admin-body .card {
  background: rgba(255, 252, 246, .88) !important;
  border-color: rgba(133, 105, 68, .22) !important;
  box-shadow: 0 .8rem 2.2rem rgba(70, 53, 34, .10) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.guesthouse-admin-body .section-card .section-card,
.guesthouse-admin-body .section-card .card {
  background: rgba(255, 255, 255, .70) !important;
  box-shadow: 0 .4rem 1.1rem rgba(70, 53, 34, .06) !important;
}

.guesthouse-admin-body .bg-light,
.guesthouse-admin-body .bg-body-tertiary {
  background-color: rgba(242, 235, 223, .82) !important;
}

.guesthouse-admin-body .page-header h1,
.guesthouse-admin-body h1,
.guesthouse-admin-body h2,
.guesthouse-admin-body h3 {
  color: #302a25;
}

.guesthouse-admin-body .page-header p,
.guesthouse-admin-body .text-muted {
  color: #706458 !important;
}

.guesthouse-admin-body .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #725b37;
  --bs-btn-border-color: #725b37;
  --bs-btn-hover-bg: #5f4b2e;
  --bs-btn-hover-border-color: #5f4b2e;
  --bs-btn-active-bg: #514027;
  --bs-btn-active-border-color: #514027;
}

.guesthouse-admin-body .btn-outline-primary {
  --bs-btn-color: #725b37;
  --bs-btn-border-color: #9c825b;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #725b37;
  --bs-btn-hover-border-color: #725b37;
  --bs-btn-active-bg: #5f4b2e;
  --bs-btn-active-border-color: #5f4b2e;
}

.guesthouse-admin-body .guesthouse-tabs {
  padding: .15rem;
}

.guesthouse-admin-body .guesthouse-tabs .btn {
  border-radius: .65rem;
}

.guesthouse-admin-body .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(126, 99, 62, .045);
  --bs-table-hover-bg: rgba(180, 146, 93, .09);
}

@media (max-width: 767.98px) {
  .guesthouse-admin-body .app-main::before {
    width: min(88vw, 620px);
    opacity: .14;
  }
}

/* =========================================================
   TRIPLE D SIDEBAR — branded navigation system
========================================================= */
:root {
  --app-sidebar-width: 228px;
  --sidebar-forest-950: #09291d;
  --sidebar-forest-900: #103b29;
  --sidebar-forest-800: #185238;
  --sidebar-forest-700: #26704d;
  --sidebar-mint-100: #e5f3ea;
  --sidebar-mint-50: #f1f8f3;
  --sidebar-gold: #d7aa4f;
  --sidebar-gold-soft: #f6e8be;
  --sidebar-cream: #fbf8f0;
  --sidebar-ink: #173126;
  --sidebar-muted: #67756c;
}

.app-layout > .app-sidebar,
.app-sidebar {
  width: var(--app-sidebar-width) !important;
  min-width: var(--app-sidebar-width) !important;
  max-width: var(--app-sidebar-width) !important;
  background:
    radial-gradient(circle at 85% 4%, rgba(215, 170, 79, .13), transparent 24%),
    linear-gradient(180deg, #fff 0%, var(--sidebar-cream) 100%) !important;
  border: 1px solid rgba(23, 74, 50, .16) !important;
  border-radius: 1.15rem !important;
  box-shadow: 0 1.25rem 3rem rgba(18, 50, 36, .16) !important;
}

.sidebar-header {
  padding: 0 !important;
  color: #fff;
  background:
    radial-gradient(circle at 88% 12%, rgba(215, 170, 79, .32), transparent 30%),
    linear-gradient(145deg, var(--sidebar-forest-950), var(--sidebar-forest-800)) !important;
  border: 0 !important;
}

.sidebar-workspace-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem .9rem .75rem;
}

.sidebar-workspace-mark {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 2.65rem;
  color: var(--sidebar-forest-950);
  background: linear-gradient(145deg, #f3d988, var(--sidebar-gold));
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: .85rem;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
  font-size: 1.15rem;
}

.sidebar-workspace-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .12rem;
}

.sidebar-eyebrow {
  color: #e9dba9;
  font-size: .59rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.sidebar-workspace-name {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: .85rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-workspace-status {
  display: flex;
  align-items: center;
  gap: .35rem;
  color: rgba(255, 255, 255, .7);
  font-size: .63rem;
}

.sidebar-workspace-status i {
  color: #72d89d;
  font-size: .38rem;
  filter: drop-shadow(0 0 4px rgba(114, 216, 157, .7));
}

.sidebar-location {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 .85rem .85rem;
  padding: .43rem .58rem;
  overflow: hidden;
  color: #f7eed1;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .6rem;
  font-size: .66rem;
}

.sidebar-location span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-sidebar .sidebar-body {
  padding: .8rem .65rem 1rem !important;
  scrollbar-color: rgba(38, 112, 77, .35) transparent;
  scrollbar-width: thin;
}

.app-sidebar .sidebar-body::-webkit-scrollbar { width: 5px; }
.app-sidebar .sidebar-body::-webkit-scrollbar-track { background: transparent; }
.app-sidebar .sidebar-body::-webkit-scrollbar-thumb {
  background: rgba(38, 112, 77, .32);
  border-radius: 999px;
}

.app-sidebar .sidebar-group {
  margin: .32rem 0 !important;
}

.app-sidebar .sidebar-section-toggle {
  min-height: 2.25rem;
  padding: .48rem .58rem !important;
  color: var(--sidebar-ink) !important;
  border-radius: .72rem !important;
  font-size: .76rem !important;
  letter-spacing: .045em !important;
  transition: background-color .18s ease, color .18s ease, transform .18s ease !important;
}

.app-sidebar .sidebar-section-toggle .sidebar-group-title {
  color: inherit !important;
  font-size: .71rem;
  font-weight: 800;
  letter-spacing: .075em;
  line-height: 1.25;
}

.app-sidebar .sidebar-section-toggle > i:last-child {
  color: #829087 !important;
  font-size: .68rem !important;
}

.app-sidebar .sidebar-section-toggle .sidebar-group-title > i {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  margin-right: .5rem !important;
  color: var(--sidebar-forest-700) !important;
  background: var(--sidebar-mint-100);
  border-radius: .5rem;
  font-size: .78rem !important;
}

.app-sidebar .sidebar-section-toggle:hover {
  color: var(--sidebar-forest-900) !important;
  background: var(--sidebar-mint-50) !important;
  transform: translateX(2px);
}

.app-sidebar .sidebar-section-toggle.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--sidebar-forest-800), var(--sidebar-forest-700)) !important;
  box-shadow: 0 .45rem 1rem rgba(24, 82, 56, .2) !important;
}

.app-sidebar .sidebar-section-toggle.active .sidebar-group-title,
.app-sidebar .sidebar-section-toggle.active > i:last-child {
  color: #fff !important;
}

.app-sidebar .sidebar-section-toggle.active .sidebar-group-title > i {
  color: var(--sidebar-forest-950) !important;
  background: var(--sidebar-gold-soft);
}

.app-sidebar .sidebar-link,
.app-sidebar a.sidebar-link,
.app-sidebar .sidebar-body a.sidebar-link {
  position: relative;
  min-height: 2.25rem;
  gap: .55rem !important;
  margin: .12rem 0 !important;
  padding: .38rem .55rem !important;
  color: #3d5849 !important;
  background: transparent !important;
  border: 1px solid transparent;
  border-radius: .72rem !important;
  font-size: .75rem !important;
  font-style: normal !important;
  font-weight: 650 !important;
  line-height: 1.18 !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

.app-sidebar .sidebar-link i,
.app-sidebar a.sidebar-link i,
.app-sidebar .sidebar-body a.sidebar-link i {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 1.65rem;
  margin: 0 !important;
  color: var(--sidebar-forest-700) !important;
  background: var(--sidebar-mint-100);
  border-radius: .5rem;
  font-size: .76rem !important;
}

.app-sidebar .sidebar-link:hover,
.app-sidebar a.sidebar-link:hover,
.app-sidebar .sidebar-body a.sidebar-link:hover {
  color: var(--sidebar-forest-950) !important;
  background: #fff !important;
  border-color: rgba(38, 112, 77, .14);
  box-shadow: 0 .35rem .8rem rgba(21, 68, 47, .08);
  transform: translateX(2px);
}

.app-sidebar .sidebar-link:hover i,
.app-sidebar a.sidebar-link:hover i,
.app-sidebar .sidebar-body a.sidebar-link:hover i {
  color: var(--sidebar-forest-950) !important;
  background: var(--sidebar-gold-soft);
}

.app-sidebar .sidebar-link.active,
.app-sidebar a.sidebar-link.active,
.app-sidebar .sidebar-body a.sidebar-link.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--sidebar-forest-800), var(--sidebar-forest-700)) !important;
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 .45rem 1rem rgba(24, 82, 56, .2);
  font-weight: 750 !important;
}

.app-sidebar .sidebar-link.active::before {
  content: "";
  position: absolute;
  left: -.32rem;
  top: 50%;
  width: .2rem;
  height: 1.2rem;
  background: var(--sidebar-gold);
  border-radius: 999px;
  transform: translateY(-50%);
  box-shadow: 0 0 .5rem rgba(215, 170, 79, .55);
}

.app-sidebar .sidebar-link.active i,
.app-sidebar a.sidebar-link.active i,
.app-sidebar .sidebar-body a.sidebar-link.active i {
  color: var(--sidebar-forest-950) !important;
  background: linear-gradient(145deg, #f5df9a, var(--sidebar-gold));
}

.app-sidebar .sidebar-home-link {
  margin-bottom: .7rem !important;
  color: var(--sidebar-forest-900) !important;
  background: linear-gradient(135deg, #edf7f0, #fffaf0) !important;
  border-color: rgba(38, 112, 77, .15) !important;
  box-shadow: 0 .35rem .8rem rgba(21, 68, 47, .07);
}

.app-sidebar .sidebar-home-link::after {
  content: "";
  width: .38rem;
  height: .38rem;
  margin-left: auto;
  background: var(--sidebar-gold);
  border-radius: 50%;
}

.app-sidebar .sidebar-home-link.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--sidebar-forest-800), var(--sidebar-forest-700)) !important;
}

.app-sidebar a:focus-visible,
.app-sidebar button:focus-visible {
  outline: 3px solid rgba(215, 170, 79, .55) !important;
  outline-offset: 2px;
}

.sidebar-footer {
  padding: .72rem !important;
  background: rgba(255, 255, 255, .86) !important;
  border-color: rgba(23, 74, 50, .12) !important;
  backdrop-filter: blur(10px);
}

.sidebar-secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  margin-bottom: .55rem;
  color: var(--sidebar-muted);
  font-size: .61rem;
  font-weight: 650;
}

.sidebar-secure-note i { color: var(--sidebar-forest-700); }

.sidebar-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.45rem;
  color: var(--sidebar-forest-900);
  background: #fff;
  border: 1px solid rgba(16, 59, 41, .34);
  border-radius: .72rem;
  font-size: .77rem;
  font-weight: 750;
  text-decoration: none;
  transition: all .18s ease;
}

.sidebar-logout:hover {
  color: #fff;
  background: var(--sidebar-forest-900);
  border-color: var(--sidebar-forest-900);
  box-shadow: 0 .45rem 1rem rgba(16, 59, 41, .2);
}

@media (max-width: 991.98px) {
  :root { --app-sidebar-width: 212px; }
  .app-layout > .app-sidebar,
  .app-sidebar {
    width: var(--app-sidebar-width) !important;
    min-width: var(--app-sidebar-width) !important;
    max-width: var(--app-sidebar-width) !important;
  }
}

@media (max-width: 575.98px) {
  :root { --app-sidebar-width: 176px; }
  .app-layout > .app-sidebar,
  .app-sidebar {
    width: var(--app-sidebar-width) !important;
    min-width: var(--app-sidebar-width) !important;
    max-width: var(--app-sidebar-width) !important;
  }
  .sidebar-workspace-card { gap: .55rem; padding-inline: .7rem; }
  .sidebar-workspace-mark { width: 2.2rem; height: 2.2rem; flex-basis: 2.2rem; }
  .sidebar-workspace-name { font-size: .74rem; }
  .sidebar-eyebrow, .sidebar-workspace-status { font-size: .54rem; }
  .app-sidebar .sidebar-body { padding-inline: .45rem !important; }
  .app-sidebar .sidebar-link,
  .app-sidebar a.sidebar-link,
  .app-sidebar .sidebar-body a.sidebar-link { font-size: .68rem !important; }
  .app-sidebar .sidebar-section-toggle .sidebar-group-title { font-size: .65rem; }
}