/**
 * Mechanic Manager — mobile-first responsive system (all screens).
 * Works with body classes from ResponsiveLayoutFactory:
 *   mm-bp-compact | mm-bp-tablet | mm-bp-laptop | mm-bp-desktop
 *   mm-orient-portrait | mm-orient-landscape
 *
 * Bootstrap 3 grid note: col-md activates at 992px, col-lg at 1200px.
 * This file emulates col-md at 768px+ and col-lg at 992px+ for iPad/laptop.
 */

/* ==========================================================================
   Base — all viewports (mobile-first foundation)
   ========================================================================== */

[ng-app="tpApp"] {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

[ng-app="tpApp"] img,
[ng-app="tpApp"] video,
[ng-app="tpApp"] iframe {
    max-width: 100%;
    height: auto;
}

[ng-app="tpApp"] [ui-view="body"],
[ng-app="tpApp"] #tpmenu {
    max-width: 100%;
    box-sizing: border-box;
}

/* Accounting: readable numbers in grids and totals */
[ng-app="tpApp"] .ui-grid-cell-contents,
[ng-app="tpApp"] .text-right,
[ng-app="tpApp"] td.text-right,
[ng-app="tpApp"] th.text-right,
[ng-app="tpApp"] .amount,
[ng-app="tpApp"] [prefix-dollar-operator],
[ng-app="tpApp"] .crntDate {
    font-variant-numeric: tabular-nums;
}

[ng-app="tpApp"] fieldset {
    max-width: 100%;
    box-sizing: border-box;
}

[ng-app="tpApp"] .scrollabletextbox {
    max-width: 100%;
    box-sizing: border-box;
}

div.datepicker {
    z-index: 10050 !important;
}

/* ==========================================================================
   COMPACT — phones (≤767px)
   ========================================================================== */

@media (max-width: 767px) {

    [ng-app="tpApp"]:not(.mm-marketing-route) #tpmenu,
    [ng-app="tpApp"]:not(.mm-marketing-route) [ui-view="body"] {
        overflow-x: hidden;
    }

    [ng-app="tpApp"] .CenterMainMenuOnScreen {
        max-width: 100% !important;
        padding: 0 4px;
    }

    [ng-app="tpApp"] .wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 12px auto !important;
        padding: 0 10px;
        box-sizing: border-box;
    }

    [ng-app="tpApp"] .box.left,
    [ng-app="tpApp"] .box.right {
        float: none !important;
        width: 100% !important;
    }

    /* Navigation */
    [ng-app="tpApp"] .navbar-toggle {
        min-width: 44px;
        min-height: 44px;
        margin-top: 8px;
    }

    [ng-app="tpApp"] .navbar-collapse.in .dropdown-menu,
    [ng-app="tpApp"] .navbar-collapse.in .dropdown-menu.multi-column {
        position: static !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none;
        border: none;
        padding-left: 8px;
    }

    [ng-app="tpApp"] .navbar-collapse.in .dropdown-submenu > .dropdown-menu {
        position: static !important;
        display: none;
        float: none;
        width: 100%;
        margin: 0;
        padding-left: 16px;
    }

    [ng-app="tpApp"] .navbar-collapse.in .dropdown-submenu.open > .dropdown-menu {
        display: block;
    }

    [ng-app="tpApp"] .iconTitle .anchorPad {
        padding: 10px 8px !important;
        font-size: 12px;
    }

    [ng-app="tpApp"] .thirdMenu {
        margin-bottom: 0 !important;
        width: 100% !important;
        max-width: 100%;
    }

    [ng-app="tpApp"] .headHeight {
        height: auto !important;
        min-height: 48px;
    }

    /* Stack legacy desktop grid columns */
    [ng-app="tpApp"]:not(.mm-marketing-route) [ui-view="body"]:not(:has(.im-root)) [class*="col-xs-"],
    [ng-app="tpApp"]:not(.mm-marketing-route) [ui-view="body"]:not(:has(.im-root)) [class*="col-sm-"],
    [ng-app="tpApp"]:not(.mm-marketing-route) [ui-view="body"]:not(:has(.im-root)) [class*="col-md-"],
    [ng-app="tpApp"]:not(.mm-marketing-route) [ui-view="body"]:not(:has(.im-root)) [class*="col-lg-"],
    [ng-app="tpApp"] .modal:not(.im-mobile-quick-add-modal) [class*="col-xs-"],
    [ng-app="tpApp"] .modal:not(.im-mobile-quick-add-modal) [class*="col-sm-"],
    [ng-app="tpApp"] .modal:not(.im-mobile-quick-add-modal) [class*="col-md-"],
    [ng-app="tpApp"] .modal:not(.im-mobile-quick-add-modal) [class*="col-lg-"] {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    [ng-app="tpApp"] .im-root [class*="col-sm-6"],
    [ng-app="tpApp"] .im-root [class*="col-md-6"] {
        width: auto !important;
        float: none !important;
    }

    [ng-app="tpApp"] .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Forms — touch-friendly */
    [ng-app="tpApp"] .tpControl,
    [ng-app="tpApp"] .tpControl1,
    [ng-app="tpApp"] .cuform-control,
    [ng-app="tpApp"] .inputSelect,
    [ng-app="tpApp"] input[type="text"]:not(.im-root input),
    [ng-app="tpApp"] input[type="email"]:not(.im-root input),
    [ng-app="tpApp"] input[type="number"]:not(.im-root input),
    [ng-app="tpApp"] input[type="tel"]:not(.im-root input),
    [ng-app="tpApp"] input[type="password"]:not(.im-root input),
    [ng-app="tpApp"] select:not(.im-root select),
    [ng-app="tpApp"] textarea:not(.im-root textarea) {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    [ng-app="tpApp"] .modal input[type="text"],
    [ng-app="tpApp"] .modal select,
    [ng-app="tpApp"] .modal textarea,
    [ng-app="tpApp"] [ui-view="body"] input[type="text"],
    [ng-app="tpApp"] [ui-view="body"] select,
    [ng-app="tpApp"] [ui-view="body"] textarea:not(.description-field):not([ui-grid-editor]) {
        min-height: 44px;
        font-size: 16px;
    }

    [ng-app="tpApp"] .btn:not(.im-root .btn):not(.navbar-toggle),
    [ng-app="tpApp"] button:not(.im-root button):not(.close):not(.navbar-toggle) {
        min-height: 44px;
    }

    [ng-app="tpApp"] .jumbotron {
        padding: 14px !important;
        margin-bottom: 12px !important;
    }

    [ng-app="tpApp"] .panel-heading {
        font-size: 17px !important;
        padding: 12px 40px 12px 12px !important;
        position: relative;
        word-break: break-word;
    }

    [ng-app="tpApp"] .panel-heading .close {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        min-width: 44px;
        min-height: 44px;
        font-size: 26px;
    }

    [ng-app="tpApp"] [ui-view="body"] .table-responsive,
    [ng-app="tpApp"] .modal .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    [ng-app="tpApp"] .ui-grid,
    [ng-app="tpApp"] .div_Grid {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 200px;
    }

    [ng-app="tpApp"] .ui-grid-viewport {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    [ng-app="tpApp"] .modal:not(.im-mobile-quick-add-modal):not(.im-reports-menu-modal):not(.im-reports-mobile-modal):not(.invoice-list-mobile-modal):not(.mechjob-list-mobile-modal):not(.mechquote-list-mobile-modal) .modal-dialog {
        width: calc(100% - 12px) !important;
        max-width: 100% !important;
        margin: 6px auto !important;
    }

    [ng-app="tpApp"] .modal:not(.im-mobile-quick-add-modal) .modal-body {
        max-height: calc(100dvh - 140px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    [ng-app="tpApp"] .modal-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        padding: 10px;
    }

    [ng-app="tpApp"] .modal-footer > div {
        width: 100%;
        padding: 0 !important;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }

    [ng-app="tpApp"] .modal-footer .btn {
        flex: 1 1 calc(50% - 4px);
        max-width: 100%;
    }

    [ng-app="tpApp"] [ui-view="body"] [style*="padding-left"],
    [ng-app="tpApp"] .modal [style*="padding-left"],
    [ng-app="tpApp"] [ui-view="body"] [style*="padding-right"],
    [ng-app="tpApp"] .modal [style*="padding-right"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    [ng-app="tpApp"] [ui-view="body"] [style*="width:"],
    [ng-app="tpApp"] .modal [style*="width:"] {
        max-width: 100% !important;
    }

    [ng-app="tpApp"] .input-group {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%;
    }

    [ng-app="tpApp"] .input-group .form-control,
    [ng-app="tpApp"] .input-group .inputSelect,
    [ng-app="tpApp"] .input-group input {
        flex: 1;
        min-width: 0;
    }

    [ng-app="tpApp"] .crntDate {
        text-align: center !important;
        font-size: 11px;
    }

    [ng-app="tpApp"] .ui-select-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    [ng-app="tpApp"] .ui-select-choices {
        max-width: 100vw;
    }

    div.datepicker {
        max-width: 100vw;
    }

    /* Jumbotron action rows (Services, Inventory, etc.) — 12% width clips labels on phones */
    [ng-app="tpApp"] [ui-view="body"] .jumbotron > .row > [class*="col-"] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: stretch;
    }

    [ng-app="tpApp"] [ui-view="body"] .jumbotron .button-width-change {
        width: auto !important;
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        max-width: 100%;
        white-space: nowrap;
        padding: 6px 12px !important;
    }
}

/* Body-class fallback for compact (no :has / media overlap) */
.mm-bp-compact [ng-app="tpApp"] [ui-view="body"] [class*="col-md-"],
.mm-bp-compact [ng-app="tpApp"] [ui-view="body"] [class*="col-sm-"],
.mm-bp-compact [ng-app="tpApp"] [ui-view="body"] [class*="col-lg-"] {
    width: 100% !important;
    float: none !important;
}

.mm-bp-compact [ng-app="tpApp"] [ui-view="body"] .jumbotron > .row > [class*="col-"] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}

.mm-bp-compact [ng-app="tpApp"] [ui-view="body"] .jumbotron .button-width-change {
    width: auto !important;
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    padding: 6px 12px !important;
}

/* ==========================================================================
   TABLET — iPad portrait & small tablets (768px–991px)
   Emulate Bootstrap 3 col-md-* (normally 992px+) for accounting layouts
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991px) {

    [ng-app="tpApp"] .CenterMainMenuOnScreen {
        max-width: 100% !important;
        padding: 0 8px;
    }

    [ng-app="tpApp"] [ui-view="body"] {
        padding: 0 12px 20px;
    }

    /* col-md emulation on tablet */
    [ng-app="tpApp"] [ui-view="body"]:not(:has(.im-root)) .col-md-1  { width: 8.33333333%; float: left; }
    [ng-app="tpApp"] [ui-view="body"]:not(:has(.im-root)) .col-md-2  { width: 16.66666667%; float: left; }
    [ng-app="tpApp"] [ui-view="body"]:not(:has(.im-root)) .col-md-3  { width: 25%; float: left; }
    [ng-app="tpApp"] [ui-view="body"]:not(:has(.im-root)) .col-md-4  { width: 33.33333333%; float: left; }
    [ng-app="tpApp"] [ui-view="body"]:not(:has(.im-root)) .col-md-5  { width: 41.66666667%; float: left; }
    [ng-app="tpApp"] [ui-view="body"]:not(:has(.im-root)) .col-md-6  { width: 50%; float: left; }
    [ng-app="tpApp"] [ui-view="body"]:not(:has(.im-root)) .col-md-7  { width: 58.33333333%; float: left; }
    [ng-app="tpApp"] [ui-view="body"]:not(:has(.im-root)) .col-md-8  { width: 66.66666667%; float: left; }
    [ng-app="tpApp"] [ui-view="body"]:not(:has(.im-root)) .col-md-9  { width: 75%; float: left; }
    [ng-app="tpApp"] [ui-view="body"]:not(:has(.im-root)) .col-md-10 { width: 83.33333333%; float: left; }
    [ng-app="tpApp"] [ui-view="body"]:not(:has(.im-root)) .col-md-11 { width: 91.66666667%; float: left; }
    [ng-app="tpApp"] [ui-view="body"]:not(:has(.im-root)) .col-md-12 { width: 100%; float: left; }

    [ng-app="tpApp"] .modal .col-md-6 { width: 50%; float: left; }
    [ng-app="tpApp"] .modal .col-md-12 { width: 100%; float: left; }

    /* Icon menu — centered, wraps when needed on tablet */
    [ng-app="tpApp"] .thirdMenu {
        width: fit-content !important;
        max-width: calc(100vw - 16px);
        margin-left: auto !important;
        margin-right: auto !important;
    }

    [ng-app="tpApp"] .thirdMenu .navbar-collapse {
        overflow-x: visible;
        overflow-y: visible;
        max-width: 100%;
        width: auto;
    }

    [ng-app="tpApp"] .thirdMenu .navbar-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        white-space: normal;
        float: none !important;
        margin: 0 auto;
        width: auto;
    }

    [ng-app="tpApp"] .thirdMenu .navbar-nav > li {
        float: none;
        flex: 0 0 auto;
    }

    [ng-app="tpApp"] .iconTitle .anchorPad {
        padding: 8px 6px !important;
        min-width: 0;
        max-width: none;
        text-align: center;
    }

    [ng-app="tpApp"] .iconTitle i {
        font-size: 18px !important;
    }

    /* Modals — comfortable on iPad */
    [ng-app="tpApp"] .modal-dialog {
        width: 92% !important;
        max-width: 720px !important;
        margin: 16px auto !important;
    }

    [ng-app="tpApp"] .modal-body {
        max-height: calc(100dvh - 160px);
        overflow-y: auto;
    }

    /* Grids */
    [ng-app="tpApp"] .ui-grid,
    [ng-app="tpApp"] .div_Grid {
        width: 100% !important;
        min-height: 240px;
    }

    [ng-app="tpApp"] .ui-grid-viewport {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Action button rows */
    [ng-app="tpApp"] [ui-view="body"] .btn-toolbar,
    [ng-app="tpApp"] [ui-view="body"] .panel-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
    }
}

/* iPad landscape — use horizontal space (768px+ landscape) */
@media (min-width: 768px) and (orientation: landscape) {

    [ng-app="tpApp"] .thirdMenu {
        margin-bottom: 8px !important;
    }

    [ng-app="tpApp"] .thirdMenu .navbar-nav {
        justify-content: center;
    }

    [ng-app="tpApp"] .modal-dialog.modal-lg {
        max-width: min(960px, 94vw) !important;
    }

    [ng-app="tpApp"] .im-root .im-body {
        max-width: min(900px, 100%);
    }
}

/* ==========================================================================
   LAPTOP — 992px–1199px (emulate col-lg-* for BS3)
   ========================================================================== */

@media (min-width: 992px) and (max-width: 1199px) {

    [ng-app="tpApp"] [ui-view="body"]:not(:has(.im-root)) .col-lg-1  { width: 8.33333333%; float: left; }
    [ng-app="tpApp"] [ui-view="body"]:not(:has(.im-root)) .col-lg-2  { width: 16.66666667%; float: left; }
    [ng-app="tpApp"] [ui-view="body"]:not(:has(.im-root)) .col-lg-3  { width: 25%; float: left; }
    [ng-app="tpApp"] [ui-view="body"]:not(:has(.im-root)) .col-lg-4  { width: 33.33333333%; float: left; }
    [ng-app="tpApp"] [ui-view="body"]:not(:has(.im-root)) .col-lg-5  { width: 41.66666667%; float: left; }
    [ng-app="tpApp"] [ui-view="body"]:not(:has(.im-root)) .col-lg-6  { width: 50%; float: left; }
    [ng-app="tpApp"] [ui-view="body"]:not(:has(.im-root)) .col-lg-7  { width: 58.33333333%; float: left; }
    [ng-app="tpApp"] [ui-view="body"]:not(:has(.im-root)) .col-lg-8  { width: 66.66666667%; float: left; }
    [ng-app="tpApp"] [ui-view="body"]:not(:has(.im-root)) .col-lg-9  { width: 75%; float: left; }
    [ng-app="tpApp"] [ui-view="body"]:not(:has(.im-root)) .col-lg-10 { width: 83.33333333%; float: left; }
    [ng-app="tpApp"] [ui-view="body"]:not(:has(.im-root)) .col-lg-11 { width: 91.66666667%; float: left; }
    [ng-app="tpApp"] [ui-view="body"]:not(:has(.im-root)) .col-lg-12 { width: 100%; float: left; }

    [ng-app="tpApp"] .modal-dialog.modal-lg {
        max-width: 960px;
    }
}

/* ==========================================================================
   DESKTOP — 1200px+
   ========================================================================== */

@media (min-width: 1200px) {

    [ng-app="tpApp"] [ui-view="body"] {
        padding: 0 16px 28px;
    }
}

/* ==========================================================================
   Tablet body-class fallbacks (col-md emulation without :has)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991px) {
    .mm-bp-tablet [ng-app="tpApp"] [ui-view="body"] .col-md-6 {
        width: 50%;
        float: left;
        box-sizing: border-box;
        padding-left: 8px;
        padding-right: 8px;
    }

    .mm-bp-tablet [ng-app="tpApp"] [ui-view="body"] .col-md-4 {
        width: 33.33333333%;
        float: left;
        box-sizing: border-box;
    }

    .mm-bp-tablet [ng-app="tpApp"] [ui-view="body"] .col-md-3 {
        width: 25%;
        float: left;
        box-sizing: border-box;
    }

    .mm-bp-tablet [ng-app="tpApp"] [ui-view="body"] .col-md-12 {
        width: 100%;
        float: left;
    }
}

/* ==========================================================================
   Professional accounting UX — all logged-in sizes
   ========================================================================== */

[ng-app="tpApp"] [ui-view="body"] .panel {
    margin-bottom: 16px;
}

[ng-app="tpApp"] [ui-view="body"] .panel-footer .btn,
[ng-app="tpApp"] [ui-view="body"] .btn-toolbar .btn {
    margin: 2px 4px 2px 0;
}

/* Sticky section headers inside scrollable panels (reports, lists) */
[ng-app="tpApp"] .im-report-screen .panel-heading,
[ng-app="tpApp"] [ui-view="body"] .panel-primary > .panel-heading {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* FullCalendar on tablet/desktop */
@media (min-width: 768px) {
    [ng-app="tpApp"] .fc-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* Safe area for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
    .mm-bp-compact [ng-app="tpApp"] .im-root .im-footer,
    .mm-bp-compact [ng-app="tpApp"] .modal-footer {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    .mm-bp-compact [ng-app="tpApp"] .navbar-fixed-top,
    .mm-bp-compact [ng-app="tpApp"] .im-topbar {
        padding-top: env(safe-area-inset-top);
    }
}

/* Browsers without :has() — compact column stack */
@supports not selector(:has(*)) {
    @media (max-width: 767px) {
        [ng-app="tpApp"] [ui-view="body"] [class*="col-md-"],
        [ng-app="tpApp"] [ui-view="body"] [class*="col-sm-"],
        [ng-app="tpApp"] [ui-view="body"] [class*="col-lg-"] {
            width: 100% !important;
            float: none !important;
        }
    }
}