/* responsive.css
   Link LAST in <head> (after dashboard-polish.css / dashboard-kpi.css).
   Desktop (>= 992px) is not changed; everything below is for tablet / phone.
*/

/* ---------- Always on ---------- */
img {
    max-width: 100%;
}

.header-titles {
    min-width: 0;
}

.header-titles .header-title,
.header-titles .header-sub {
    display: block;
    white-space: normal;
}

/* left part of the header may shrink, right part never wraps */
.main-header > .navbar-nav:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.main-header > .navbar-nav.ml-auto {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
}

.main-header .navbar-nav .nav-item {
    display: flex;
    align-items: center;
}

.header-badge {
    white-space: nowrap;
}

/* ---------- Tablet and below (< 992px) ---------- */
@media (max-width: 991.98px) {
    .header-logo {
        height: auto;
        max-height: 56px;
    }

    .main-header .header-title {
        font-size: 1.25rem;
    }

    .main-header .header-sub {
        font-size: .9rem;
    }

    /* long tables / DataTables scroll inside their own box */
    .dataTables_wrapper {
        overflow-x: auto;
    }
}

/* ---------- Phone (< 768px) ---------- */
@media (max-width: 767.98px) {
    .main-header.navbar {
        min-height: 64px;
        padding-left: .25rem;
        padding-right: .5rem;
    }

    .main-header .header-title {
        font-size: 1rem;
        line-height: 1.25;
    }

    .main-header .header-sub {
        font-size: .75rem;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-titles {
        margin-left: .25rem !important;
    }

    .header-badge {
        padding: .35rem .6rem;
        font-size: .8rem;
        max-width: 38vw;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
    }

    .main-header .nav-link {
        padding-left: .3rem;
        padding-right: .3rem;
    }

    /* full-screen toggle has no use on phones */
    .main-header [data-widget="fullscreen"] {
        display: none;
    }

    /* page area starts right under the (shorter) header */
    .content-header {
        margin-top: 72px !important;
    }

    .content-header .row > [class*="col-"] {
        margin-bottom: .5rem;
    }

    .content-header select.form-control {
        margin-bottom: .5rem;
    }

    .dt-buttons {
        margin-bottom: .5rem !important;
    }

    .modal-dialog {
        margin: .5rem;
        max-width: calc(100% - 1rem);
    }

    .card-header .card-tools {
        margin-top: .25rem;
    }

    .main-footer {
        text-align: center;
    }
}

/* ---------- Small phone (< 480px) ---------- */
@media (max-width: 479.98px) {
    .main-header .header-sub {
        display: none;
    }

    .header-badge {
        max-width: 30vw;
    }
}