/* ============================================================
   mobile.css — Admin Panel Mobile Responsive Styles
   Construction Management System — shafirms.in
   ============================================================ */

/* ============================================================
   1. SIDEBAR: slide-in overlay on mobile
   ============================================================ */

/* Closed by default — completely off-screen to the left.
   We use `left: -105%` (NOT transform) so the sidebar's own
   background/float children render normally inside the fixed box.
   105% of viewport = safely past the left edge regardless of sidebar width. */
@media (max-width: 767px) {

    .page-container .page-sidebar {
        float: none !important;
        position: fixed !important;
        left: -105% !important;        /* push completely off-screen */
        top: 0 !important;
        width: 240px !important;        /* slightly generous width */
        max-width: 82vw !important;
        height: 100vh !important;
        z-index: 1100 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        background: #ffffff !important; /* solid opaque background — no see-through */
        -webkit-transition: left 0.3s ease;
        transition: left 0.3s ease;
        box-shadow: none;
    }

    /* Open state: slide fully into view */
    .page-container.mobile-sidebar-open .page-sidebar {
        left: 0 !important;
        box-shadow: 6px 0 20px rgba(0, 0, 0, 0.5) !important;
    }

    /* Inner x-navigation: fill the sidebar completely */
    .page-container .page-sidebar .x-navigation {
        width: 100% !important;
        min-height: 100vh !important;
        background: #ffffff !important;
    }

    /* Dark overlay — sits between content and the open sidebar */
    .mobile-sidebar-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.58);
        z-index: 1099;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .page-container.mobile-sidebar-open .mobile-sidebar-overlay {
        display: block !important;
    }

    /* Content: full width — sidebar is out of normal flow */
    .page-container .page-content,
    .page-container.page-navigation-toggled .page-content,
    .page-container.page-container-wide .page-content {
        margin-left: 0 !important;
    }

    /* Sidebar menu items — bigger touch targets */
    .page-sidebar .x-navigation li > a {
        padding: 12px 14px !important;
        font-size: 13px !important;
    }

    /* Sidebar group headings */
    .page-sidebar .x-navigation li.xn-title {
        padding: 14px 10px 8px !important;
    }
}

/* ============================================================
   2. TOP NAVBAR — tighten on mobile
   ============================================================ */
@media (max-width: 767px) {

    .x-navigation.x-navigation-horizontal.x-navigation-panel {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-align-items: center;
        align-items: center;
        height: 50px !important;
        padding: 0 4px;
        overflow: hidden;
    }

    /* Hide date, spacer, calculator on mobile */
    .calender_date,
    .x-navigation-horizontal .xn-icon-button + li,
    .x-navigation-horizontal > li.hidden-mobile {
        display: none !important;
    }

    /* User dropdown: shrink text */
    .x-navigation-horizontal .dropdown.head-dpdn.open.pull-right > a {
        font-size: 11px;
        padding: 0 6px;
        white-space: nowrap;
        overflow: hidden;
        max-width: 110px;
        text-overflow: ellipsis;
        display: inline-block;
    }

    /* Prevent horizontal scroll in the top bar */
    .x-navigation.x-navigation-horizontal > li.pull-right {
        float: none !important;
        display: none !important;
    }

    /* Keep hamburger and user/logout visible */
    .x-navigation.x-navigation-horizontal > li.xn-icon-button,
    .x-navigation.x-navigation-horizontal > li.mobile-keep {
        display: block !important;
        float: none !important;
    }

    /* Push user menu to the right using flex */
    .x-navigation.x-navigation-horizontal > li.mobile-user-right {
        display: block !important;
        float: none !important;
        margin-left: auto !important;
    }
}

/* ============================================================
   3. MOBILE QUICK ACTION BAR
   ============================================================ */
.mobile-quick-bar {
    display: none;
}

@media (max-width: 767px) {
    .mobile-quick-bar {
        display: -webkit-flex;
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 7px 10px;
        gap: 8px;
        background: #fff;
        border-bottom: 2px solid #e8e0f5;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .mobile-quick-bar::-webkit-scrollbar {
        display: none;
    }
    .mobile-quick-bar .btn-mobile-quick {
        white-space: nowrap;
        flex-shrink: 0;
        border-radius: 500px !important;
        height: 34px;
        font-size: 11px;
        font-weight: 600;
        padding: 0 14px;
        letter-spacing: 0.4px;
    }
}

/* ============================================================
   4. PAGE LAYOUT — padding / margin fixes on mobile
   ============================================================ */
@media (max-width: 767px) {

    .page-content-wrap {
        padding: 0 !important;
    }

    .page-content-wrap > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .page-content-wrap > .row > [class*="col-"] {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* Reduce the decorative purple bar and form card */
    .register_section {
        padding: 8px 10px 44px 12px !important;
    }

    .form_section {
        margin: 0 8px !important;
        margin-top: -38px !important;
        border-radius: 4px !important;
        padding-bottom: 6px !important;
    }

    /* Page title */
    .page-title h2 {
        font-size: 16px !important;
        margin: 6px 0 !important;
    }

    /* Footer row */
    .page-container > .clearfix + .row {
        flex-direction: column !important;
        text-align: center !important;
        padding: 8px 0 !important;
    }
    .page-container > .clearfix + .row [class*="col-"] {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ============================================================
   5. TABLES — ensure horizontal scroll on all grid views
   ============================================================ */
@media (max-width: 767px) {

    /* Kartik GridView + standard Bootstrap tables */
    .kv-grid-container,
    .table-responsive,
    .grid-view .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Ensure panel body doesn't clip */
    .panel-body {
        overflow-x: auto;
    }

    /* Column header fixed widths cause overflow — strip inline widths */
    .kv-grid-container table {
        min-width: 500px;
    }

    /* GridView toolbar wrap */
    .kv-grid-layout .kv-toolbar-container {
        flex-wrap: wrap;
    }

    /* Export button group */
    .btn-group-sm > .btn,
    .btn-sm {
        padding: 4px 8px;
        font-size: 11px;
    }
}

/* ============================================================
   6. FORMS — collapse multi-column to single column on mobile
   ============================================================ */
@media (max-width: 575px) {

    /* Force all Bootstrap grid columns to full width inside forms */
    .form-vertical .col-md-2,
    .form-vertical .col-md-3,
    .form-vertical .col-md-4,
    .form-vertical .col-md-5,
    .form-vertical .col-md-6,
    .form-vertical .col-md-7,
    .form-vertical .col-md-8,
    .form-vertical .col-sm-2,
    .form-vertical .col-sm-3,
    .form-vertical .col-sm-4,
    .form-vertical .col-sm-6 {
        width: 100% !important;
        float: none !important;
    }

    /* General panel forms */
    .panel-body .col-md-4,
    .panel-body .col-md-6,
    .panel-body .col-md-3,
    .panel-body .col-sm-4,
    .panel-body .col-sm-6 {
        width: 100% !important;
        float: none !important;
    }

    /* Submit buttons — make them full width on small screens */
    .form-group .btn-success,
    .form-group .btn-primary,
    .form-group .btn-cancel,
    .form-group .btn-danger {
        width: 100% !important;
        margin-bottom: 6px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Input groups */
    .input-group {
        width: 100%;
    }
}

/* ============================================================
   7. MODAL — full screen on mobile for forms
   ============================================================ */
@media (max-width: 575px) {
    .modal-dialog {
        width: 96% !important;
        max-width: 96% !important;
        margin: 10px auto !important;
    }
    .modal-md {
        width: 96% !important;
    }
}

/* ============================================================
   8. DASHBOARD — stat cards and charts
   ============================================================ */
@media (max-width: 767px) {

    /* Dashboard stat knob cards */
    .panel-body.dashboard .col-md-3,
    .panel-body.dashboard .col-sm-3,
    .panel-body.dashboard .col-xs-6 {
        width: 50% !important;
        float: left !important;
    }

    /* Calendar overflow on mobile */
    #calendar {
        overflow-x: auto;
    }

    /* Chart containers */
    .chart-container,
    .highcharts-container {
        max-width: 100% !important;
        overflow: hidden;
    }
}

/* ============================================================
   9. BREADCRUMBS — hide on very small screens or truncate
   ============================================================ */
@media (max-width: 575px) {
    .breadcrumb {
        font-size: 11px;
        padding: 6px 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ============================================================
   10. ADD / ACTION BUTTON ROWS in index views
   ============================================================ */
@media (max-width: 575px) {

    /* Row with heading + add button */
    .row .col-md-6.text-left.add-label {
        font-size: 20px !important;
        margin-bottom: 6px;
    }

    .row .col-md-6.text-right > a.btn,
    .row .col-md-6.text-right > .btn {
        width: 100%;
        margin-bottom: 6px;
    }
}

/* ============================================================
   11. PERMISSION / ROLE TABLE — horizontal scroll
   ============================================================ */
@media (max-width: 767px) {

    #role-permission-table,
    .permission-table-wrap,
    table.table {
        overflow-x: auto;
        display: block;
        width: 100%;
    }
}

/* ============================================================
   12. UTILITY — hide/show helpers
   ============================================================ */
.visible-mobile { display: none !important; }
.hidden-mobile  { display: block; }

@media (max-width: 767px) {
    .visible-mobile { display: block !important; }
    .hidden-mobile  { display: none !important; }
}

/* ============================================================
   13. TOUCH — remove tap highlight and increase touch targets
   ============================================================ */
@media (max-width: 767px) {
    a, button, .btn {
        -webkit-tap-highlight-color: transparent;
    }

    .x-navigation li > a {
        min-height: 40px;
        display: flex !important;
        align-items: center;
    }

    /* Bigger action icons in grids */
    .glyphicon.icons {
        font-size: 16px !important;
        padding: 4px !important;
    }
}

/* ============================================================
   14. TABLET (768–991px) — partial responsiveness
   ============================================================ */
@media (min-width: 768px) and (max-width: 991px) {

    .page-container .page-sidebar {
        width: 190px !important;
    }

    .page-container .page-content {
        margin-left: 190px !important;
    }

    .form_section {
        margin: 0 12px !important;
    }

    .calender_date {
        font-size: 11px !important;
    }

    /* Stack quick buttons if too many */
    .x-navigation-horizontal .btn-voucher,
    .x-navigation-horizontal .btn-cashout,
    .x-navigation-horizontal .btn-transfer {
        font-size: 10px !important;
        padding: 0 8px !important;
        height: 32px !important;
    }
}