html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* ═══════════════════════════════════════════════
   JENAIR SYSTEMS — GLOBAL MOBILE STYLES
   Applied across all layouts
═══════════════════════════════════════════════ */

/* ── Prevent horizontal scroll everywhere ── */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ── Navbar brand text on small screens ── */
@media (max-width: 576px) {
    .navbar-brand span {
        font-size: 0.9rem !important;
    }

    .navbar-brand img {
        height: 28px !important;
    }
}

/* ── _Layout_Public.cshtml nav ── */
@media (max-width: 640px) {
    nav[style] {
        padding: 10px 14px !important;
        flex-wrap: wrap;
        gap: 8px;
    }

        nav[style] div:last-child {
            gap: 6px !important;
        }

        nav[style] a,
        nav[style] button {
            padding: 5px 10px !important;
            font-size: 11px !important;
        }
}

/* ── POS Layout — hide text labels on very small ── */
@media (max-width: 480px) {
    .pos-module-nav span.nav-label {
        display: none;
    }
}

/* ── Tables — make scrollable on mobile ── */
.table-responsive-mobile {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Cards stack on mobile ── */
@media (max-width: 768px) {
    .summary-row,
    .stat-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 400px) {
    .summary-row,
    .stat-row {
        grid-template-columns: 1fr !important;
    }
}

/* ── Forms ── */
@media (max-width: 576px) {
    .f-row {
        grid-template-columns: 1fr !important;
    }

    .form-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Dev dashboard ── */
@media (max-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr !important;
    }
}
/* ═══════════════════════════════════════════
   POS PAGE SCROLL FIX
   Ensures all POS module pages are scrollable
═══════════════════════════════════════════ */

/* Stock and Accounts wraps */
.stock-wrap,
.acc-wrap {
    min-height: calc(100vh - 52px) !important;
    height: auto !important;
    overflow: visible !important;
}

/* Inner content areas should scroll naturally */
.stock-content,
.acc-content {
    min-height: 0;
    overflow: visible !important;
    height: auto !important;
}

/* But keep the split layout working */
.split-layout,
.tbl-wrap,
.right-list,
.left-form,
.page-body {
    overflow-y: auto;
    overflow-x: auto;
}

/* In wwwroot/css/site.css */
/* Change ALL occurrences of @@media to @media */

@media (max-width: 768px) {
    .stock-wrap,
    .acc-wrap {
        flex-direction: column !important;
    }

    .stock-nav,
    .acc-nav {
        width: 100% !important;
        height: auto !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap;
        border-right: none !important;
        border-bottom: 1px solid rgba(0,210,230,0.12);
    }

    .stock-nav-title,
    .acc-nav-title {
        display: none !important;
    }

    .nav-section-label {
        display: none !important;
    }

    .nav-btn {
        width: auto !important;
        margin: 4px !important;
        padding: 8px 12px !important;
        white-space: nowrap;
        font-size: 11px !important;
    }

    .stock-content,
    .acc-content {
        width: 100% !important;
    }

    .split-layout {
        flex-direction: column !important;
        height: auto !important;
    }

    .left-form {
        width: 100% !important;
        max-width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .right-list {
        width: 100% !important;
        max-height: none !important;
    }
}