/*
 * Mobile Responsive Fixes
 * =====================================================================
 * Comprehensive responsive design system for all screen sizes.
 * Fixes sidebar duplicate buttons, responsive layout, tables, and forms.
 *
 * Breakpoints:
 * - Mobile:  < 576px
 * - Tablet:  576px - 767px
 * - MD:      768px - 991px
 * - LG:      992px - 1199px
 * - XL:      >= 1200px
 */

/* =====================================================================
   SIDEBAR: Fix duplicate buttons and initialization flash
   ===================================================================== */

/* MOBILE ONLY: (< 768px) - Off-canvas drawer sidebar
 *
 * The actual off-canvas positioning, drawer width, dim overlay and
 * page-wrapper margin for this breakpoint are owned entirely by
 * design-system.css's "Mobile / narrow: hide sidebar off-screen" block
 * (selector body.content-wrapper .sidebar, which always matches here -
 * custom.js adds .content-wrapper to <body> at any width below 1170px,
 * so it's already present for every width this query covers).
 *
 * This file used to ALSO position .sidebar directly (position: fixed,
 * transform: translateX(-100%), z-index: 1030, its own overlay, etc.).
 * Because body.content-wrapper .sidebar (2 classes) is more specific than
 * plain .sidebar (1 class), design-system.css's left/width/z-index always
 * won for those properties - but transform had no competing rule there,
 * so it kept applying on top, stacking an extra offset on an element that
 * was already positioned via `left`. The two systems disagreeing on which
 * property drives the drawer (transform vs. left) - and on its width/z-
 * index - is exactly what produced the mis-sized, overlapping sidebar
 * instead of a clean hidden/full-drawer toggle. Keeping only ONE
 * implementation removes that fight; only the hamburger/desktop-toggle
 * visibility swap (not sidebar positioning) belongs here now.
 */
@media (max-width: 767px) {
    /* Show hamburger menu on mobile */
    .navbar-toggle {
        display: inline-block !important;
        z-index: 1040;
    }

    /* Hide desktop toggle on mobile */
    .open-close {
        display: none !important;
    }

    body {
        overflow-x: hidden;
    }
}

/* DESKTOP ONLY: (>= 768px) - Preserve original fixed sidebar layout */
@media (min-width: 768px) {
    /* Hide hamburger menu on desktop */
    .navbar-toggle {
        display: none !important;
    }

    /* Show desktop toggle button */
    .open-close {
        display: inline-block !important;
    }

    /* Desktop: Do NOT override sidebar - keep original styles */
    /* The body.fix-sidebar class in the HTML handles the layout:
       - .fix-sidebar .sidebar { position: fixed; width: 220px; }
       - .fix-sidebar .navbar-left { margin-left: 220px; }
       Let these original styles work - do not interfere!
    */

    /* Remove mobile overlay on desktop */
    body.sidebar-open::before {
        display: none !important;
    }

    body.sidebar-open::after {
        display: none !important;
    }
}

/* =====================================================================
   NAVBAR: Fix responsive layout
   ===================================================================== */

@media (max-width: 767px) {
    .navbar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
    }

    .top-left-part {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .navbar-header {
        position: relative;
        z-index: 1100;
        overflow: visible !important;
    }

    .navbar-top-links {
        display: flex;
        gap: 8px;
        padding: 0 !important;
        margin: 0 !important;
        position: relative;
        z-index: 1100;
    }

    .navbar-top-links li {
        display: flex;
        align-items: center;
    }

    .navbar-top-links li a {
        padding: 6px 8px !important;
        font-size: 16px;
    }

    .navbar-header,
    .navbar-top-links,
    .navbar-top-links > li,
    #top-notification-dropdown {
        overflow: visible !important;
    }

    .navbar-top-links .bootstrap-select,
    .navbar-top-links .bootstrap-select.open,
    body > .bootstrap-select {
        position: static !important;
        z-index: 2000 !important;
    }

    .navbar-top-links .bootstrap-select .dropdown-menu,
    body > .bootstrap-select > .dropdown-menu,
    #top-notification-dropdown .dropdown-menu {
        position: fixed !important;
        top: 56px !important;
        right: 12px !important;
        left: auto !important;
        width: min(220px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: min(70vh, 360px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 2000 !important;
        margin: 0 !important;
        border-radius: 12px !important;
        box-shadow: 0 16px 32px rgba(15, 23, 42, 0.22) !important;
    }

    #top-notification-dropdown .dropdown-menu {
        width: min(320px, calc(100vw - 24px)) !important;
        max-height: min(74vh, 420px) !important;
    }

    .navbar-top-links .bootstrap-select.open > .dropdown-menu,
    body > .bootstrap-select.open > .dropdown-menu,
    #top-notification-dropdown.open > .dropdown-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .ds-logout-label,
    .ds-timer-label {
        display: none;
    }
}

/* =====================================================================
   SIDEBAR SCROLL: allow long mobile menus to scroll without clipping
   ===================================================================== */

@media (max-width: 767px) {
    .sidebar,
    .sidebar .slimScrollDiv,
    .sidebar .sidebar-nav,
    .sidebar .navbar-collapse {
        max-height: calc(100vh - 56px) !important;
        height: calc(100vh - 56px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .sidebar .slimscrollsidebar,
    .sidebar-nav {
        max-height: calc(100vh - 56px) !important;
    }

    #side-menu {
        padding-bottom: 18px;
    }
}

/* =====================================================================
   TABLES: Responsive containers with horizontal scroll
   ===================================================================== */

@media (max-width: 767px) {
    /* Add horizontal scroll container to all tables */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin: 0 -12px;
        padding: 0 12px;
    }

    /* Ensure tables don't exceed viewport width */
    table {
        min-width: 100%;
    }

    /* Make table headers sticky during scroll */
    thead {
        position: sticky;
        top: 0;
        background: var(--ds-surface) !important;
        z-index: 10;
    }

    /* Reduce cell padding on mobile */
    td, th {
        padding: 8px 12px !important;
        font-size: 14px;
    }

    /* Action buttons should not wrap inside cells */
    .btn-group,
    .btn-xs {
        white-space: nowrap;
        display: inline-block;
    }
}

/* Tablet: Slightly looser spacing */
@media (min-width: 576px) and (max-width: 767px) {
    td, th {
        padding: 10px 14px !important;
    }
}

/* =====================================================================
   DASHBOARD: Responsive cards and grids
   ===================================================================== */

@media (max-width: 767px) {
    /* Stack all columns */
    .col-md-12,
    .col-md-6,
    .col-md-5,
    .col-md-4,
    .col-md-3 {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Dashboard stat cards: full width on mobile */
    .ds-stat-card {
        width: 100% !important;
        margin-bottom: 12px;
    }

    /* Chart containers: responsive height */
    .chart-container,
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Row spacing */
    .row {
        margin-left: -6px !important;
        margin-right: -6px !important;
    }

    [class*='col-'] {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* White boxes: reduce padding */
    .white-box {
        padding: 12px !important;
        margin-bottom: 12px;
    }

    /* Panels */
    .panel {
        margin-bottom: 12px !important;
    }

    .panel-heading {
        padding: 12px 14px !important;
    }

    .panel-body {
        padding: 12px !important;
    }
}

/* Tablet: Adjust spacing */
@media (min-width: 576px) and (max-width: 767px) {
    .white-box,
    .panel-body {
        padding: 14px !important;
    }

    .row {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }

    [class*='col-'] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* =====================================================================
   BUTTONS: Responsive sizing and wrapping
   ===================================================================== */

@media (max-width: 767px) {
    /* Full-width buttons by default */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 44px;
        font-size: 14px;
    }

    /* Button groups should stack vertically */
    .btn-group {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }

    .btn-group .btn {
        width: 100%;
        justify-content: center;
    }

    /* Multiple buttons in a row: wrap intelligently */
    .btn-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .btn-toolbar .btn {
        flex: 1 1 auto;
        min-width: 100px;
    }

    /* Larger touch targets */
    .btn-xs,
    .btn-sm {
        min-height: 36px;
        padding: 6px 12px !important;
    }

    /* Ensure buttons don't overflow containers */
    .btn-block {
        width: 100%;
        display: block;
    }
}

/* =====================================================================
   DROPDOWNS: Stay within viewport
   ===================================================================== */

@media (max-width: 767px) {
    .dropdown-menu {
        position: fixed !important;
        max-width: calc(100vw - 24px);
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 1050;
    }

    /* Align dropdowns to stay in viewport */
    .dropdown-menu.dropdown-menu-right {
        right: 12px !important;
        left: auto !important;
    }

    .dropdown-menu.dropdown-menu-left,
    .dropdown-menu:not(.dropdown-menu-right) {
        left: 12px !important;
        right: auto !important;
    }

    /* Smaller menu items on mobile */
    .dropdown-menu > li > a {
        padding: 10px 14px !important;
        font-size: 14px;
    }

    /* User profile dropdown */
    .navbar-top-links .dropdown-menu {
        min-width: 200px;
    }
}

/* =====================================================================
   FORMS: Responsive form layouts
   ===================================================================== */

@media (max-width: 767px) {
    .form-group {
        margin-bottom: 12px !important;
    }

    /* Full-width form inputs */
    input[type='text'],
    input[type='email'],
    input[type='password'],
    input[type='number'],
    textarea,
    select {
        width: 100% !important;
        max-width: 100%;
    }

    /* Larger input targets */
    input,
    textarea,
    select {
        min-height: 40px;
        padding: 8px 12px !important;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    textarea {
        min-height: 100px;
    }

    /* Form labels */
    .form-group label {
        display: block;
        margin-bottom: 6px;
        font-size: 14px;
    }

    /* Inline form groups should stack */
    .form-inline .form-group {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-right: 0;
        margin-bottom: 12px;
    }

    .form-inline .btn {
        width: 100%;
    }
}

/* =====================================================================
   MODALS: Responsive dialog sizing
   ===================================================================== */

@media (max-width: 767px) {
    .modal-dialog {
        width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }

    .modal-sm {
        max-width: 90vw !important;
    }

    .modal-md {
        max-width: 95vw !important;
    }

    .modal-lg {
        max-width: 98vw !important;
    }

    .modal-content {
        max-height: 85vh;
        overflow-y: auto;
    }

    .modal-header,
    .modal-footer {
        padding: 12px 14px !important;
    }

    .modal-body {
        padding: 14px !important;
    }
}

/* =====================================================================
   BREADCRUMBS: Responsive breadcrumb trails
   ===================================================================== */

@media (max-width: 767px) {
    .breadcrumb {
        padding: 6px 0 !important;
        margin-bottom: 12px !important;
        flex-wrap: wrap;
        gap: 4px;
    }

    .breadcrumb > li {
        font-size: 12px;
    }

    .breadcrumb > li + li:before {
        padding: 0 4px;
    }
}

/* =====================================================================
   PAGE TITLE / HEADER: Responsive title bars
   ===================================================================== */

@media (max-width: 767px) {
    .bg-title {
        padding: 8px 12px !important;
    }

    .page-title {
        font-size: 18px !important;
        line-height: 24px !important;
    }

    .col-lg-3,
    .col-lg-6,
    .col-lg-9 {
        width: 100% !important;
    }
}

/* =====================================================================
   ALERTS & MESSAGES: Responsive notification layout
   ===================================================================== */

@media (max-width: 767px) {
    .alert {
        padding: 10px 12px !important;
        margin-bottom: 8px !important;
        font-size: 13px;
    }

    .alert .close {
        padding: 0;
        line-height: 20px;
    }
}

/* =====================================================================
   TEXT UTILITIES: Prevent text overflow
   ===================================================================== */

@media (max-width: 767px) {
    /* Prevent long text from breaking layout */
    p, span, a, div {
        word-wrap: break-word;
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    /* Code blocks should scroll */
    code, pre {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =====================================================================
   PAGINATION: Responsive pagination controls
   ===================================================================== */

@media (max-width: 767px) {
    .pagination {
        flex-wrap: wrap;
        gap: 4px;
    }

    .pagination > li > a,
    .pagination > li > span {
        padding: 6px 8px !important;
        font-size: 12px;
    }

    /* Hide page numbers on very small screens */
    @media (max-width: 480px) {
        .pagination > li:not(:first-child):not(:last-child) {
            display: none;
        }
    }
}

/* =====================================================================
   UTILITIES: General responsive helpers
   ===================================================================== */

@media (max-width: 767px) {
    /* Prevent horizontal overflow */
    body {
        overflow-x: hidden;
    }

    /* Ensure all containers fit viewport */
    .container,
    .container-fluid {
        width: 100%;
        padding-left: 12px;
        padding-right: 12px;
        overflow-x: hidden;
    }

    /* Hide elements designed for desktop */
    .hidden-xs { display: none !important; }
    .visible-xs { display: block !important; }

    /* Margin/padding adjustments */
    .m-l-0 { margin-left: 0 !important; }
    .m-r-0 { margin-right: 0 !important; }
    .p-l-0 { padding-left: 0 !important; }
    .p-r-0 { padding-right: 0 !important; }
}

/* Bootstrap 3's real .hidden-sm/.hidden-md are bounded both sides (sm =
   768-991px, md = 992-1199px only) - only .hidden-xs (already <768px, no
   floor) and .hidden-lg (already >=1200px, no ceiling) are meant to be
   open-ended. These two were missing their "and (max-width: ...)" upper
   bound, so ".hidden-sm"/".hidden-md" (used e.g. by the Sticky Notes bar
   to hide itself on small screens) matched - and force-hid with
   !important - on every viewport from 768px up, including full desktop. */
@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm { display: none !important; }
    .visible-sm { display: block !important; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-md { display: none !important; }
    .visible-md { display: block !important; }
}

@media (min-width: 1200px) {
    .hidden-lg { display: none !important; }
    .visible-lg { display: block !important; }
}

/* =====================================================================
   WEBKIT SCROLL BEHAVIOR: Smooth scrolling for mobile
   ===================================================================== */

@media (max-width: 767px) {
    html {
        scroll-behavior: smooth;
    }

    .sidebar,
    .sidebar-nav,
    .table-responsive,
    [style*="overflow"]:not(body) {
        -webkit-overflow-scrolling: touch;
    }
}

/* =====================================================================
   FIX: Prevent double tap zoom on buttons
   ===================================================================== */

@media (max-width: 767px) {
    button,
    a,
    input[type="button"],
    input[type="submit"] {
        touch-action: manipulation;
    }
}