/* Custom CSS to support Tailwind-like utility classes used by Heroicons */
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-7 { width: 1.75rem; }
.h-7 { height: 1.75rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }

/* ------------------------------------------------------------------
   Mobile sidebar: hide the duplicate hamburger
   ------------------------------------------------------------------
   The layout renders two `.wrapper-menu` buttons: one in the navbar and
   one inside the sidebar header. The sidebar one is a desktop-only
   control (it collapses the sidebar to the mini rail) and the theme only
   styles it at `min-width: 1300px`.

   Below that breakpoint the sidebar slides in as an overlay, so its
   hamburger landed directly on top of the navbar's — two identical icons
   a few pixels apart. Tapping often hit the sidebar copy, so the menu
   looked like it refused to close.

   Hide the sidebar copy on mobile/tablet and keep the navbar one as the
   single toggle. Desktop behaviour is untouched. */
@media (max-width: 1299px) {
    .iq-sidebar .iq-menu-bt-sidebar {
        display: none !important;
    }
}

/* Backdrop behind the mobile sidebar so tapping the page closes the menu.
   Sits under the sidebar (z-index 999) but above page content. */
@media (max-width: 1299px) {
    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    }

    body.sidebar-main .sidebar-backdrop {
        opacity: 1;
        visibility: visible;
    }

    /* The sidebar must sit above the backdrop while open. */
    body.sidebar-main .iq-sidebar {
        z-index: 999;
    }
}

/* Never show the backdrop on desktop, where the sidebar is docked. */
@media (min-width: 1300px) {
    .sidebar-backdrop {
        display: none;
    }
}

/* ------------------------------------------------------------------
   ORDER NOTES (item-level + invoice-level)
   ------------------------------------------------------------------
   Shared by `orders/details-order` and `online-orders/show`, which both
   display notes for POS-created and customer-created invoices. These
   rules used to live inline in the orders view; they moved here once a
   second view needed them, so the two can never drift apart.

   Colours go through tokens with the ORIGINAL value as the inline
   fallback, so light mode is byte-identical to the previous inline
   styles and dark mode (app-appearance.css) can retint them. */
.order-item-note {
    border-inline-start: 3px solid var(--note-accent, #a5b4fc);
    padding-inline-start: 7px;
    color: var(--note-fg, #4338ca);
    line-height: 1.35;
    /* A long instruction wraps instead of stretching the table cell. */
    overflow-wrap: anywhere;
}

.order-general-note {
    border: 1px dashed var(--note-border, #cbd5e1);
    border-radius: 10px;
    background: var(--note-bg, #f8fafc);
    padding: 10px 12px;
}

/* Long notes must wrap rather than overflow, in both directions. */
.order-general-note-text {
    overflow-wrap: anywhere;
    white-space: pre-line;
    line-height: 1.5;
}

/* Ensure SVGs respect these dimensions */
svg.w-4 { width: 1rem; }
svg.h-4 { height: 1rem; }
svg.w-5 { width: 1.25rem; }
svg.h-5 { height: 1.25rem; }
svg.w-6 { width: 1.5rem; }
svg.h-6 { height: 1.5rem; }