/* ==========================================================================
   responsive.css — mobile / tablet layer for Power Solution Admin

   Loaded LAST, after modern-admin.css and theme-refine.css.
   The base theme ships no media queries at all, so every small-screen rule
   for this app lives here.

   Breakpoints (Bootstrap 5 aligned)
     xs   < 576px    phones
     sm   >= 576px   large phones
     md   >= 768px   tablets
     lg   >= 992px   small laptops
     xl   >= 1200px  desktop
   ========================================================================== */


/* --------------------------------------------------------------------------
   Cross-cutting: never let the page scroll sideways
   -------------------------------------------------------------------------- */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Media and embeds stay inside their column */
img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

/* Long unbroken strings (emails, URLs, IDs) must not widen a table cell */
.table td,
.card-body p,
.breadcrumb-item {
    overflow-wrap: break-word;
}

/* Every horizontal scroller gets momentum scrolling on touch devices */
.card-body,
.table-responsive,
.dataTables_wrapper,
.scroll-y {
    -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   <= 1199.98px — small laptops and below
   ========================================================================== */

@media (max-width: 1199.98px) {

    .content-page {
        padding: 0 !important;
    }

    /* Charts get tall on narrow columns; cap them earlier. Releasing the
       min-width matters too: 300px inside a ~313px column pushes the
       card-body into a scrollbar. */
    .chart-box {
        min-width: 0 !important;
        height: 360px;
    }
}


/* ==========================================================================
   <= 991.98px — tablets
   ========================================================================== */

@media (max-width: 991.98px) {

    .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .card {
        margin-bottom: 18px !important;
        border-radius: 14px !important;
    }

    /* Cards should not lift on touch — there is no hover to undo it */
    .card:hover,
    .topCard:hover .card {
        transform: none !important;
    }

    h4 {
        font-size: 1.05rem !important;
        margin-bottom: 16px !important;
    }

    .chart-box {
        height: 330px;
    }

    /* Filter bars wrap instead of overflowing */
    .filter-panel {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .filter-group {
        flex: 1 1 200px !important;
    }
}


/* ==========================================================================
   <= 767.98px — phones and small tablets
   The theme switches the sidenav to "full" (off-canvas) at this width.
   ========================================================================== */

@media (max-width: 767.98px) {

    /* ---- Shell ---------------------------------------------------------- */

    .content-page,
    html[data-sidenav-size="full"] .content-page {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    .content {
        padding: 0 !important;
    }

    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Off-canvas sidebar sits above the page and its backdrop */
    .leftside-menu {
        z-index: 1055 !important;
        box-shadow: 8px 0 32px rgba(15, 23, 42, .12) !important;
    }

    .offcanvas-backdrop,
    .leftside-menu-backdrop {
        z-index: 1050 !important;
    }

    /* Bigger tap targets in the menu */
    .side-nav-link {
        padding: 13px 16px !important;
        margin: 3px 10px !important;
        font-size: .9rem !important;
    }

    .side-nav-link i {
        font-size: 1.2rem !important;
    }

    /* ---- Topbar --------------------------------------------------------- */

    .navbar-custom {
        padding: 0 !important;
    }

    .topbar {
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 6px !important;
    }

    .logo-topbar .logo-lg img {
        max-height: 34px !important;
        width: auto !important;
    }

    .button-toggle-menu {
        font-size: 1.4rem !important;
        padding: 6px 8px !important;
    }

    .topbar-menu {
        gap: 8px !important;
    }

    .profile-dropdown {
        min-width: 190px !important;
    }

    /* ---- Cards & typography --------------------------------------------- */

    .card {
        margin-bottom: 16px !important;
    }

    .card-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .card-body h3 {
        font-size: 1.35rem !important;
    }

    .avatar-title-modern {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.15rem !important;
    }

    /* ---- Tables ---------------------------------------------------------- */

    /* DataTables' responsive extension folds the low-priority columns into a
       child row, so these tables no longer need a min-width or nowrap — both
       would stop it measuring and force a sideways scroll instead. Plain
       tables (no DataTable) still get a scroll container as a fallback. */
    .card-body,
    .table-responsive {
        overflow-x: auto !important;
    }

    table.dataTable {
        min-width: 0 !important;
        width: 100% !important;
    }

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

    .table th {
        font-size: .68rem !important;
    }

    /* A table that is not a DataTable keeps the old behaviour */
    .table:not(.dataTable) {
        min-width: 560px;
    }

    .table:not(.dataTable) th,
    .table:not(.dataTable) td {
        white-space: nowrap;
    }

    /* ---- DataTables chrome ---------------------------------------------- */

    .dataTables_wrapper .top {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .dataTables_wrapper .top .dataTables_filter {
        margin-left: 0 !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_length label {
        display: flex !important;
        align-items: center;
        gap: 8px;
        width: 100%;
        font-size: .8rem !important;
    }

    .dt-buttons {
        display: flex !important;
        width: 100%;
    }

    .dt-buttons .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .dataTables_wrapper .bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .dataTables_paginate {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        float: none !important;
    }

    .dataTables_info {
        text-align: center;
        float: none !important;
    }

    /* ---- Filters -------------------------------------------------------- */

    .filter-panel {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 14px 16px !important;
        border-left-width: 3px !important;
    }

    .filter-panel > * {
        width: 100%;
    }

    .filter-group {
        flex: 1 1 100% !important;
    }

    .filter-panel input[type="date"],
    .filter-panel select,
    .filter-panel .btn {
        width: 100% !important;
    }

    .filter-actions {
        flex-direction: column !important;
        width: 100%;
    }

    .filter-actions .btn {
        width: 100% !important;
    }

    /* ---- Charts & scroll boxes ------------------------------------------ */

    .chart-box {
        min-width: 0 !important;
        width: 100% !important;
        height: 300px !important;
    }

    .scroll-min {
        min-width: 0 !important;
    }

    .scroll-y-400 { max-height: 320px; }
    .scroll-y-300 { max-height: 260px; }

    /* Highcharts / ApexCharts must follow the container, not their own width */
    .highcharts-container,
    .apexcharts-canvas {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ---- Forms & buttons ------------------------------------------------ */

    /* 16px keeps iOS Safari from zooming when a field takes focus */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    textarea,
    select,
    .form-control {
        font-size: 16px !important;
    }

    .btn {
        min-height: 42px !important;
        padding: 9px 16px !important;
    }

    /* A row of actions becomes a stack */
    .card-header .btn,
    .d-flex.gap-2 > .btn {
        flex: 1 1 auto;
    }

    /* ---- Overlays -------------------------------------------------------- */

    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }

    .modal-body {
        padding: 16px !important;
        max-height: 70vh;
        overflow-y: auto;
    }

    .dropdown-menu {
        max-width: calc(100vw - 24px);
    }

    #toast-container > div {
        width: calc(100vw - 24px) !important;
        margin-left: 0 !important;
    }

    /* ---- Footer ---------------------------------------------------------- */

    .app-footer {
        flex-direction: column;
        gap: 4px;
        text-align: center;
        padding: 16px 4px;
    }
}


/* ==========================================================================
   <= 575.98px — phones
   ========================================================================== */

@media (max-width: 575.98px) {

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

    .card-body {
        padding: 14px !important;
    }

    .card-header {
        padding: 13px 14px !important;
    }

    .card-title,
    .card-header h4,
    .card-header h5 {
        font-size: .925rem !important;
    }

    .card-body h3 {
        font-size: 1.2rem !important;
    }

    h4 {
        font-size: 1rem !important;
    }

    .table th,
    .table td {
        padding: 9px 10px !important;
        font-size: .775rem !important;
    }

    .totalCount {
        font-size: .7rem !important;
        padding: 2px 7px !important;
    }

    .badge,
    .bg-success, .bg-danger, .bg-warning, .bg-primary,
    .bg-info, .bg-secondary, .bg-purple, .bg-pink, .bg-dark {
        font-size: .7rem !important;
        padding: 3px 8px !important;
    }

    .chart-box {
        height: 260px !important;
    }

    /* Auth */
    .auth-shell {
        max-width: 100%;
    }

    .auth-card {
        padding: 28px 20px 22px !important;
        border-radius: 18px !important;
    }

    .auth-logo {
        width: 66px;
        height: 66px;
        border-radius: 17px;
    }

    .auth-title {
        font-size: 1.3rem !important;
    }

    .auth-subtitle {
        font-size: .82rem;
        margin-bottom: 22px;
    }

    /* The blurred orbs cost a lot on low-end phones for little effect */
    body.auth-body::before,
    body.auth-body::after {
        display: none;
    }

    .pagination .page-link,
    .dataTables_paginate .paginate_button {
        min-width: 34px !important;
        padding: 6px 10px !important;
        font-size: .8rem !important;
    }
}


/* ==========================================================================
   Very narrow (<= 360px) — small Androids
   ========================================================================== */

@media (max-width: 360px) {

    .container-fluid {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .card-body {
        padding: 12px !important;
    }

    .logo-topbar .logo-lg img {
        max-height: 28px !important;
    }

    .table th,
    .table td {
        font-size: .74rem !important;
        padding: 8px 9px !important;
    }
}


/* ==========================================================================
   Landscape phones — reclaim vertical space
   ========================================================================== */

@media (max-height: 480px) and (orientation: landscape) {

    body.auth-body {
        padding: 16px;
        align-items: flex-start;
    }

    .auth-card {
        padding: 22px 24px 18px !important;
    }

    .auth-logo {
        width: 54px;
        height: 54px;
        margin-bottom: 12px;
    }

    .auth-subtitle {
        margin-bottom: 16px;
    }

    .chart-box {
        height: 240px !important;
    }
}


/* ==========================================================================
   Touch devices — remove hover-only affordances
   ========================================================================== */

@media (hover: none) {

    .card:hover,
    .topCard:hover .card,
    .btn:hover,
    .btn-auth:hover {
        transform: none !important;
    }

    .card:hover .avatar-title-modern {
        transform: none !important;
    }

    /* Keep tap targets comfortable */
    .side-nav-link,
    .dropdown-item {
        min-height: 42px;
        display: flex;
        align-items: center;
    }
}


/* ==========================================================================
   Equal-height stat tiles
   A longer label must not make one card taller than its row siblings.
   ========================================================================== */

.topCard {
    display: block;
    height: 100%;
}

.topCard > .card,
.row > [class*="col-"] > .card.mb-0 {
    height: 100%;
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: column;
}

/* Column direction keeps the inner `.d-flex` row at full width — a row
   direction here would shrink it to its content and jam the icon against
   the label. */
.topCard > .card > .card-body,
.row > [class*="col-"] > .card.mb-0 > .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.topCard > .card > .card-body > .d-flex,
.row > [class*="col-"] > .card.mb-0 > .card-body > .d-flex {
    width: 100%;
}

/* The label block takes the slack so the icon stays pinned right */
.topCard .card-body > .d-flex > div:first-child,
.row > [class*="col-"] > .card.mb-0 > .card-body > .d-flex > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.topCard .avatar-title-modern,
.row > [class*="col-"] > .card.mb-0 .avatar-title-modern {
    flex: 0 0 auto;
}

/* Give the rows that hold those tiles their own gap instead */
.row.g-3 > [class*="col-"] {
    margin-bottom: 0;
}


/* ==========================================================================
   KPI tile grid on small screens

   The dashboard ships 13 of these tiles as `.col-xl-3 .col-md-6 .col-sm-12`,
   which becomes one tile per row below 768px — a very long scroll. Pack them
   two-up instead, and shrink the type to match.
   ========================================================================== */

@media (min-width: 360px) and (max-width: 767.98px) {

    .row > .col-xl-3.col-md-6.col-sm-12 {
        flex: 0 0 auto !important;
        width: 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 767.98px) {

    /* Stack the icon above the label: side-by-side leaves ~110px for a
       label like "Total Star Mechanic Visit" in a half-width tile. */
    .topCard .card-body > .d-flex {
        flex-direction: column-reverse !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .topCard > .card > .card-body {
        padding: 14px 13px !important;
        justify-content: flex-start !important;
    }

    .topCard .card-body .text-muted {
        font-size: .67rem !important;
        line-height: 1.35 !important;
        letter-spacing: .04em;
        margin-bottom: 3px !important;
    }

    .topCard .card-body h3 {
        font-size: 1.5rem !important;
        margin-top: 0 !important;
    }

    .topCard .avatar-title-modern {
        width: 34px !important;
        height: 34px !important;
        font-size: 1rem !important;
        border-radius: 10px !important;
    }

    /* A floor keeps a one-line and a three-line label aligned across the grid */
    .topCard > .card {
        min-height: 132px;
    }
}

/* Below 360px two columns get too cramped — one per row, icon back on the right */
@media (max-width: 359.98px) {

    .topCard .card-body > .d-flex {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .topCard > .card {
        min-height: 0;
    }

    .topCard .avatar-title-modern {
        width: 38px !important;
        height: 38px !important;
    }
}

/* Keep label text off the icon when they sit side by side */
.topCard .card-body > .d-flex {
    gap: 12px;
}


/* ==========================================================================
   Spacing scale per breakpoint

   premium.css defines --sp-* and builds page padding, card padding, grid
   gutters and form rhythm on top of them. Re-pointing the tokens here scales
   the whole layout at once instead of overriding each rule again.
   ========================================================================== */

@media (max-width: 991.98px) {
    :root {
        --sp-5: 18px;
        --sp-6: 20px;
        --sp-8: 26px;
    }

    .content-page > .content > .container-fluid {
        padding: var(--sp-6) !important;
    }
}

@media (max-width: 767.98px) {
    :root {
        --sp-4: 14px;
        --sp-5: 16px;
        --sp-6: 16px;
        --sp-8: 22px;
    }

    .content-page > .content > .container-fluid {
        padding: var(--sp-6) 12px !important;
    }

    .card-header,
    .card-body {
        padding: var(--sp-4) !important;
    }

    /* Form footer spans the card edge to edge */
    .form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        margin: var(--sp-5) calc(var(--sp-4) * -1) calc(var(--sp-4) * -1);
        padding: var(--sp-4);
        border-radius: 0 0 13px 13px;
    }

    .form-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    :root {
        --sp-6: 14px;
    }

    .content-page > .content > .container-fluid {
        padding: var(--sp-6) 10px !important;
    }
}