/* App-wide responsive rules — loaded after style.css */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.page-container.container-fluid {
    max-width: 100%;
    overflow-x: hidden;
}

#main-content {
    max-width: 100%;
    box-sizing: border-box;
}

.main-wrapper {
    max-width: 100%;
    box-sizing: border-box;
}

.main-wrapper .row > [class*="col-"] {
    max-width: 100%;
    box-sizing: border-box;
}

/* Dashboard hero / promo tiles */
.hos-promo {
    background-size: cover !important;
    background-position: center center !important;
    min-height: 160px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.hos-promo .promo-info h3,
.hos-promo .promo-info h4 {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Flot chart container — fluid width */
#demoarea-chart,
#demoarea-chart #demoarea-container {
    max-width: 100%;
    box-sizing: border-box;
}

#demoarea-chart #demoarea-container {
    min-height: 260px;
    height: 280px;
}

@media (min-width: 768px) {
    #demoarea-chart #demoarea-container {
        min-height: 300px;
        height: 330px;
    }
}

/* Chart.js incident chart — responsive canvas parent */
.dashboard-chart-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 220px;
    height: 280px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .dashboard-chart-wrap {
        min-height: 260px;
        height: 320px;
    }
}

.dashboard-chart-wrap canvas {
    max-width: 100% !important;
}

/* Generic chart blocks */
.chart-container {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Panel headers inside main app content — keep title + actions on narrow screens */
#main-content .panel_header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#main-content .panel_header .title.pull-left {
    float: none !important;
    flex: 1 1 auto;
    min-width: 0;
    word-wrap: break-word;
}

#main-content .panel_header .actions.panel_actions.pull-right {
    float: none !important;
    flex: 0 0 auto;
}

/* Activity rows: avoid overlap from absolute visit badges on small screens */
@media (max-width: 580px) {
    .project-activity .activity-list .detail-info {
        position: relative;
        padding-right: 0;
    }

    .project-activity .visit-date,
    .project-activity .visit-stat {
        position: static;
        transform: none;
        margin-top: 8px;
        display: inline-block;
    }
}

/* Tables inside dashboard cards */
.box .table-responsive {
    max-width: 100%;
}

/* DataTables can widen tables — allow horizontal scroll inside card */
.dataTables_wrapper {
    max-width: 100%;
    overflow-x: auto;
}

/* Staff / gradient stat cards full width on small viewports */
@media (max-width: 991px) {
    .doctor-card .btn.gradient-blue {
        box-sizing: border-box;
    }
}

/* -------------------------------------------------------------------------
   Portal-wide layout (header / content / sidebar / footer areas)
   ------------------------------------------------------------------------- */

body {
    overflow-x: hidden;
    max-width: 100vw;
    box-sizing: border-box;
}

#main-content .content-body,
#main-content section.box {
    max-width: 100%;
    box-sizing: border-box;
}

#main-content img,
#main-content video,
#main-content svg:not(.fa):not([class*="fa-"]),
#main-content .img-responsive {
    max-width: 100%;
    height: auto;
}

#main-content .form-control,
#main-content select.form-control,
#main-content textarea.form-control {
    max-width: 100%;
}

#main-content pre,
#main-content .table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Top bar: flex only on phone — tablet keeps theme floats so the bell row is not clipped (max-height:60px) */
@media (max-width: 767px) {
    .page-topbar .quick-area {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        max-width: 100%;
        box-sizing: border-box;
    }

    .page-topbar .quick-area .pull-left,
    .page-topbar .quick-area .pull-right {
        float: none !important;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        max-width: 100%;
    }

    .page-topbar .info-menu.left-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        max-width: 100%;
        margin-bottom: 0;
    }
}

/* Hide Appearance / dashboard logo in top bar (e.g. 6592fe65ef6ce_logo.png) — frees space for nav + icons */
.page-topbar .logo-area.logo-area--brand-img,
.page-topbar.sidebar_shift .logo-area.logo-area--brand-img,
.page-topbar.chat_shift .logo-area.logo-area--brand-img {
    display: none !important;
}

/* Chat / slide-out panel uses full width on small screens when open */
@media (max-width: 767px) {
    .page-chatapi.showit {
        width: min(100vw, 280px) !important;
        max-width: 100vw;
    }
}

/* Roaster / FullCalendar blocks */
@media (max-width: 767px) {
    #calendar {
        height: auto !important;
        min-height: 360px;
    }
}

/* -------------------------------------------------------------------------
   Phone + tablet + narrow laptop: hide selected top bar links
   (PHP: topbar_title_hidden_on_mobile_class) so notification + profile stay visible.
   Up to 1199px covers large tablets in landscape (e.g. 1024px wide).
   ------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .page-topbar .topnav-item.topnav-hide-mobile {
        display: none !important;
    }
}

/* Tablet: slightly tighter main column when sidebar is full width */
@media (min-width: 768px) and (max-width: 991px) {
    #main-content {
        padding-left: 8px;
        padding-right: 8px;
    }

    .main-wrapper {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* -------------------------------------------------------------------------
   Sidebar: scrollable menu when expanded (tablet / desktop); topbar stays usable
   ------------------------------------------------------------------------- */

.page-sidebar {
    z-index: 1000;
}

@media (max-width: 767px) {
    .page-sidebar {
        z-index: 1000 !important;
    }
}

.page-topbar {
    z-index: 2000;
    overflow: visible !important;
}

.page-topbar .quick-area {
    overflow: visible !important;
}

.page-topbar .quick-area .pull-right {
    overflow: visible !important;
}

/* Full-width sidebar: constrain menu to viewport below top bar */
.page-sidebar:not(.collapseit) .fixedscroll#main-menu-wrapper,
.page-sidebar.expandit .fixedscroll#main-menu-wrapper {
    max-height: calc(100vh - 60px);
}

.page-topbar li.profile .toggle {
    display: inline-flex;
    align-items: center;
    max-width: min(220px, 42vw);
}

.page-topbar li.profile .topbar-profile-icon {
    display: none;
    margin-right: 6px;
    font-size: 16px;
    line-height: 1;
}

/* Theme hides .profile .toggle span ≤680px — keep icon + chevron visible */
@media (max-width: 991px) {
    .page-topbar li.profile .topbar-profile-icon {
        display: inline-block;
    }

    .page-topbar li.profile .topbar-profile-label {
        display: inline-flex !important;
        align-items: center;
        max-width: min(160px, 35vw);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }
}