/* SkillsCharts Mobile Responsive Overrides */

/* ══════════════════════════════════════════════════════
   METRONIC LAYOUT — CORE MOBILE STRUCTURE
   ══════════════════════════════════════════════════════ */

/* Hide desktop header, show mobile header bar */
@media (max-width: 1024px) {
    .kt-header {
        display: none !important;
    }

    .kt-header-mobile {
        display: flex !important;
        height: 55px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: #fff;
        box-shadow: 0 1px 9px -3px rgba(0,0,0,.2);
        align-items: center;
        padding: 0 12px;
    }

    /* Mobile header logo */
    .kt-header-mobile__logo {
        flex: 1;
    }

    /* Hamburger + user icon spacing */
    .kt-header-mobile__toolbar {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Aside: hide off-screen by default, slide in on toggle */
    .kt-aside {
        position: fixed !important;
        top: 0 !important;
        left: -265px !important;
        bottom: 0 !important;
        width: 265px !important;
        z-index: 1001 !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transition: left 0.3s ease !important;
    }

    /* Show aside when toggled */
    .kt-aside--on .kt-aside {
        left: 0 !important;
        box-shadow: 4px 0 20px rgba(0,0,0,0.25);
    }

    /* Overlay behind aside (created dynamically by KTOffcanvas JS) */
    .kt-aside-overlay {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.35) !important;
        z-index: 1000 !important;
        cursor: pointer;
    }

    /* Main wrapper: full width, no left offset from aside */
    .kt-wrapper,
    #kt_wrapper {
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-top: 55px !important;
        min-height: calc(100vh - 55px);
    }

    /* Grid root doesn't need aside offset */
    .kt-grid--hor.kt-grid--root {
        padding-left: 0 !important;
    }

    /* Prevent horizontal overflow */
    body {
        overflow-x: hidden;
    }
}

/* ══════════════════════════════════════════════════════
   SUBHEADER
   ══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    #kt_subheader {
        height: auto !important;
        padding: 8px 15px !important;
    }

    .kt-subheader__main {
        flex-wrap: wrap;
    }

    .kt-subheader__breadcrumbs-link {
        font-size: 16px !important;
    }

    .kt-subheader__toolbar {
        margin-top: 5px;
        flex-wrap: wrap;
        gap: 4px;
    }

    .kt-subheader__toolbar .btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
}

/* ══════════════════════════════════════════════════════
   CONTENT AREA
   ══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .kt-content {
        padding: 15px 10px !important;
    }

    .kt-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Override the desktop subheader+header combined padding */
    .kt-header--fixed.kt-subheader--fixed.kt-subheader--enabled .kt-wrapper {
        padding-top: 55px !important;
    }
}

/* ══════════════════════════════════════════════════════
   CARDS / PORTLETS
   ══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .kt-portlet {
        margin-bottom: 10px !important;
    }

    .kt-portlet__head {
        padding: 0 15px !important;
        min-height: 50px !important;
        flex-wrap: wrap;
    }

    .kt-portlet__head-label {
        flex-wrap: wrap;
    }

    .kt-portlet__head-toolbar {
        flex-wrap: wrap;
        gap: 6px;
    }

    .kt-portlet__body {
        padding: 15px !important;
    }
}

/* ══════════════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    /* Wrap all dataTable/regular tables in scrollable container */
    .table-responsive,
    .dataTables_wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .kt-portlet__body .table-responsive {
        overflow-x: auto !important;
    }

    /* Make all tables in content area scroll */
    .kt-content table,
    #kt_content table {
        min-width: 600px;
    }

    table.dataTable tr {
        height: auto !important;
        min-height: 48px;
    }

    table.dataTable td,
    table.dataTable th {
        padding: 8px 6px !important;
        font-size: 12px !important;
    }

    /* DataTable search + length controls stacked */
    #clients-table_wrapper,
    [id$="-table_wrapper"] {
        flex-direction: column;
    }

    .dataTables_filter,
    .dataTables_length {
        width: 100%;
        text-align: left !important;
    }

    .dataTables_filter input {
        width: 100% !important;
        max-width: 100% !important;
    }

    #table_pagination_container {
        flex-direction: column;
        gap: 8px;
    }
}

/* ══════════════════════════════════════════════════════
   TABS
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }

    .nav-tabs::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    .nav-tabs .nav-item {
        flex-shrink: 0;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* ══════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .form-group {
        margin-bottom: 8px;
    }

    .form-control,
    .select2-container {
        max-width: 100% !important;
    }

    .form-row > .col,
    .form-row > [class*="col-"] {
        margin-bottom: 8px;
    }
}

/* ══════════════════════════════════════════════════════
   BUTTONS / FILTERS
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .row.align-items-center {
        flex-wrap: wrap;
    }

    .filter-bar,
    .filters-row {
        flex-direction: column !important;
    }

    .btn-mobile-full {
        width: 100% !important;
        margin-bottom: 5px;
    }
}

@media (max-width: 1024px) {
    .btn {
        min-height: 36px;
    }

    .btn.btn-icon {
        height: 36px !important;
        width: 36px !important;
    }
}

/* ══════════════════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100vw - 20px) !important;
    }

    .modal-body {
        padding: 15px !important;
    }

    .modal-header {
        padding: 12px 15px !important;
    }
}

/* ══════════════════════════════════════════════════════
   LOGIN PAGE
   ══════════════════════════════════════════════════════ */
@media (max-width: 767.98px) { /* #6185765811: same breakpoint as the login pages' phone layout */
    /* Hide the left marketing aside on small screens */
    .kt-login__aside {
        display: none !important;
    }

    .kt-login__wrapper {
        width: 100% !important;
        padding: 20px !important;
    }

    .kt-login__form {
        max-width: 100% !important;
        padding: 0 10px !important;
    }

    /* Full-width login/register buttons */
    .kt-login__form .btn,
    .kt-login__form button[type="submit"] {
        width: 100%;
        text-align: center;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .kt-login__aside {
        max-width: 40%;
    }
}

/* ══════════════════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Stack stat cards */
    .col-md-3,
    .col-md-4,
    .col-md-6 {
        margin-bottom: 10px;
    }

    /* Dashboard charts: full width */
    .kt-portlet .kt-portlet__body canvas,
    .kt-portlet .kt-portlet__body svg {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Stack top action row on dashboard */
    .kt-portlet__head-toolbar .btn-group {
        flex-wrap: wrap;
        gap: 4px;
    }
}

/* ══════════════════════════════════════════════════════
   CLIENTS VIEW
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Client card header with logo + actions */
    .kt-widget.kt-widget--user-profile-1 .kt-widget__head {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Client action buttons row */
    .client-actions,
    .kt-widget__action {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
    }

    /* Client detail rows */
    .kt-widget__info .kt-widget__data {
        font-size: 13px;
    }
}

/* ══════════════════════════════════════════════════════
   PROJECTS VIEW
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Project cards grid: single column */
    .project-cards .col-md-4,
    .project-cards .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 12px;
    }

    /* Project header with filter row */
    .projects-filter-row {
        flex-direction: column;
        gap: 8px;
    }

    /* Kanban board: horizontal scroll */
    .kanban-container,
    [class*="kanban"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    .kanban-container > *,
    [class*="kanban"] > * {
        min-width: 280px;
        flex-shrink: 0;
    }
}

/* ══════════════════════════════════════════════════════
   TASKS VIEW
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Task row actions: stack or wrap */
    .task-actions {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Task detail panels */
    .task-detail-panel {
        padding: 12px !important;
    }

    /* Task stage labels in table */
    .task-stage-badge {
        font-size: 11px;
        padding: 3px 8px;
    }
}

/* ══════════════════════════════════════════════════════
   USERS VIEW
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* User profile widget */
    .kt-widget.kt-widget--user-profile-1 .kt-widget__head {
        flex-direction: column;
        align-items: center;
    }

    /* User card: avatar + name stacked */
    .kt-widget__media {
        margin-bottom: 10px;
        text-align: center;
    }

    /* User list: make role/status columns wrap-friendly */
    .users-table td:nth-child(n+4) {
        font-size: 11px;
    }
}

/* ══════════════════════════════════════════════════════
   ASSETS VIEW
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Asset cards grid */
    .assets-grid .col-md-4,
    .assets-grid .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 12px;
    }

    /* Asset image thumbnails: full width */
    .asset-thumb {
        width: 100% !important;
        height: auto !important;
    }

    /* USB/hardware asset detail rows */
    .asset-detail-row {
        flex-direction: column;
        gap: 6px;
    }
}

/* ══════════════════════════════════════════════════════
   BUILDINGS / SPACES VIEW
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Floor plan image: full width, maintain aspect */
    .floor-full-image,
    .floor-map-image {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* Building card grid */
    .buildings-grid .col-md-4,
    .buildings-grid .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 12px;
    }

    /* Spaces list table */
    .spaces-table {
        min-width: 500px;
    }

    /* Fix .d-grid grid on mobile */
    .d-grid.grid-columns-2 {
        grid-template-columns: 1fr !important;
    }
}

/* ══════════════════════════════════════════════════════
   GENERIC GRID / COLUMN FIXES
   ══════════════════════════════════════════════════════ */
@media (max-width: 576px) {
    /* Force single-column on xs */
    .col-md-2, .col-md-3, .col-md-4,
    .col-lg-2, .col-lg-3, .col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ══════════════════════════════════════════════════════
   SELECT2 DROPDOWNS
   ══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .select2-container {
        width: 100% !important;
    }

    .select2-dropdown {
        max-width: calc(100vw - 20px) !important;
    }
}

/* ══════════════════════════════════════════════════════
   NOTIFICATIONS DROPDOWN
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .dropdown-menu-xl {
        min-width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        right: 0 !important;
        left: auto !important;
    }
}

/* ══════════════════════════════════════════════════════
   CLIENTS TABLE — DATA VISIBILITY FIX
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Switch flex wrapper to block so the table can scroll horizontally */
    #clients-table_wrapper {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* Minimum width forces DataTables to render all columns */
    #clients-table {
        min-width: 720px;
    }
    /* Give cells an explicit height — td has padding:unset with absolute-link content */
    #clients-table tbody tr td {
        height: 48px !important;
    }
}

/* ══════════════════════════════════════════════════════
   CLIENT DETAIL — TAB CONTENT TABLES
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Scrollable DataTables wrappers inside tab panes */
    .tab-pane .dataTables_wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* All tables inside tab panes scroll horizontally */
    .tab-pane .table {
        min-width: 480px;
    }
    /* Stack the two col-6 blocks in the bills partial */
    .tab-pane .row > .col-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 8px;
    }
}

/* ══════════════════════════════════════════════════════
   PERFORMANCE TAB — STACK BUDGET/BILLING ROWS
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Stack the two side-by-side budget+billing link columns */
    #kt_tab_pane_4 .row.justify-content-md-around > .col-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 8px;
    }
    /* Fix chart loader divs that use padding-left:40% / margin-top:-150px */
    .loaderDiv,
    .loaderDivProjects,
    .loaderDivUsers {
        padding-left: 0 !important;
        margin-top: 10px !important;
        text-align: center;
    }
    /* Performance table: scroll horizontally */
    #performance-table {
        min-width: 560px;
    }
}

/* ══════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .kt-footer {
        flex-direction: column !important;
        align-items: center;
        text-align: center;
        padding: 15px !important;
        gap: 8px;
    }

    .kt-footer__menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
}

/* ══════════════════════════════════════════════════════
   TEXT SIZE ON PHONES AND TABLETS (#6185766390)
   ══════════════════════════════════════════════════════
   At 1024px and below the theme shrinks html and body to 12px
   (resources/metronic/src/assets/sass/_config.scss, $kt-font-size tablet and
   mobile, compiled into css/app.css), and resources/style/scss/app.scss forces
   .sc-font-xsm to .7rem !important, which came out at 8.4px. KM's standard is
   body text of at least 16px on phones. This file loads after app.css, so these
   rules win; desktop widths are not touched. */
@media (max-width: 1024px) {
    html,
    body {
        font-size: 16px;
    }

    .sc-font-xsm,
    .sc-font-xxsm {
        font-size: 0.875rem !important; /* 14px */
        line-height: 1.25rem;
    }
}

/* ══════════════════════════════════════════════════════
   WHAT THE 16PX BASE BROKE, AND TEXT IT DID NOT REACH (#6185766390, correction)
   ══════════════════════════════════════════════════════
   The block above makes every rem size a third bigger at 1024px and below. Renders
   found three places where that broke the layout; each is fixed here, scoped to that
   one component. The page styles (tasks board partials, the profile details tab) come
   after this file, so each selector here is one step more specific than theirs. */
@media (max-width: 1024px) {
    /* 1. Kanban card (All Tasks and a project's Tasks tab): the stage-time pills floated
       right beside the task number. Once they grew they no longer fitted on that line,
       dropped beside the title and squeezed it to one word per line. The pills now sit
       on their own row under the number and may wrap; the title below takes the full
       width of the card. */
    .kanban-card .kanban-card-stage-time-group {
        float: none;
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        row-gap: 4px;
        margin-top: 4px;
    }
    .kanban-card .kanban-card-title {
        clear: both;
    }
    /* the pills and the lane tags were 10.9px: now 14px, a tag never wider than the card */
    .kanban-card .kanban-card-stage-time,
    .kanban-card .kanban-card-stage-time-sep {
        font-size: 0.875rem;
    }
    .kanban-card .task-tag-chip {
        font-size: 0.875rem;
        line-height: 22px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: top;
    }

    /* 2. Organisation profile: Save Profile is fixed at 140px wide and 37px tall, too
       narrow for its icon and 16px text, so "Profile" spilled under the button. It now
       grows to fit its text on one line. On phones the page's own rule still makes it
       full width and 44px tall. */
    #save-profile.save-btn {
        width: auto;
        min-width: 140px;
        height: auto;
        min-height: 44px;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
}

/* 3. All Tasks list on a tablet (768px to 1024px): with the bigger chips and badges the
   table is wider than the card, so it scrolls sideways inside its own box, never the
   page. The scroll bar is kept visible so the last columns (Modified, Tokens) are
   plainly reachable rather than looking cut off. Table text stays 12px here on
   purpose: at 14px every column widens and more of the table goes out of view. */
@media (min-width: 768px) and (max-width: 1024px) {
    #tasks-table_wrapper {
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #b8bdd6 #f1f2f7;
        padding-bottom: 4px;
    }
    #tasks-table_wrapper::-webkit-scrollbar { height: 8px; }
    #tasks-table_wrapper::-webkit-scrollbar-track { background: #f1f2f7; border-radius: 4px; }
    #tasks-table_wrapper::-webkit-scrollbar-thumb { background: #b8bdd6; border-radius: 4px; }
}

/* All Tasks list on a phone: each row is a card (tasks board partials), so its text can
   be bigger with no columns to push out. The site-wide 12px !important on table cells
   above held it at 12px; here it is 14px, and the task title 16px. */
@media (max-width: 767.98px) {
    #tasks-table.dataTable tbody td {
        font-size: 14px !important;
    }
    #tasks-table.dataTable tbody tr:not(.child-task) > td:nth-child(3) {
        font-size: 16px !important;
    }
}