/* =============================================================================
   RESPONSIVE - tablet and mobile behaviour across the whole application
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Tablet / small laptop
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    :root { --content-pad-inline: 1.1rem; }

    .content { padding: 1.2rem 1.1rem 2.25rem; }
    .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

/* -----------------------------------------------------------------------------
   Sidebar becomes an off-canvas drawer
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width) !important;
        box-shadow: var(--shadow-lg);
    }

    body.sidebar-open .sidebar { transform: translateX(0); }

    /* The drawer state lives on the body; reveal the existing backdrop with
       it so taps outside the drawer land on the backdrop and close it. */
    body.sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; }

    body.sidebar-collapsed .sidebar { width: var(--sidebar-width) !important; }
    body.sidebar-collapsed .sidebar-brand,
    body.sidebar-collapsed .nav-item-label,
    body.sidebar-collapsed .nav-caret,
    body.sidebar-collapsed .nav-toggle,
    body.sidebar-collapsed .nav-group-label { display: revert; }
    body.sidebar-collapsed .nav-item { justify-content: flex-start; padding: .58rem .65rem; }
    body.sidebar-collapsed .nav-parent-row { justify-content: flex-start; }
    body.sidebar-collapsed .nav-parent-row .nav-item { flex: 1; }

    /* On a phone the drawer always shows the full menu, whether or not the
       desktop sidebar had been collapsed before the window was resized.
       These two rules outrank the collapsed-sidebar rule in layout.css. */
    body.sidebar-collapsed .sidebar .nav-parent.open > .nav-sub { display: block !important; }
    body.sidebar-collapsed .sidebar .nav-parent:not(.open) > .nav-sub { display: none !important; }

    .main,
    body.sidebar-collapsed .main { margin-left: 0 !important; }

    .topbar { padding: 0 .9rem; }
}

/* -----------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    body { font-size: 14.5px; }

    /* Kept in sync with .content's inline padding below: mobile.css uses this
       to give the sticky page header a full-bleed background. */
    :root { --content-pad-inline: .85rem; }

    .content { padding: 1rem .85rem 2rem; }

    .page-title { font-size: 1.15rem; }
    .page-header { margin-bottom: 1rem; }
    .page-actions { width: 100%; }
    .page-actions .btn { flex: 1 1 auto; }

    .kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: .7rem;
    }

    .kpi-card { padding: .85rem; gap: .65rem; }
    .kpi-icon { width: 38px; height: 38px; border-radius: 10px; }
    .kpi-value { font-size: 1.15rem; }
    .kpi-label { font-size: .72rem; }

    .card-body { padding: 1rem; }
    .card-header { padding: .85rem 1rem; }

    .topbar { height: 58px; gap: .5rem; }
    :root { --topbar-height: 58px; }

    .topbar-search { max-width: none; }
    .topbar-search-hint { display: none; }

    .topbar-user-info { display: none; }
    .topbar-user { padding: .2rem; }

    .toast-stack {
        top: calc(var(--topbar-height) + 8px);
        left: 10px;
        right: 10px;
        max-width: none;
    }

    .grid-2, .grid-3, .grid-2-1 { grid-template-columns: 1fr; gap: 1rem; }

    .chart-box { height: 250px; }
    .chart-box.chart-sm { height: 200px; }

    .stock-status-grid { grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); gap: .5rem; }
    .stock-status-item { padding: .75rem .4rem; }
    .stock-status-value { font-size: 1.1rem; }
    .stock-status-label { font-size: .7rem; }

    .quick-actions { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: .55rem; }
    .quick-action { padding: .8rem .4rem; font-size: .78rem; }
    .quick-action-icon { width: 34px; height: 34px; }

    .filter-bar { padding: .85rem; gap: .5rem; }
    .filter-bar .form-group { min-width: 0; flex: 1 1 100%; }

    .modal-dialog { max-width: none; margin: 0; max-height: 100vh; border-radius: 0; }
    .modal { padding: 0; }
    .modal-footer { border-radius: 0; }
    .modal-footer .btn { flex: 1 1 auto; }

    .btn { padding: .55rem .9rem; }
    .btn-block-mobile { width: 100%; }

    .mini-stat { padding: .7rem .8rem; gap: .6rem; }

    /* The old negative-margin bleed on .table-wrap is gone on purpose: it made
       the wrapper wider than the viewport and fought the page padding. */
}

/* -----------------------------------------------------------------------------
   Small phones (320 - 400 px) - the whole app must stay usable
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
    :root { --content-pad-inline: .6rem; }

    .content { padding: .85rem .6rem 1.75rem; }

    .kpi-grid { grid-template-columns: 1fr 1fr; gap: .55rem; }
    .kpi-card { padding: .7rem; flex-direction: column; gap: .4rem; }
    .kpi-icon { width: 34px; height: 34px; }
    .kpi-value { font-size: 1.02rem; }
    .kpi-label { font-size: .68rem; white-space: normal; }

    .card-body { padding: .8rem; }
    .card-header { padding: .7rem .8rem; }

    .stock-status-grid { grid-template-columns: 1fr 1fr; }
    .quick-actions { grid-template-columns: 1fr 1fr; }

    .btn { font-size: .84rem; padding: .5rem .75rem; }
    .page-actions .btn { flex: 1 1 100%; }

    .page-title { font-size: 1.05rem; }
    .modal-body { padding: 1rem; }
    .modal-header, .modal-footer { padding: .8rem 1rem; }
}

/* -----------------------------------------------------------------------------
   Touch devices - remove hover-only affordances and enlarge tap targets
   -------------------------------------------------------------------------- */
@media (hover: none) {
    .kpi-card:hover,
    .quick-action:hover,
    .stock-status-item:hover { transform: none; }

    .nav-item { padding-top: .68rem; padding-bottom: .68rem; }
    .dropdown-item { padding: .65rem .7rem; }
}

/* -----------------------------------------------------------------------------
   Landscape phones
   -------------------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
    /* The POS panels scroll with the page on phones (pos.css), so there is no
       nested result box to cap here. */
    .modal-dialog { max-height: 96vh; }
    .sidebar-nav { padding-bottom: 1rem; }
}

/* -----------------------------------------------------------------------------
   Large desktop
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
    .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }
    .content { padding: 1.6rem 2rem 3rem; }
}

/* -----------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}