/* Import touchscreen payment styles */
@import url('touchscreen-payment.css');

/* Dashboard module grid — auto-fill columns based on available width.
   The minimum column size shrinks on narrow viewports so cards always wrap
   rather than overflowing. This keeps the dashboard usable on low-res POS
   terminals (1024x768), tablets, and phones without requiring a browser
   zoom-out.

   .dashboard-grid-nested is the panel a module group expands into (see
   renderModuleCards() in js/modules/Dashboard.js). It is named in every rule
   below rather than given its own set, because a group's children should sit
   in the same columns at the same size as the cards above them — a separate
   set would be one more thing to keep in step at four breakpoints. Without a
   template it inherits nothing from the `grid` utility but a single column,
   which laid the children out one per full-width row. */
.dashboard-grid,
.dashboard-grid-nested {
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}

/* Small phones: fit two cards per row */
@media (max-width: 480px) {
    .dashboard-grid,
    .dashboard-grid-nested {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
        padding: 0.75rem !important;
        max-width: 100% !important;
    }
    .dashboard-grid .card,
    .dashboard-grid .module-card {
        padding: 0.75rem !important;
    }
    .dashboard-grid .card i,
    .dashboard-grid .module-card i {
        font-size: 1.75rem !important;
    }
}

/* Tablets / small POS terminals (incl. 1024x768): auto-fill with a
   smaller minimum so every card fits and the row wraps cleanly. */
@media (min-width: 481px) and (max-width: 1024px) {
    .dashboard-grid,
    .dashboard-grid-nested {
        grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)) !important;
        gap: 1rem !important;
        padding: 1rem !important;
        max-width: 100% !important;
    }
    .dashboard-grid .card,
    .dashboard-grid .module-card {
        padding: 1rem !important;
    }
}

/* Medium desktops */
@media (min-width: 1025px) and (max-width: 1439px) {
    .dashboard-grid,
    .dashboard-grid-nested {
        grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)) !important;
    }
}

/* Large desktops — allow more, smaller cards so screen real-estate is used */
@media (min-width: 1440px) {
    .dashboard-grid,
    .dashboard-grid-nested {
        grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)) !important;
    }
}

/* Dashboard card icons follow the theme color variable */
.dashboard-grid .card i,
.dashboard-grid .module-card i {
    color: var(--cybex-dashboard-icon, var(--color-primary));
}

/* Module name labels: wrap to a new line when the text would exceed the
   card width, breaking at word boundaries. Long single words fall back to
   character-level breaking so they never overflow the card border. */
.dashboard-grid .module-card .label,
#categoriesGrid .module-card .label {
    display: block;
    width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    text-align: center;
    line-height: 1.2;
}

#columnContextMenu{
    z-index: var(--cybex-z-context-menu);
}

tbody tr.selected {
    background-color: var(--color-primary);
    color: var(--color-primary-content);
}


/* Add visible borders to form fields that lack daisyUI border classes */
input:not(.input-bordered):not(.file-input):not(.toggle),
select:not(.select-bordered),
textarea:not(.textarea-bordered) {
    border: var(--cybex-border-w) solid var(--cybex-border-default);
    border-radius: var(--cybex-radius-sm);
    border-width: var(--cybex-border-w);
}

/* Style buttons in modal headers to look more prominent */
.modal-header button,
.modal-header .btn {
    border: var(--cybex-border-w) solid var(--color-base-300);
    box-shadow: var(--cybex-modal-header-shadow);
    margin: 0 var(--cybex-space-1);
    padding: var(--cybex-space-1) var(--cybex-space-2);
}
#props .prop-field label {
    font-weight: var(--cybex-font-semibold);
}

#props .prop-field input {
    margin-bottom: var(--cybex-space-1);
}

/* Loader overlay for dashboard */
#dashboardLoader {
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    z-index: var(--cybex-z-dropdown);
}

/* Inventory Management Styles */
.tabs-container {
    display: flex;
    gap: var(--cybex-tabs-gap);
    margin-bottom: var(--cybex-tabs-margin-bottom);
    border: var(--cybex-border-w) solid var(--cybex-tab-container-border);
    border-radius: var(--cybex-tabs-radius);
    background: var(--cybex-tab-container-bg);
    padding: var(--cybex-space-1) var(--cybex-space-2) 0 var(--cybex-space-2);
}

.tab-btn {
    font-weight: var(--cybex-font-bold);
    border: none;
    border-radius: var(--cybex-radius-pill);
    margin-bottom: calc(-1 * var(--cybex-border-w));
    background: var(--cybex-tab-bg);
    color: var(--cybex-tab-text);
    box-shadow: none;
    transition: background var(--cybex-transition-fast), color var(--cybex-transition-fast);
}

.tab-btn.active {
    background: var(--cybex-tab-active-bg);
    color: var(--cybex-tab-active-text);
    box-shadow: var(--cybex-tab-active-shadow);
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--cybex-overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--cybex-z-modal-overlay);
    overflow: auto;
}

.modal-content {
    background: var(--cybex-modal-bg);
    padding: var(--cybex-modal-padding);
    border-radius: var(--cybex-radius-lg);
    max-width: var(--cybex-modal-max-w);
    width: var(--cybex-modal-w);
    box-shadow: var(--cybex-modal-shadow);
    overflow-y: auto;
    max-height: var(--cybex-modal-max-h);
}

.modal-content.small {
    max-width: var(--cybex-modal-small-max-w);
}

.modal-header {
    font-size: var(--cybex-text-xl);
    font-weight: var(--cybex-font-bold);
    margin-bottom: var(--cybex-space-2);
    text-align: left;
}

.modal-hr {
    border: 0;
    border-top: var(--cybex-border-w-md) solid var(--cybex-modal-header-border);
    margin-bottom: var(--cybex-space-6);
}

.form-group {
    margin-bottom: var(--cybex-space-4);
}

.form-label {
    display: block;
    margin-bottom: var(--cybex-space-2);
}

.wide-input {
    width: 100%;
}

.product-search-results {
    margin-top: var(--cybex-space-2);
}

.table-sm {
    font-size: var(--cybex-text-md);
    line-height: var(--cybex-leading-md);
}

.table-header {
    font-size: var(--cybex-text-lg);
}

.btn-xs {
    font-size: var(--cybex-text-base);
}

.btn-error {
    background-color: var(--cybex-btn-error-bg);
    color: var(--cybex-btn-error-text);
}

.btn-error:hover {
    background-color: var(--cybex-btn-error-bg-hover);
}

.btn-secondary {
    background-color: var(--cybex-btn-secondary-bg);
    color: var(--cybex-btn-secondary-text);
}

.btn-secondary:hover {
    background-color: var(--cybex-btn-secondary-bg-hover);
}

.btn-close {
    margin-top: var(--cybex-space-4);
    float: right;
}

.btn-margin {
    margin: var(--cybex-space-4) 0;
}

.warehouse-placeholder {
    padding: var(--cybex-space-8);
    text-align: center;
    color: var(--cybex-placeholder-text);
}

.btn-group {
    display: flex;
    gap: var(--cybex-space-4);
}

.btn-group .btn {
    margin: var(--cybex-space-4) 0;
}

.btn-group .btn:first-child {
    margin-left: 0;
}

.btn-group .btn:last-child {
    margin-right: 0;
}

.error-text {
    color: var(--cybex-error-text);
    margin-top: var(--cybex-space-4);
    display: none;
}

.error-cell {
    color: var(--cybex-error-text);
}

.placeholder-text {
    text-align: center;
    color: var(--cybex-placeholder-text);
}

#categoriesGrid{
    width: -webkit-fill-available;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--cybex-cat-grid-min), 1fr));
    gap: var(--cybex-space-4);
    /* Take the remaining vertical space in the left panel and scroll
       internally so a long category list stays on-screen instead of
       overflowing past the fixed-height #posScreen (which clips it). */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    align-content: start;
}

#categoriesGrid.cat-grid-two-cols{
    grid-template-columns: repeat(2, 1fr);
}

#categoriesGrid .module-card{
    border: var(--cybex-border-w) solid var(--cybex-border-dark);
    padding: var(--cybex-space-3);
    text-align: center;
    box-shadow: var(--cybex-card-shadow);
    cursor: pointer;
    border-radius: var(--cybex-radius-lg);
}

#posScreen {
    padding: 0 !important;
    margin: 0 !important;
    gap: 0.5rem !important;
    /* Keep the three-panel layout on a single row so the right-hand
       action column never wraps below the middle panel. Mobile/stacked
       layouts are handled explicitly via flex-direction: column in the
       narrow-viewport media queries below. */
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    max-height: 90vh;
}
/* Main POS (current interface, container has the .flex-row class): the
   0.5rem gap above left the middle search/cart panel touching the left
   categories panel. Widen the inter-panel gap here only, so the New POS
   beta interface (#posScreen without .flex-row) keeps its own spacing. */
#posScreen.flex-row {
    gap: 1.75rem !important;
}
#POS-left-panel{
    min-width: var(--cybex-pos-left-min-w);
    width: var(--cybex-pos-left-w);
    max-width: 22rem;
    padding: 0;
    margin: 0;
    gap: 0;
    flex-shrink: 0;
    /* Bound the column height to its parent so #categoriesGrid can flex
       and scroll rather than grow past the panel. */
    min-height: 0;
    overflow: hidden;
}
#POS-panel-right{
    width: 10.5rem !important;
    min-width: 9.5rem;
    max-width: 14rem;
    flex-shrink: 0;
}
#POS-buttons, #POS-panel-right{
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}
#POS-buttons .btn, #POS-panel-right .btn{
    padding: var(--cybex-space-3);
    font-size: large;
    font-weight: var(--cybex-font-semibold);
    height: fit-content;
}

/* Ensure the central products area can shrink below its contents'
   intrinsic size so it never pushes the right action column off-screen. */
#posScreen > .flex-1,
#posScreen > [class*="flex-col"][class*="flex-1"] {
    min-width: 0;
    flex: 1 1 auto;
}

/* The products table has min-w-[600px] for readability. Let it scroll
   horizontally inside its wrapper instead of expanding the page. */
#posScreen #productsTable {
    max-width: 100%;
}

/* Ensure the middle panel's products table scrolls horizontally at ANY
   viewport size, rather than pushing the right action column off-screen. */
#posScreen .overflow-x-auto {
    overflow-x: auto;
    max-width: 100%;
}

/* ---------------------------------------------------------------
   Responsive POS screen.
   The POS template renders three side-by-side panels:
     #POS-left-panel  (categories + numeric pad)   — fixed width
     middle panel     (search + products + total)  — flex:1
     #POS-panel-right (action buttons, inline 15%) — fixed width
   On low-resolution POS terminals (1024x768) the inline widths push
   the right panel off-screen because the products table declares a
   min-width of 600px. We keep the three-panel horizontal layout
   (which is what touch-based terminal operators expect) but tighten
   the side-panel widths so the middle table can scroll inside its
   own wrapper instead of overflowing the page. On true phone-sized
   viewports (<640px) we fall back to a stacked layout.
   Inline styles on the right panel use !important to override them.
   --------------------------------------------------------------- */

/* POS terminal / tablet (641px – 1279px):
   keep horizontal layout, shrink side panels, enforce middle scroll. */
@media (min-width: 641px) and (max-width: 1279px) {
    #POS-left-panel {
        width: 26% !important;
        min-width: 10rem !important;
        flex-shrink: 0;
    }
    #POS-panel-right {
        width: 9.5rem !important;
        min-width: 9rem !important;
        flex-shrink: 0;
    }
    #POS-panel-right .btn,
    #POS-buttons .btn {
        font-size: 0.8125rem;
        padding: 0.375rem 0.5rem;
    }
    /* The products table has min-w-[600px] — scroll it inside its
       own wrapper rather than stretching the page. */
    #posScreen .overflow-x-auto {
        overflow-x: auto;
        max-width: 100%;
    }
}

/* Narrower POS terminals / large phones (481px – 640px):
   stack vertically. Three side-by-side panels no longer fit. */
@media (min-width: 481px) and (max-width: 640px) {
    #posScreen {
        flex-direction: column !important;
        height: auto !important;
    }
    #POS-left-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        order: 1;
    }
    #posScreen > .flex-1,
    #posScreen > [class*="flex-col"][class*="flex-1"] {
        width: 100% !important;
        order: 2;
    }
    #POS-panel-right {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        order: 3;
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    #POS-panel-right .btn {
        flex: 1 1 auto;
        min-width: 7rem;
        width: auto !important;
    }
    #POS-buttons {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 0.25rem;
        width: 100%;
    }
    #POS-buttons .btn {
        flex: 1 1 auto;
        min-width: 7rem;
        width: auto !important;
    }
}

/* Phone (≤480px): same stacked layout, tighter spacing and smaller
   action buttons so two fit per row. */
@media (max-width: 480px) {
    #posScreen {
        flex-direction: column !important;
        height: auto !important;
    }
    #POS-left-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        order: 1;
    }
    #posScreen > .flex-1,
    #posScreen > [class*="flex-col"][class*="flex-1"] {
        width: 100% !important;
        order: 2;
    }
    #POS-panel-right {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        order: 3;
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    #POS-panel-right .btn,
    #POS-buttons .btn {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
        width: auto !important;
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem;
    }
    #POS-buttons {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 0.25rem;
        width: 100%;
    }
    #posScreen #productsTable {
        font-size: 0.8rem;
    }
}

/* Fullscreen modal styles */
.modal-box.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0;
    transform: none !important;
    display: flex;
    flex-direction: column;
    z-index: var(--cybex-z-fullscreen);
    background: var(--cybex-fullscreen-modal-bg);
}

.modal-box.fullscreen .modal-header {
    flex-shrink: 0;
    margin-bottom: var(--cybex-space-4);
}

.modal-box.fullscreen .modal-body {
    flex: 1;
    overflow: auto;
    margin-bottom: var(--cybex-space-4);
}

.modal-box.fullscreen .modal-action {
    flex-shrink: 0;
    margin-top: auto;
}

.modal-box.fullscreen .draggable-handle {
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 1;
    margin-bottom: var(--cybex-space-4);
    padding-bottom: var(--cybex-space-2);
    border-bottom: var(--cybex-border-w-lg) solid var(--cybex-fullscreen-border);
}

/* Ensure fullscreen modals appear above everything */
.modal.modal-open:has(.modal-box.fullscreen) {
    background-color: var(--cybex-overlay-bg-heavy);
    z-index: var(--cybex-z-modal-overlay);
}

/* Hide modal dragging functionality for fullscreen modals */
.modal-box.fullscreen .draggable-handle {
    cursor: default;
}

.modal-box.fullscreen .draggable-handle:hover {
    cursor: default;
}
.cartActions{
    flex-flow: row;
    align-items: center;
    gap: var(--cybex-space-1);
}
.qty-input{
    width: -webkit-fill-available;
}
#posScreen #productsTable td,
#posScreen #productsTable th{
    padding: 8px 8px;
}
#posScreen #productsTable th:nth-child(3),
#posScreen #productsTable td:nth-child(3){
    width: 6rem;
    max-width: 6rem;
}
#posScreen #productsTable th:nth-child(6),
#posScreen #productsTable td:nth-child(6){
    width: 1%;
    white-space: nowrap;
}
#posScreen #productsTable .cartActions{
    width: auto;
    justify-content: flex-end;
}
#posScreen #productsTable .qty-input{
    height: 1.75rem;
    min-height: 1.75rem;
    padding-top: 0;
    padding-bottom: 0;
}
#module-title{
    width:100%;
    margin: 0;
    padding: 0;
}
.aasHeader{
    width: 100%;
    font-size: var(--cybex-text-sm);
    text-align: center;
    color: var(--cybex-aas-header-text);
    text-transform: uppercase;
    background: var(--cybex-aas-header-bg);
    padding: var(--cybex-space-1) var(--cybex-space-2);
    margin: 0;
}
#module-close-btn{
    padding-left: 0;
    padding-right: var(--cybex-space-4);
    font-size: var(--cybex-text-2xl);
}
#work-area{
    height: --webkit-fill-available;
    background: var(--cybex-work-area-bg);
}
.grid-editor-table td,
.grid-editor-table th{
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
}
.grid-editor-table tr > td:nth-child(n+3):nth-child(-n+9),
.grid-editor-table tr > th:nth-child(n+3):nth-child(-n+9){
    padding-left: 0.35rem !important;
    padding-inline-start: 0.35rem !important;
}
.grid-editor-table input:not([type="checkbox"]):not([type="radio"]),
.grid-editor-table input.input,
.grid-editor-table input.input-sm{
    padding-left: 0.125rem !important;
    padding-right: 0.125rem !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
}
.grid-editor-table input[type="checkbox"],
.grid-editor-table input[type="radio"]{
    width: 1.25rem !important;
    height: 1.25rem !important;
    min-width: 1.25rem !important;
    margin: 0 auto;
    display: block;
}

/* =============================================================================
   Access level ladder — Module Access modal
   =============================================================================
   Admin / Manager / Branch Manager / User, drawn as selectable cells.

   Hand-written rather than Tailwind utilities on purpose. public/css/themes.css
   is a COMMITTED build artifact, and the Tailwind + DaisyUI versions in
   node_modules have drifted ahead of it — rebuilding it to pick up a few
   utilities also swaps in a newer DaisyUI whose .modal/.modal-open contract is
   inverted, which breaks every modal in the app. So this styling lives here,
   where no build step can move it, and reads its colours from the theme's own
   custom properties so it still follows whichever theme is active.
   ========================================================================== */

.access-tier-group {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .access-tier-group { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .access-tier-group { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* The fine-tune panel sits inside a module row and has no room for a grid of
   prose, so there the cells size to their own text and wrap. */
.access-tier-group.is-compact {
    display: flex;
    flex-wrap: wrap;
}

.access-tier-option {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-base-300, #e2e8f0);
    border-radius: 0.5rem;
    cursor: pointer;
    background-color: var(--color-base-100, #fff);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.access-tier-option:hover {
    background-color: var(--color-base-200, #f1f5f9);
}
/* Selected state is stamped on at render time from the draft, not derived with
   :checked, so the highlight cannot disagree with what will be saved. */
.access-tier-option.is-selected {
    border-color: var(--color-primary, #1e40af);
    background-color: color-mix(in oklab, var(--color-primary, #1e40af) 10%, transparent);
}
.access-tier-option input[type="radio"] {
    margin-top: 0.15rem;
    flex: 0 0 auto;
}

.access-tier-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
}
.access-tier-desc {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    line-height: 1.35;
    opacity: 0.65;
}

/* The org-wide block spans both columns of the caller's two-column grid. */
.access-tier-block {
    grid-column: 1 / -1;
    border: 1px solid var(--color-base-300, #e2e8f0);
    border-radius: 0.5rem;
    background-color: var(--color-base-100, #fff);
    padding: 1rem;
}
.access-tier-block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.access-tier-block-title { font-size: 0.875rem; font-weight: 600; }
.access-tier-hint { font-size: 0.75rem; opacity: 0.6; }
.access-tier-block .access-tier-group { margin-top: 0.75rem; }
.access-tier-block > .access-tier-hint { display: block; }
.access-tier-block > .access-tier-hint:last-child { margin-top: 0.75rem; }

/* Fine-tune panel heading row, same shape at a smaller scale. */
.access-tier-subhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.access-tier-subhead h5 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
}

/* Branch confinement picker, revealed under the Branch Manager rung. */
.access-tier-branch {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-base-300, #e2e8f0);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 28rem;
}
.access-tier-branch .access-tier-hint { opacity: 0.75; }