/* ServiLynk Dispatcher panel - shared layout fixes. The phone rules sit inside the media query below; the first block applies everywhere. */

/* Providers list toolbar (all screen sizes): the filters, buttons and Search wrap onto more lines when there is no room, instead of
   running past the right edge; button text never breaks onto two lines; and the icon block of the Export button sits at its left
   edge (the right-to-left theme gave it a mirrored negative margin that pushed it into the middle of the text). */
.table_top_bar { flex-wrap: wrap; gap: 10px; }
.table_top_bar > ul { flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 0; }
.table_top_bar > ul > li { margin-left: 0 !important; }
.table_top_bar .btn { white-space: nowrap; }
.table_top_bar .btn .btn-label {
    display: inline-block; margin: -0.55rem 0.8rem -0.55rem -0.9rem !important; padding: 0.55rem 0.9rem;
    border-radius: 50px 0 0 50px;
}
/* the Search box: same height and rounded corners as the filter boxes, with room for its text (it was a narrow box squeezed beside them) */
.table_top_bar .search-btn { min-width: 170px; width: 190px; height: 38px; border-radius: 6px; padding: 0 12px; }
/* the Search box sits at the right end of the toolbar (on the same line when there is room, right-aligned under it when not),
   with a gap before the Active / Awaiting Approval / Blocked tabs */
.table_top_bar > ul:last-child { margin-left: auto; margin-right: 0; padding-left: 0; }
.table_top_bar { margin-bottom: 14px; }
.table_top_bar .search-btn::placeholder { color: #98a6ad; }
/* an empty spacer item (it only holds the success message) no longer pushes the filters 10px in from the tabs below */
.table_top_bar li.first_child:not(:has(.alert)) { display: none; }
/* on wide screens the four filters are a little narrower so the Search box fits on the same line as the buttons */
@media (min-width: 768px) {
    .table_top_bar select.form-control { width: 150px; }
    .table_top_bar .search-btn { width: 170px; min-width: 170px; }
}

/* Phone layout - everything below only applies at phone width. */
@media (max-width: 767px) {

    /* page margins and cards */
    .content-page .content > .container-fluid,
    .content-page .content > .row { padding-left: 10px; padding-right: 10px; }
    .card-body, .card-box { padding: 14px !important; }
    .page-title-box { height: auto !important; padding: 0 !important; margin-bottom: 12px; }
    .page-title-box .page-title { font-size: 1.15rem; line-height: 1.3; }
    .page-title-box > .d-flex, .page-title-box.d-flex { flex-wrap: wrap; gap: 8px; }

    /* tabs: one row you can swipe, never wrapping onto several lines */
    .nav-tabs { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tabs > .nav-item, .nav-tabs > li { flex: 0 0 auto; }

    /* tables scroll inside their card */
    .table-responsive, .dataTables_wrapper { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* DataTables controls */
    .dataTables_wrapper .dataTables_length { float: none; text-align: left; margin-bottom: 8px; }
    .dataTables_wrapper .dataTables_length select { min-width: 70px; width: auto !important; display: inline-block; }
    .dataTables_wrapper .dataTables_filter { float: none; text-align: left; width: 100%; }
    .dataTables_wrapper .dataTables_filter label { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 10px; }
    .dataTables_wrapper .dataTables_filter input { flex: 1 1 auto; min-width: 0; width: 100% !important; margin-left: 0 !important; }
    .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { float: none; text-align: center; padding-top: 8px; }

    /* Providers list: filters and action buttons fit the screen */
    .table_top_bar { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
    .table_top_bar > ul { width: 100%; }
    .table_top_bar .search-btn { min-width: 0; width: 100% !important; }
    .table_top_bar ul { flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; }
    .table_top_bar ul > li { width: 100%; margin: 0 !important; list-style: none; }
    .table_top_bar select.form-control, .table_top_bar input.form-control, .table_top_bar .select2-container { width: 100% !important; max-width: 100% !important; }
    .table_top_bar li.d-flex { flex-wrap: wrap; gap: 8px; }
    .table_top_bar li.d-flex > .btn { flex: 1 1 calc(50% - 8px); margin: 0 !important; white-space: nowrap; }
    .table_top_bar li.d-flex .toolbar { width: 100%; }
    .table_top_bar li.d-flex .toolbar .btn { width: 100%; }

    /* Provider Schedule header: view switch, date and arrows on one tidy row */
    #es-schedule-toolbar { width: 100%; gap: 8px; flex-wrap: wrap; }
    #es-schedule-toolbar .btn-group { flex: 1 1 100%; margin: 0 !important; }
    #es-schedule-toolbar .btn-group .btn { flex: 1 1 0; }
    #es-schedule-toolbar .es-date-jump-input { flex: 1 1 auto; width: auto !important; min-width: 0; margin: 0 !important; }
    #es-schedule-toolbar > .btn { flex: 0 0 auto; margin: 0 !important; }

    /* status pills (Assignments, Exceptions: "All Assignments (5)", "On the Way (0)" ...): two per row, each the same size,
       instead of a grid that ran past the right edge */
    .login-form ul.list-inline { display: flex !important; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
    .login-form ul.list-inline > li { flex: 1 1 calc(50% - 8px); display: block !important; margin: 0 !important; min-width: 0; }
    .login-form ul.list-inline > li > label { display: block !important; width: 100% !important; margin: 0 !important; padding: 10px 8px !important; text-align: center; white-space: normal; }
    .assignments-toolbar-row { overflow: visible; }

    /* summary tiles: long labels wrap instead of being cut */
    .card .text-truncate, .widget-rounded-circle .text-truncate { white-space: normal !important; }
}