/* ------------------------------------------------------------------
   responsive.css — mobile & tablet layout fixes

   Loaded after the NOWA theme stylesheets (see
   layouts/components/styles.blade.php and custom-styles.blade.php).
   The theme is only off-canvas below 768px and keeps a 240px sidebar on
   tablets; page content also relies on wide tables, fixed-width inputs
   and non-wrapping flex toolbars. Everything here is scoped by media
   query so desktop (>= 992px) is untouched unless stated.

   Breakpoints (Bootstrap 5): xs <576, sm 576-767, md 768-991, lg 992+
   ------------------------------------------------------------------ */


/* ==================================================================
   1. Sidebar & header: off-canvas on tablets too (768-991px)

   Below 768px the theme already slides the sidebar in with
   body.sidenav-toggled. Between 768px and 991px it instead pins a 240px
   sidebar and "sidenav-toggled" means the icon-only mini mode, so a
   different class (sidebar-open-md, set by responsive.js) drives the
   drawer here and none of the mini-mode styling is involved.
   ================================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
    .app {
        overflow-x: hidden;
    }
    .app .app-sidebar,
    .app.sidenav-toggled .app-sidebar {
        left: -240px;
        top: 64px !important;
        width: 240px !important;
        z-index: 1029 !important;
        overflow-y: auto;
    }
    .app .app-content,
    .app.sidenav-toggled .app-content {
        margin-left: 0;
    }
    .app .main-header,
    .app.sidenav-toggled .main-header {
        padding-left: 0;
    }
    .app.sidebar-open-md .app-sidebar {
        left: 0;
    }
    .app .app-sidebar__overlay {
        visibility: hidden;
        position: fixed;
        top: 64px; /* keep the header (and its toggle) usable */
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 1028;
        background: rgba(20, 17, 45, 0.35);
    }
    .app.sidebar-open-md .app-sidebar__overlay {
        visibility: visible;
    }
    .app.sidebar-open-md .app-sidebar__toggle .open-toggle {
        display: none;
    }
    .app.sidebar-open-md .app-sidebar__toggle .close-toggle {
        display: block;
        color: #000;
        font-size: 18px;
        line-height: 42px;
    }

    /* The sidebar logo block sits behind the header on tablets; use the
       header's own (mobile) logo instead. */
    .main-sidebar-header {
        display: none !important;
    }
    .main-sidemenu {
        margin-top: 20px !important;
    }
    .responsive-logo {
        display: block;
    }
    .responsive-logo .header-logo {
        display: block;
        margin: 0 auto;
        left: 0;
        right: 0;
        text-align: center;
        position: absolute;
        top: 10px;
    }
    .app-sidebar__toggle {
        order: -1;
        text-align: center;
    }
    .side-header {
        width: auto;
        position: static;
    }
    .main-header .main-header-left {
        margin-left: 0 !important;
    }

    /* Right-hand header nav collapses into the kebab, exactly like phones.
       The theme forces the collapse open from 768px; keep it closed until
       Bootstrap's collapse adds .show / .collapsing. */
    .navbar-expand-lg.responsive-navbar .navbar-collapse:not(.show):not(.collapsing) {
        display: none !important;
    }
    .navbar-expand-lg.responsive-navbar .navbar-collapse.show,
    .navbar-expand-lg.responsive-navbar .navbar-collapse.collapsing {
        display: block !important;
    }
    .main-header .navbar-toggler.navresponsive-toggler {
        display: inline-block !important;
    }
    .responsive-navbar.navbar .navbar-collapse {
        padding: 0;
        width: 100%;
        background: #fff;
        margin-top: 0;
        z-index: 9999;
        top: 63px;
        border-bottom: 1px solid #f0f0ff;
        border-top: 1px solid #f0f0ff;
        position: fixed;
        left: 0;
        right: 0;
    }
    .responsive-navbar.navbar {
        position: relative !important;
        display: flex;
        top: -5px;
        margin: 0;
        margin-bottom: 0 !important;
        padding: 0;
    }
    .responsive-navbar.navbar .new.nav-link {
        margin: 10px 6px !important;
    }
    .responsive-navbar.navbar .dropdown {
        position: initial;
    }
    .header-icons .new.nav-link {
        position: relative;
        margin: auto 6px !important;
    }
    .main-header-message .dropdown-menu,
    .main-header-notification .dropdown-menu,
    .main-profile-menu .dropdown-menu {
        width: 95% !important;
        left: 5px !important;
        right: 5px !important;
        top: 60px !important;
        margin: 0 auto;
    }
    .main-header-message,
    .main-header-notification,
    .main-profile-menu,
    .nav-link.icon {
        position: inherit !important;
    }
}

@media (max-width: 767.98px) {
    /* Phones: the theme's drawer, plus a backdrop so tapping outside closes it */
    .app .app-sidebar__overlay {
        top: 64px;
        background: rgba(20, 17, 45, 0.35);
    }
    .app.sidenav-toggled .app-sidebar {
        overflow-y: auto;
    }
}

@media (min-width: 992px) {
    /* The backdrop element is injected by responsive.js; desktop never uses it */
    .app-sidebar__overlay {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .main-header .main-header-right {
        margin-left: auto;
    }
    /* Clear Cache + attendance buttons live in the kebab menu here */
    .header-mobile-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        width: 100%;
        border-bottom: 1px solid #f0f0ff;
    }
    .header-mobile-actions .btn {
        padding: 0.25rem 0.6rem;
        font-size: 12.5px;
    }
    .header-mobile-actions .alert {
        margin: 0 !important;
        padding: 0.3rem 0.6rem;
        font-size: 12px;
    }
    /* The mobile kebab menu lays items out in a row */
    .responsive-navbar .navbar-collapse .header-icons {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        float: none !important;
        padding: 4px 10px;
    }
    .responsive-navbar .navbar-collapse .header-icons > li {
        padding-top: 0 !important;
    }
    .responsive-navbar .navbar-collapse .main-profile-menu h6 {
        white-space: nowrap;
    }
    /* Off-canvas drawer scrolls independently of the page */
    .app-sidebar {
        -webkit-overflow-scrolling: touch;
    }
    /* Sidebar prev/next scroller arrows only make sense in horizontal mode */
    .slide-left,
    .slide-right {
        display: none !important;
    }
}


/* ==================================================================
   2. Content container, cards & typography
   ================================================================== */
@media (max-width: 991.98px) {
    .main-content .main-container,
    .main-content > .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }
    .main-content .main-container > .row,
    .main-content .main-container > form > .row {
        margin-left: -6px;
        margin-right: -6px;
    }
    .main-content .main-container > .row > [class*="col-"],
    .main-content .main-container > form > .row > [class*="col-"] {
        padding-left: 6px;
        padding-right: 6px;
    }
    .breadcrumb-header {
        flex-wrap: wrap;
        margin-top: 12px;
        margin-bottom: 10px;
    }
    .breadcrumb-header .right-content,
    .breadcrumb-header .left-content {
        width: 100%;
    }
    .breadcrumb-header .right-content {
        margin-top: 6px;
    }
    .breadcrumb-header .breadcrumb {
        flex-wrap: wrap;
    }
    .main-footer .container-fluid {
        text-align: center;
        font-size: 12px;
        line-height: 1.5;
        padding: 8px 12px;
    }
}

@media (max-width: 575.98px) {
    .card-body {
        padding: 0.9rem;
    }
    .card-header {
        padding: 0.65rem 0.9rem;
    }
    .card-header .card-title,
    .card-title {
        font-size: 14px;
    }
    .main-content-title {
        font-size: 16px;
        line-height: 1.6;
    }
    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.35rem; }
    h3, .h3 { font-size: 1.2rem; }
    h4, .h4 { font-size: 1.05rem; }
    .modal-body,
    .modal-header,
    .modal-footer {
        padding: 0.9rem;
    }
}


/* ==================================================================
   3. Tables
   The theme's .table-responsive already scrolls; these rules make sure
   the wrapper actually constrains the table (flex/grid parents need
   min-width: 0) and cover tables that were never wrapped (responsive.js
   wraps those at runtime).
   ================================================================== */
@media (max-width: 991.98px) {
    .table-responsive {
        min-width: 0;
        max-width: 100%;
    }
    /* Flex/grid children default to min-width:auto, which lets a wide table
       push the whole layout out instead of scrolling inside its wrapper. */
    .main-content .row > [class*="col-"],
    .main-content .card,
    .main-content .card-body,
    .main-content .card-header,
    .main-content .card-footer,
    .main-content .tab-content,
    .main-content .tab-pane,
    .main-content .accordion-body,
    .main-content .collapse,
    .main-content .collapsing,
    .main-content .flex-grow-1,
    .main-content .flex-fill,
    .main-content .d-flex > * {
        min-width: 0;
    }
    .main-content table.table {
        max-width: 100%;
    }
    /* Tables inside Livewire components are not wrapped by responsive.js
       (it must not restructure morphdom-managed DOM); any that lack a
       wrapper in Blade scroll on their own instead. */
    .main-content [wire\:id] table.table:not(.table-responsive > table) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 4px;
        column-gap: 2px;
    }
    /* Pagination links are the smallest tap targets on most pages; the
       theme's 28px is below the 40px Apple/Google minimum. */
    .pagination .page-link {
        min-width: 38px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .dataTables_wrapper .row {
        margin-left: 0;
        margin-right: 0;
    }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: left !important;
        float: none !important;
        margin-bottom: 6px;
    }
    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        margin-left: 0 !important;
    }
    .dataTables_wrapper .dataTables_filter label {
        width: 100%;
    }
    .dataTables_wrapper .dt-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 6px;
    }
    /* Keep cells on one line inside a scrolling table; wrapping every
       header into 3 lines makes the scroll worse, not better. */
    .table-responsive > .table th {
        white-space: nowrap;
    }
    .table-responsive > .table td .btn,
    .table-responsive > .table td .badge {
        white-space: nowrap;
    }
}

@media (max-width: 575.98px) {
    .main-content .table th,
    .main-content .table td {
        padding: 0.45rem 0.5rem;
        font-size: 12.5px;
    }
    .main-content .table .btn-sm,
    .main-content .table .btn-group-sm > .btn {
        padding: 0.2rem 0.45rem;
        font-size: 11.5px;
    }
    .pagination .page-link {
        padding: 0.3rem 0.55rem;
        font-size: 13px;
    }
    /* Laravel's default paginator prints "Showing x to y of z" + links in
       a flex row; stack them. */
    nav[role="navigation"] > .d-flex,
    nav[aria-label="Pagination Navigation"] > .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
    }
}


/* ==================================================================
   4. Flex toolbars, button rows & inline-width controls
   ================================================================== */
@media (max-width: 991.98px) {
    /* Toolbars written as .d-flex (title + buttons, search + actions) don't
       wrap by default and push the page sideways. Let them wrap; explicit
       .flex-nowrap and horizontal scrollers keep their behaviour. */
    .main-content .d-flex:not(.flex-nowrap):not(.overflow-auto):not(.overflow-scroll):not(.flex-column):not(.input-group):not(.progress) {
        flex-wrap: wrap;
    }
    .main-content .d-flex > .btn,
    .main-content .d-flex > .btn-group,
    .main-content .d-flex > form,
    .main-content .d-flex > a.btn {
        margin-bottom: 4px;
    }
    .main-content .d-inline-flex {
        flex-wrap: wrap;
    }
    .main-content .btn-toolbar,
    .main-content .btn-list {
        flex-wrap: wrap;
        gap: 4px;
    }
    /* Horizontal chip/tab rows (POS categories & brands) keep scrolling,
       but stay inside their card. position:relative makes the scroller the
       containing block of the absolutely-positioned .btn-check inputs, which
       otherwise widen the whole document. */
    .main-content .overflow-auto,
    .main-content .overflow-scroll {
        max-width: 100%;
        position: relative;
        -webkit-overflow-scrolling: touch;
    }
    .main-content .overflow-auto.d-flex > *,
    .main-content .overflow-scroll.d-flex > * {
        flex: 0 0 auto;
    }
    /* Bootstrap tabs: scroll sideways instead of stacking 8 tabs vertically */
    .main-content .nav-tabs:not(.flex-column),
    .main-content .nav-pills:not(.flex-column) {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .main-content .nav-tabs:not(.flex-column) .nav-link,
    .main-content .nav-pills:not(.flex-column) .nav-link {
        white-space: nowrap;
    }
    /* Fixed pixel widths on inputs/selects are the #1 cause of clipped
       forms. Cap them at the available width (inline width still applies
       when there is room). */
    .main-content [style*="width"] {
        max-width: 100%;
    }
    .main-content input[style*="width"],
    .main-content select[style*="width"],
    .main-content textarea[style*="width"],
    .main-content .form-control[style*="width"],
    .main-content .form-select[style*="width"],
    .main-content .select2-container[style*="width"] {
        max-width: 100% !important;
    }
    .main-content img,
    .main-content video,
    .main-content iframe,
    .main-content canvas {
        max-width: 100%;
    }
    /* Scale images down, but never override a height the markup set.
       An <img height="15"> with no width attribute falls back to its
       intrinsic size the moment height:auto wins (the country flag SVGs
       are 640x480), so only images that declare no height of their own -
       or that declare both dimensions, where height:auto is what keeps
       the aspect ratio after max-width shrinks them - get it. */
    .main-content img[width][height],
    .main-content img:not([height]):not([style*="height"]) {
        height: auto;
    }
    /* A tall image kept at its declared height would be squeezed sideways
       if max-width clamped it; letterbox it instead of distorting it. */
    .main-content img[height]:not([width]) {
        object-fit: contain;
    }
    .main-content pre {
        max-width: 100%;
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-word;
    }
    .main-content .select2-container {
        max-width: 100%;
    }
    .main-content .input-group {
        flex-wrap: wrap;
    }
    .main-content .input-group > .form-control,
    .main-content .input-group > .form-select {
        min-width: 120px;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    /* Search rows built from auto-width .col-md columns put 6-8 fields on
       one line; with the sidebar's 240px gone that is ~100px per field.
       Four per row, growing to fill the last line. */
    .main-content .row > .col-md {
        flex: 1 0 25%;
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    /* Phones: form controls that were given a pixel width go full width */
    .main-content input[style*="width"]:not([type="checkbox"]):not([type="radio"]),
    .main-content select[style*="width"],
    .main-content textarea[style*="width"],
    .main-content .form-control[style*="width"],
    .main-content .form-select[style*="width"],
    .main-content .form-floating[style*="width"],
    .main-content .form-group[style*="width"] {
        width: 100% !important;
    }
    .main-content .select2-container {
        width: 100% !important;
    }
    /* ...but a page-number box inside a paginator is a control, not a form
       field; full width would push the rest of the paginator onto its own
       line. */
    .main-content .pagination input {
        width: auto !important;
    }
    .main-content .d-flex > .form-floating,
    .main-content .d-flex > .form-group,
    .main-content .d-flex > .input-group,
    .main-content .d-flex > form.d-flex,
    .main-content .d-flex > form.d-inline-flex {
        flex: 1 1 100%;
    }
    .main-content .d-flex > form .form-control,
    .main-content .d-flex > form .form-select {
        flex: 1 1 140px;
    }
    /* Search rows use col-sm-2 for six fields in a row, which yields ~80px
       inputs at 576-767px. Two per row is the minimum for a form control.
       (Below 576px col-sm-* does not apply and fields already stack.) */
    .main-content .col-sm-1,
    .main-content .col-sm-2 {
        flex: 0 0 50%;
        max-width: 50%;
        width: 50%;
    }
    /* Form-floating labels get long ("Start Date") — keep them on a line */
    .form-floating > label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    /* Modals */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem) !important;
        width: auto !important;
    }
    .modal-footer {
        flex-wrap: wrap;
        gap: 4px;
    }
    .modal-footer > * {
        margin: 0;
    }
    /* Dropdown menus that are wider than the screen */
    .main-content .dropdown-menu {
        max-width: calc(100vw - 24px);
        overflow-x: hidden;
    }
    /* Floating chat windows */
    .chat-box {
        width: calc(100vw - 20px) !important;
        max-width: 360px;
        right: 10px !important;
    }
    /* Back-to-top button sits over content on phones */
    #back-to-top {
        right: 10px;
        bottom: 10px;
        width: 36px;
        height: 36px;
        line-height: 36px;
    }
    /* Auto-margins on col-md search rows: fields stack, so drop the
       fixed negative margins some pages add for alignment */
    .main-content .col-md[style*="margin-left"],
    .main-content [class*="col-md-"][style*="margin-left"] {
        margin-left: 0 !important;
    }
}

@media (max-width: 575.98px) {
    .main-content .btn-group:not(.btn-group-sm):not(.dropdown) {
        flex-wrap: wrap;
    }
    .main-content .alert {
        padding: 0.65rem 0.75rem;
        font-size: 13px;
    }
    .main-content .badge {
        white-space: normal;
    }
    /* Per-page selects declared w-auto sit in wrapped toolbars on phones */
    .main-content select.form-select.w-auto,
    .main-content select.form-control.w-auto {
        width: 100% !important;
    }
}


/* ==================================================================
   5. Page-specific shells that are not Bootstrap grid
   ================================================================== */
/* Permission switches list snake_case names that cannot break; this also
   overflowed the Team page card on a 1366px desktop. */
.main-content .form-check-label,
.main-content .form-label {
    overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
    /* layouts/new.blade.php (printable reports/invoices) has no sidebar or
       .main-content; the essentials from sections 3-4 apply there too. */
    .report-page .table-responsive {
        min-width: 0;
        max-width: 100%;
    }
    .report-page .row > [class*="col-"],
    .report-page .card,
    .report-page .card-body,
    .report-page .d-flex > * {
        min-width: 0;
    }
    .report-page .d-flex:not(.flex-nowrap):not(.flex-column) {
        flex-wrap: wrap;
    }
    .report-page [style*="width"] {
        max-width: 100%;
    }
    .report-page img {
        max-width: 100%;
    }
    /* Same rule as .main-content above: an explicit height attribute wins. */
    .report-page img[width][height],
    .report-page img:not([height]):not([style*="height"]) {
        height: auto;
    }
    .report-page img[height]:not([width]) {
        object-fit: contain;
    }
    .report-page > .row,
    .report-page > form > .row {
        margin-left: 0;
        margin-right: 0;
    }

    .support-grid {
        grid-template-columns: 1fr !important;
    }
    .support-grid > *,
    .support-panel {
        min-width: 0;
        max-width: 100%;
    }
    .support-shell {
        padding: 0.75rem;
    }
}

@media (max-width: 767.98px) {
    /* Sign-in / auth cards */
    .main-card-signin,
    .main-signin-wrapper .card {
        max-width: 100%;
    }
    .page.error-page1 .main-card-signin {
        margin: 0 12px;
    }
}


/* ==================================================================
   6. Print — the app already overrides for printing; make sure nothing
      here bleeds into print output.
   ================================================================== */
@media print {
    .app-sidebar__overlay,
    #back-to-top,
    .chat-box {
        display: none !important;
    }
}