/* ============================================================
   Global Responsive Overrides for Flebo IMS Admin
   Loaded after admin.css in master.blade.php and anonymous-master.blade.php
   ============================================================ */

/* ---- Helpers ---- */
html, body { overflow-x: hidden; }


/* Mobile-only hamburger button in top nav (hidden by default) */
.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    color: #c0392b;
    font-size: 22px;
    padding: 8px 12px;
    cursor: pointer;
    line-height: 1;
}

/* Off-canvas overlay backdrop (mobile only) */
.mobile-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 3;
}
@media (max-width: 768px) {
    .mobile-nav-backdrop.show { display: block; }
}

/* =========================================================
   Tablet / small laptop breakpoint ( <= 1024px )
   ========================================================= */
@media (max-width: 1024px) {
    .navbar-top .navbar-top-left { width: auto; }
    .navbar-top .navbar-top-left img { height: 44px; }
    .navbar-top .navbar-top-right { padding: 6px; }

    /* Make big panels & cards flex-wrap cleanly */
    .content-container .panel,
    .content-container .card,
    .content-container .header-card,
    .content-container [class*="-header-card"] {
        flex-wrap: wrap;
    }

    /* Dashboard grids: shrink to 2 columns */
    .content-container .row-grid-3,
    .content-container .row-grid-4,
    .content-container .row-grid-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Wrap any wide data table so it scrolls horizontally */
    .content-container table {
        max-width: 100%;
    }
    .content-container .table-responsive,
    .content-container .data-grid,
    .content-container .datagrid-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =========================================================
   Mobile breakpoint ( <= 768px )
   ========================================================= */
@media (max-width: 768px) {

    /* ---- Top bar ---- */
    .navbar-top {
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 6px;
    }
    .navbar-top .navbar-top-left {
        display: flex;
        align-items: center;
        width: auto;
        height: auto;
    }
    .navbar-top .navbar-top-left img { height: 36px !important; }
    .navbar-top .navbar-top-right {
        display: flex;
        align-items: center;
        height: auto;
        padding: 0;
    }
    .navbar-top .navbar-top-right .profile-info { margin-left: 4px; }
    .navbar-top .navbar-top-right .profile-info .info { display: none; }
    .navbar-top .navbar-top-right .profile-info .avatar {
        width: 36px;
        height: 36px;
    }
    .navbar-top .navbar-top-right .profile-info .avatar img { width: 100%; height: 100%; }
    .navbar-top .navbar-top-right .profile-info .icon.ellipsis-icon { display: none; }

    /* Show hamburger */
    .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* ---- Sidebar becomes off-canvas drawer ---- */
    .navbar-left {
        top: 56px;
        width: 0;
        overflow: hidden;
        transition: width 0.3s ease;
        z-index: 6;
    }
    .navbar-left.open {
        width: 240px;
        overflow: visible;
    }
    .navbar-left.open ul.menubar li.menu-item a .menu-label { display: inline; }
    .navbar-left .menubar-bottom { display: none; }

    /* Sub-menus inline below menu item on mobile instead of flyout */
    .navbar-left.open ul.menubar li.menu-item ul.sub-menubar {
        position: static !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* ---- Content ---- */
    .content-container {
        padding-left: 0 !important;
        top: 56px;
        height: calc(100% - 56px);
        overflow-x: hidden;
    }
    .content-container[style] { padding-left: 0 !important; }

    .content-container .page-header,
    .content-container .panel-header,
    .content-container [class*="-header-card"] {
        flex-wrap: wrap;
        gap: 8px;
    }
    .content-container .page-header .page-title,
    .content-container .panel-header .panel-title { font-size: 18px !important; }
    .content-container .page-header .page-action,
    .content-container .panel-header .panel-action,
    .content-container [class*="-header-card"] .header-right {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Aside nav becomes full-width stacked */
    .content-container .aside-nav {
        position: static !important;
        width: 100% !important;
        border-right: none;
        border-bottom: 1px solid #c1c2c3;
    }
    .content-container .aside-nav ~ * {
        margin-left: 0 !important;
        padding-left: 10px !important;
    }

    /* Dashboard grids: single column */
    .content-container .row-grid-2,
    .content-container .row-grid-3,
    .content-container .row-grid-4,
    .content-container .row-grid-5 {
        grid-template-columns: 1fr !important;
    }

    /* Cards / panels full width, stacked */
    .content-container .card,
    .content-container .panel,
    .content-container .header-card,
    .content-container [class*="-header-card"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    /* Forms: inputs stack full width */
    .content-container .form-group,
    .content-container .form-row,
    .content-container .control-group {
        width: 100% !important;
        display: block;
    }
    .content-container input.control,
    .content-container select.control,
    .content-container textarea.control,
    .content-container .control {
        max-width: 100%;
        box-sizing: border-box;
    }
    .content-container .form-container,
    .content-container form > .row,
    .content-container form > div[class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Tables: horizontal scroll wrapper */
    .content-container table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    .content-container .data-grid,
    .content-container .datagrid-container,
    .content-container .table-container,
    .content-container .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Modal: fit small screens */
    .modal-dialog,
    .modal-container {
        width: 95% !important;
        max-width: 95% !important;
        margin: 20px auto !important;
    }

    /* Kanban: horizontal scroll */
    .kanban,
    .kanban-container,
    .kanban-board {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Button groups stack on very tight space */
    .button-group {
        flex-wrap: wrap;
        gap: 6px;
    }
    .btn, .button {
        white-space: normal;
    }

    /* Bottom submit bar (injected by master.blade.php) */
    .bottom-submit-bar {
        flex-wrap: wrap !important;
        padding: 12px !important;
        gap: 8px !important;
    }
    .bottom-submit-bar a,
    .bottom-submit-bar button {
        flex: 1 1 auto;
        text-align: center;
    }

    /* Dropdown menus anchored right from nav */
    .navbar-top .dropdown-list.bottom-right {
        right: 0;
        left: auto;
        max-width: 90vw;
    }

    /* Fix fixed-width helpers from legacy CSS */
    [style*="width: 50%"],
    [style*="width:50%"] {
        width: 100% !important;
    }
}

/* =========================================================
   Small phones ( <= 480px )
   ========================================================= */
@media (max-width: 480px) {
    .navbar-top .navbar-top-left img { height: 30px !important; }
    .navbar-top .navbar-top-right .profile-info .avatar {
        width: 30px;
        height: 30px;
    }
    .mobile-menu-toggle { font-size: 20px; padding: 6px 8px; }

    .content-container .page-header .page-title,
    .content-container .panel-header .panel-title { font-size: 16px !important; }

    .content-container .card .card-title,
    .content-container .panel .panel-title { font-size: 15px !important; }

    /* Smaller base padding on cards */
    .content-container .card,
    .content-container .panel-body {
        padding: 10px !important;
    }

    /* Sidebar narrower on tiny screens */
    .navbar-left.open { width: 85vw; }
}

/* =========================================================
   Generic polish for all page-scoped wrappers
   Covers all prefixes: bk, ob, cc, dbp, abp, ac, bpl, cbp, clp, cs,
   ds, fr, lb, lc, ld, lv, lx, nbp, pc, rbp  and any future -*-card pages
   ========================================================= */
@media (max-width: 1024px) {
    [class$="-page-wrap"],
    [class*="-page-wrap "] { padding: 14px 12px !important; }

    [class$="-summary-row"],
    [class*="-summary-row "] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }
    [class$="-stat-card"],
    [class*="-stat-card "] { padding: 10px !important; }
    [class$="-stat-card"] .stat-count,
    [class*="-stat-card "] .stat-count { font-size: 20px !important; }
    [class$="-stat-card"] .stat-label,
    [class*="-stat-card "] .stat-label { font-size: 11px !important; }
}

@media (max-width: 768px) {
    [class$="-page-wrap"],
    [class*="-page-wrap "] { padding: 10px 8px !important; }

    /* ---- Header card: stack ---- */
    [class$="-header-card"],
    [class*="-header-card "] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 12px !important;
    }
    [class$="-header-card"] .header-left,
    [class*="-header-card "] .header-left { width: 100%; }
    [class$="-header-card"] .header-left h1,
    [class*="-header-card "] .header-left h1 { font-size: 16px !important; }
    [class$="-header-card"] .header-left h1 small,
    [class*="-header-card "] .header-left h1 small { font-size: 11px !important; }
    [class$="-header-card"] .header-left .header-icon,
    [class*="-header-card "] .header-left .header-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
    }
    [class$="-header-card"] .header-right,
    [class*="-header-card "] .header-right {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    [class$="-header-card"] .header-right .hdr-btn,
    [class$="-header-card"] .header-right .create-btn,
    [class*="-header-card "] .header-right .hdr-btn,
    [class*="-header-card "] .header-right .create-btn {
        flex: 1 1 auto;
        justify-content: center;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    /* ---- Stat cards: 2 per row ---- */
    [class$="-summary-row"],
    [class*="-summary-row "] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    [class$="-stat-card"],
    [class*="-stat-card "] {
        padding: 10px !important;
        gap: 8px;
        display: flex;
        align-items: center;
    }
    [class$="-stat-card"] .stat-icon,
    [class*="-stat-card "] .stat-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
        flex-shrink: 0;
    }
    [class$="-stat-card"] .stat-count,
    [class*="-stat-card "] .stat-count { font-size: 18px !important; }
    [class$="-stat-card"] .stat-label,
    [class*="-stat-card "] .stat-label { font-size: 11px !important; line-height: 1.2; }

    /* ---- Table card: scroll + swipe hint ---- */
    [class$="-table-card"],
    [class*="-table-card "] { border-radius: 8px !important; }
    [class$="-table-card"] .table,
    [class*="-table-card "] .table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    [class$="-table-card"] .table::after,
    [class*="-table-card "] .table::after {
        content: "\2190  swipe  \2192";
        display: block;
        text-align: center;
        color: #bbb;
        font-size: 10px;
        padding: 6px 0 2px;
    }
    [class$="-table-card"] .table table,
    [class*="-table-card "] .table table {
        font-size: 12px !important;
        min-width: 640px;
    }
    [class$="-table-card"] .table table thead th,
    [class*="-table-card "] .table table thead th {
        padding: 10px 8px !important;
        font-size: 11px !important;
        white-space: nowrap;
    }
    [class$="-table-card"] .table table tbody td,
    [class*="-table-card "] .table table tbody td {
        padding: 10px 8px !important;
        font-size: 12px !important;
        max-width: none !important;
        white-space: nowrap;
    }
    [class$="-table-card"] .pagination,
    [class*="-table-card "] .pagination {
        padding: 10px !important;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
    }

    /* ---- Action bar: stacks ---- */
    [class$="-action-bar"],
    [class*="-action-bar "] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 10px !important;
    }
    [class$="-action-bar"] .form-group,
    [class*="-action-bar "] .form-group {
        width: 100% !important;
        flex-wrap: wrap;
        gap: 6px;
    }
    [class$="-action-bar"] .form-group select.control,
    [class*="-action-bar "] .form-group select.control {
        flex: 1 1 auto;
        min-width: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }
    [class$="-action-bar"] .btn-md,
    [class$="-action-bar"] input[type=button],
    [class*="-action-bar "] .btn-md,
    [class*="-action-bar "] input[type=button] {
        width: 100%;
    }

    /* Sidebar filter drawer */
    .sidebar-filter {
        width: 92vw !important;
        max-width: 360px;
    }

    /* Breadcrumbs shrink */
    .table-header .breadcrumbs,
    .table-header .breadcrumb { font-size: 12px; }

    /* Any inline-styled modal dialog */
    .modal-dialog {
        margin: 12px !important;
        max-width: calc(100% - 24px) !important;
    }

    /* Inline 2-col grids inside modals / panels -> 1 col */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:repeat(2"],
    [style*="grid-template-columns: repeat(2"] {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    [class$="-summary-row"],
    [class*="-summary-row "] { grid-template-columns: 1fr 1fr !important; }
    [class$="-stat-card"] .stat-count,
    [class*="-stat-card "] .stat-count { font-size: 16px !important; }
    [class$="-stat-card"] .stat-label,
    [class*="-stat-card "] .stat-label { font-size: 10px !important; }
    [class$="-table-card"] .table table,
    [class*="-table-card "] .table table { min-width: 560px; }
}

/* =========================================================
   Datagrid tab filters (All / NEW / BOOKED pills + pagination)
   Affects any page using <tabs-container> (leads, bookings, etc.)
   ========================================================= */
@media (max-width: 768px) {
    .tabs-container {
        flex-wrap: wrap !important;
        padding: 10px 10px !important;
        gap: 6px !important;
        align-items: stretch !important;
    }

    /* Left pills: single row with horizontal scroll instead of multi-line wrap */
    .tabs-container .tabs-left-container,
    .tabs-container .pill.tabs-left-container {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tabs-container .tabs-left-container::-webkit-scrollbar { display: none; }

    .tabs-container .tabs-left-container .tabs ul,
    .tabs-container .pill .tabs ul {
        flex-wrap: nowrap !important;
        display: inline-flex !important;
        gap: 6px !important;
        padding: 2px 2px 2px 0 !important;
    }
    .tabs-container .pill .tabs ul li { flex-shrink: 0 !important; }
    .tabs-container .pill .tabs ul li a {
        padding: 6px 12px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    /* Right container (pagination arrows + extra filters): new row, right-aligned */
    .tabs-container .tabs-right-container {
        margin-left: 0 !important;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
    }
    .tabs-container .tabs-right-container .pagination,
    .tabs-container .tabs-right-container section {
        margin: 0 !important;
    }

    /* Datagrid top toolbar (search + per-page + filter) stacks */
    .datagrid-filters,
    #datagrid-filters {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 10px !important;
    }
    .datagrid-filters > div:first-child {
        width: 100% !important;
    }

    /* Search bar: full-width, visible */
    .datagrid-filters .search-filter {
        width: 100% !important;
        margin: 0 !important;
    }
    .datagrid-filters .search-filter input.control {
        width: 100% !important;
        height: 40px;
        padding-left: 36px;
        font-size: 14px;
        box-sizing: border-box;
    }
    .datagrid-filters .search-filter .input-search-icon {
        top: 50%;
        transform: translateY(-50%);
        left: 12px;
    }

    /* Right-side controls (per-page + Filter btn) share one row,
       space-between so they're balanced */
    .datagrid-filters .filter-right {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100%;
        margin: 0 !important;
    }
    .datagrid-filters .filter-right .dropdown-filters.per-page {
        margin: 0 !important;
    }
    .datagrid-filters .filter-right .dropdown-filters.per-page .form-group {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0;
    }
    .datagrid-filters .filter-right .dropdown-filters.per-page .per-page-label {
        font-size: 12px;
        color: #666;
        margin: 0;
        white-space: nowrap;
    }
    .datagrid-filters .filter-right .dropdown-filters.per-page select.control {
        height: 36px;
        padding: 4px 24px 4px 10px;
        font-size: 13px;
        border-radius: 6px;
        min-width: 64px;
        width: auto;
    }
    .datagrid-filters .filter-right .filter-btn {
        margin: 0 !important;
    }
    .datagrid-filters .filter-right .filter-btn .grid-dropdown-header {
        height: 36px;
        padding: 0 14px;
        border-radius: 6px;
        border: 1px solid #e0e0e0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #fff;
        font-size: 13px;
        font-weight: 500;
        color: #444;
    }
    .datagrid-filters .filter-right .filter-btn .grid-dropdown-header .name {
        font-size: 13px;
    }

    /* Applied filter chips wrap cleanly */
    .filtered-tags {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
}

/* =========================================================
   Print ( keep sane printing )
   ========================================================= */
@media print {
    .navbar-top, .navbar-left, .mobile-menu-toggle, .mobile-nav-backdrop { display: none !important; }
    .content-container {
        padding-left: 0 !important;
        top: 0 !important;
        height: auto !important;
        position: static !important;
    }
}