/**
 * Mechanic Manager — Modern design system (Bootstrap 3 compatible).
 * Visual refresh without breaking ui-bootstrap / legacy markup.
 * Load after bootstrap.css, style.css, and mobile-global.css.
 */

/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
    --mm-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mm-font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;

    /* Brand — refined from legacy #0079bf */
    --mm-brand-50:  #e8f4fc;
    --mm-brand-100: #cce8f8;
    --mm-brand-200: #99d1f1;
    --mm-brand-300: #66b9e9;
    --mm-brand-400: #3399d9;
    --mm-brand-500: #0079bf;
    --mm-brand-600: #0066a3;
    --mm-brand-700: #005288;
    --mm-brand-800: #003d66;
    --mm-brand-900: #002842;

    --mm-accent:      #0ea5e9;
    --mm-accent-soft: #e0f2fe;
    --mm-success:     #059669;
    --mm-success-soft:#d1fae5;
    --mm-warning:     #d97706;
    --mm-warning-soft:#fef3c7;
    --mm-danger:      #dc2626;
    --mm-danger-soft: #fee2e2;

    --mm-surface:     #ffffff;
    --mm-surface-2:   #f8fafc;
    --mm-surface-3:   #f1f5f9;
    --mm-border:      #e2e8f0;
    --mm-border-strong:#cbd5e1;
    --mm-text:        #0f172a;
    --mm-text-secondary: #475569;
    --mm-text-muted:  #64748b;
    --mm-text-inverse:#ffffff;

    --mm-radius-sm:   6px;
    --mm-radius:      10px;
    --mm-radius-lg:   14px;
    --mm-radius-pill: 999px;

    --mm-shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.05);
    --mm-shadow-sm:   0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --mm-shadow:      0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --mm-shadow-lg:   0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);
    --mm-shadow-brand:0 4px 14px rgba(0, 121, 191, 0.25);

    --mm-transition:  0.18s ease;
    --mm-tap:         44px;
    --mm-content-max: 1280px;
}

/* Align mobile-native screens with global brand tokens */
.im-root {
    --im-blue:       var(--mm-brand-500);
    --im-blue-dark:  var(--mm-brand-600);
    --im-green:      var(--mm-success);
    --im-green-light:var(--mm-success-soft);
    --im-red:        var(--mm-danger);
    --im-grey-bg:    var(--mm-surface-3);
    --im-card-bg:    var(--mm-surface);
    --im-border:     var(--mm-border);
    --im-text:       var(--mm-text);
    --im-text-muted: var(--mm-text-muted);
    --im-label:      var(--mm-text-secondary);
    --im-shadow:     var(--mm-shadow-sm);
    --im-radius:     var(--mm-radius);
    --im-tap:        var(--mm-tap);
    font-family: var(--mm-font) !important;
}

/* ==========================================================================
   Base typography & smoothing
   ========================================================================== */

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body:not(.mm-marketing-route),
[ng-app="tpApp"]:not(.mm-marketing-route) {
    font-family: var(--mm-font) !important;
    font-size: 14px;
    line-height: 1.5;
    color: var(--mm-text);
    background-color: var(--mm-surface-2);
}

body:not(.mm-marketing-route) h1,
body:not(.mm-marketing-route) h2,
body:not(.mm-marketing-route) h3,
body:not(.mm-marketing-route) h4,
body:not(.mm-marketing-route) h5,
body:not(.mm-marketing-route) h6,
[ng-app="tpApp"]:not(.mm-marketing-route) h1,
[ng-app="tpApp"]:not(.mm-marketing-route) h2,
[ng-app="tpApp"]:not(.mm-marketing-route) h3,
[ng-app="tpApp"]:not(.mm-marketing-route) h4,
[ng-app="tpApp"]:not(.mm-marketing-route) h5,
[ng-app="tpApp"]:not(.mm-marketing-route) h6,
body:not(.mm-marketing-route) .h1,
body:not(.mm-marketing-route) .h2,
body:not(.mm-marketing-route) .h3,
body:not(.mm-marketing-route) .h4,
body:not(.mm-marketing-route) .h5,
body:not(.mm-marketing-route) .h6 {
    font-family: var(--mm-font) !important;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--mm-text);
}

a {
    transition: color var(--mm-transition);
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--mm-brand-400);
    outline-offset: 2px;
}

/* ==========================================================================
   Glyphicons → Font Awesome 6 (legacy markup, modern icons)
   ========================================================================== */

.glyphicon {
    display: inline-block;
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    font-style: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.glyphicon:before { speak: never; }

.glyphicon-refresh:before          { content: "\f021"; }
.glyphicon-briefcase:before        { content: "\f0b1"; }
.glyphicon-floppy-disk:before      { content: "\f0c7"; }
.glyphicon-floppy-save:before      { content: "\f0c7"; }
.glyphicon-calendar:before         { content: "\f073"; }
.glyphicon-saved:before            { content: "\f058"; }
.glyphicon-remove:before           { content: "\f00d"; }
.glyphicon-plus:before             { content: "\f067"; }
.glyphicon-minus:before            { content: "\f068"; }
.glyphicon-search:before           { content: "\f002"; }
.glyphicon-pencil:before           { content: "\f303"; }
.glyphicon-trash:before            { content: "\f1f8"; }
.glyphicon-print:before            { content: "\f02f"; }
.glyphicon-chevron-left:before     { content: "\f053"; }
.glyphicon-chevron-right:before    { content: "\f054"; }
.glyphicon-chevron-up:before       { content: "\f077"; }
.glyphicon-chevron-down:before     { content: "\f078"; }
.glyphicon-menu-hamburger:before   { content: "\f0c9"; }
.glyphicon-ok:before               { content: "\f00c"; }
.glyphicon-remove-sign:before      { content: "\f057"; }
.glyphicon-question-sign:before    { content: "\f059"; }
.glyphicon-info-sign:before        { content: "\f05a"; }
.glyphicon-exclamation-sign:before { content: "\f06a"; }
.glyphicon-download:before         { content: "\f019"; }
.glyphicon-upload:before           { content: "\f093"; }
.glyphicon-folder-open:before      { content: "\f07c"; }
.glyphicon-file:before             { content: "\f15b"; }
.glyphicon-list-alt:before         { content: "\f022"; }
.glyphicon-cog:before              { content: "\f013"; }
.glyphicon-user:before             { content: "\f007"; }
.glyphicon-home:before             { content: "\f015"; }
.glyphicon-envelope:before         { content: "\f0e0"; }
.glyphicon-phone:before            { content: "\f095"; }
.glyphicon-time:before             { content: "\f017"; }
.glyphicon-ice-lolly:before,
.glyphicon-ice-lolly-tasted:before { content: "\f1b0"; opacity: 0.85; }

/* ==========================================================================
   Top header bar
   ========================================================================== */

[ng-app="tpApp"]:not(.mm-marketing-route) .navbar.bgcolor,
[ng-app="tpApp"]:not(.mm-marketing-route) .navbar.bgColor,
[ng-app="tpApp"]:not(.mm-marketing-route) .bgColor,
[ng-app="tpApp"]:not(.mm-marketing-route) .login-page-header.bgColor,
[ng-app="tpApp"]:not(.mm-marketing-route) .headerr.bgColor {
    background: linear-gradient(135deg, var(--mm-brand-600) 0%, var(--mm-brand-500) 45%, var(--mm-brand-400) 100%) !important;
    border: none !important;
    box-shadow: var(--mm-shadow);
}

[ng-app="tpApp"]:not(.mm-marketing-route) .navbar.bgcolor .navbar-nav > li > a,
[ng-app="tpApp"]:not(.mm-marketing-route) .navbar.bgcolor .fColor,
[ng-app="tpApp"]:not(.mm-marketing-route) .navbar.bgcolor .crntDate {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 500;
    font-size: 13px;
    transition: background var(--mm-transition), color var(--mm-transition);
}

[ng-app="tpApp"]:not(.mm-marketing-route) .navbar.bgcolor .navbar-nav > li > a:hover,
[ng-app="tpApp"]:not(.mm-marketing-route) .navbar.bgcolor .navbar-nav > li > a:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    border-radius: var(--mm-radius-sm);
}

[ng-app="tpApp"]:not(.mm-marketing-route) .navbar.bgcolor,
[ng-app="tpApp"]:not(.mm-marketing-route) .navbar.bgColor {
    margin-bottom: 0 !important;
}

[ng-app="tpApp"]:not(.mm-marketing-route) .navbar.bgcolor .navbar-toggle .icon-bar,
[ng-app="tpApp"]:not(.mm-marketing-route) .navbar.bgColor .navbar-toggle .icon-bar {
    background-color: #fff !important;
    border-radius: 2px;
}

[ng-app="tpApp"]:not(.mm-marketing-route) .headHeight {
    min-height: 56px;
    display: flex;
    align-items: center;
}

[ng-app="tpApp"] .crntDate {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   Main icon menu (second nav)
   ========================================================================== */

[ng-app="tpApp"] .thirdMenu {
    background: var(--mm-surface) !important;
    border: 1px solid var(--mm-border) !important;
    border-radius: var(--mm-radius) !important;
    box-shadow: var(--mm-shadow-sm) !important;
    margin-bottom: 12px !important;
    padding: 4px 0;
}

[ng-app="tpApp"] .thirdMenu .navbar-nav > li > a,
[ng-app="tpApp"] .iconTitle .anchorPad {
    color: var(--mm-text-secondary) !important;
    font-weight: 500;
    font-size: 11px;
    border-radius: var(--mm-radius-sm);
    transition: background var(--mm-transition), color var(--mm-transition), transform var(--mm-transition);
}

[ng-app="tpApp"] .iconTitle i,
[ng-app="tpApp"] .iconTitle .fa,
[ng-app="tpApp"] .iconTitle .fas,
[ng-app="tpApp"] .iconTitle .far {
    font-size: 20px !important;
    color: var(--mm-brand-500);
    margin-bottom: 4px;
    display: block;
    transition: color var(--mm-transition), transform var(--mm-transition);
}

[ng-app="tpApp"] .iconTitle .anchorPad:hover,
[ng-app="tpApp"] .iconTitle .anchorPad:focus,
[ng-app="tpApp"] .thirdMenu .navbar-nav > li > a:hover,
[ng-app="tpApp"] .thirdMenu .navbar-nav > li > a:focus {
    background: var(--mm-brand-50) !important;
    color: var(--mm-brand-700) !important;
    text-decoration: none;
}

[ng-app="tpApp"] .iconTitle .anchorPad:hover i,
[ng-app="tpApp"] .iconTitle .anchorPad:hover .fa {
    color: var(--mm-brand-600);
    transform: translateY(-1px);
}

[ng-app="tpApp"] .thirdMenu .navbar-default .navbar-toggle .icon-bar {
    background-color: var(--mm-text) !important;
}

/* ==========================================================================
   Dropdown menus
   ========================================================================== */

[ng-app="tpApp"] .dropdown-menu {
    border: 1px solid var(--mm-border) !important;
    border-radius: var(--mm-radius) !important;
    box-shadow: var(--mm-shadow-lg) !important;
    padding: 6px 0 !important;
    font-size: 13px;
}

[ng-app="tpApp"] .dropdown-menu > li > a {
    padding: 8px 16px !important;
    color: var(--mm-text-secondary) !important;
    transition: background var(--mm-transition), color var(--mm-transition);
}

[ng-app="tpApp"] .dropdown-menu > li > a:hover,
[ng-app="tpApp"] .dropdown-menu > li > a:focus {
    background: var(--mm-brand-50) !important;
    color: var(--mm-brand-700) !important;
}

[ng-app="tpApp"] .dropdown-submenu > .dropdown-menu {
    border-radius: var(--mm-radius) !important;
}

/* ==========================================================================
   Panels → modern cards
   ========================================================================== */

[ng-app="tpApp"] .panel {
    border: 1px solid var(--mm-border) !important;
    border-radius: var(--mm-radius) !important;
    box-shadow: var(--mm-shadow-sm) !important;
    background: var(--mm-surface);
    overflow: hidden;
    margin-bottom: 16px;
}

[ng-app="tpApp"] .panel-heading {
    background: linear-gradient(180deg, var(--mm-surface) 0%, var(--mm-surface-2) 100%) !important;
    border-bottom: 1px solid var(--mm-border) !important;
    padding: 12px 16px !important;
    font-weight: 600;
    font-size: 14px;
    color: var(--mm-text);
    border-radius: var(--mm-radius) var(--mm-radius) 0 0 !important;
}

[ng-app="tpApp"] .panel-body {
    padding: 16px !important;
}

[ng-app="tpApp"] .panel-footer {
    background: var(--mm-surface-2) !important;
    border-top: 1px solid var(--mm-border) !important;
    padding: 12px 16px !important;
}

[ng-app="tpApp"] .panel-primary > .panel-heading {
    background: linear-gradient(135deg, var(--mm-brand-600), var(--mm-brand-500)) !important;
    border-color: var(--mm-brand-600) !important;
    color: #fff !important;
}

[ng-app="tpApp"] .panel-info > .panel-heading {
    background: var(--mm-accent-soft) !important;
    border-color: var(--mm-border) !important;
    color: var(--mm-brand-800) !important;
}

[ng-app="tpApp"] .tpPanel,
[ng-app="tpApp"] .welcomeClass {
    font-family: var(--mm-font) !important;
    border-radius: var(--mm-radius) !important;
    box-shadow: var(--mm-shadow-sm);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

[ng-app="tpApp"] .btn {
    font-family: var(--mm-font) !important;
    font-weight: 500;
    border-radius: var(--mm-radius-sm) !important;
    padding: 7px 14px;
    transition: background var(--mm-transition), border-color var(--mm-transition),
                box-shadow var(--mm-transition), transform 0.12s ease;
    box-shadow: var(--mm-shadow-xs);
}

[ng-app="tpApp"] .btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

[ng-app="tpApp"] .btn-primary {
    background: linear-gradient(180deg, var(--mm-brand-500), var(--mm-brand-600)) !important;
    border-color: var(--mm-brand-600) !important;
    color: #fff !important;
}

[ng-app="tpApp"] .btn-primary:hover,
[ng-app="tpApp"] .btn-primary:focus {
    background: linear-gradient(180deg, var(--mm-brand-400), var(--mm-brand-500)) !important;
    border-color: var(--mm-brand-500) !important;
    box-shadow: var(--mm-shadow-brand);
}

[ng-app="tpApp"] .btn-success {
    background: var(--mm-success) !important;
    border-color: #047857 !important;
}

[ng-app="tpApp"] .btn-info,
[ng-app="tpApp"] .btn-info2 {
    background: var(--mm-accent) !important;
    border-color: #0284c7 !important;
    color: #fff !important;
}

[ng-app="tpApp"] .btn-default {
    background: var(--mm-surface) !important;
    border-color: var(--mm-border-strong) !important;
    color: var(--mm-text-secondary) !important;
}

[ng-app="tpApp"] .btn-default:hover {
    background: var(--mm-surface-2) !important;
    border-color: var(--mm-brand-300) !important;
    color: var(--mm-brand-700) !important;
}

[ng-app="tpApp"] .btn-danger {
    background: var(--mm-danger) !important;
    border-color: #b91c1c !important;
}

[ng-app="tpApp"] .btn-warning {
    background: var(--mm-warning) !important;
    border-color: #b45309 !important;
    color: #fff !important;
}

[ng-app="tpApp"] .btn-sm {
    padding: 5px 10px;
    font-size: 12px;
}

[ng-app="tpApp"] .btn-lg {
    padding: 10px 20px;
    font-size: 15px;
    border-radius: var(--mm-radius) !important;
}

/* ==========================================================================
   Forms
   ========================================================================== */

[ng-app="tpApp"] .form-control,
[ng-app="tpApp"] .tpControl,
[ng-app="tpApp"] .tpControl1,
[ng-app="tpApp"] .cuform-control,
[ng-app="tpApp"] .Cform-control,
[ng-app="tpApp"] .inputSelect,
[ng-app="tpApp"] select.form-control {
    font-family: var(--mm-font) !important;
    border: 1px solid var(--mm-border-strong) !important;
    border-radius: var(--mm-radius-sm) !important;
    box-shadow: none !important;
    color: var(--mm-text);
    background: var(--mm-surface);
    transition: border-color var(--mm-transition), box-shadow var(--mm-transition);
    min-height: 36px;
}

[ng-app="tpApp"] .form-control:focus,
[ng-app="tpApp"] .tpControl:focus,
[ng-app="tpApp"] .cuform-control:focus,
[ng-app="tpApp"] .Cform-control:focus {
    border-color: var(--mm-brand-400) !important;
    box-shadow: 0 0 0 3px rgba(0, 121, 191, 0.15) !important;
}

[ng-app="tpApp"] .control-label,
[ng-app="tpApp"] label {
    font-weight: 500;
    color: var(--mm-text-secondary);
    font-size: 13px;
}

[ng-app="tpApp"] .input-group-addon {
    background: var(--mm-surface-2) !important;
    border-color: var(--mm-border-strong) !important;
    color: var(--mm-text-muted);
    border-radius: var(--mm-radius-sm) !important;
}

[ng-app="tpApp"] .has-error .form-control {
    border-color: var(--mm-danger) !important;
}

[ng-app="tpApp"] .has-success .form-control {
    border-color: var(--mm-success) !important;
}

/* ui-select */
[ng-app="tpApp"] .ui-select-bootstrap .ui-select-toggle {
    border-radius: var(--mm-radius-sm) !important;
    border-color: var(--mm-border-strong) !important;
}

[ng-app="tpApp"] .ui-select-bootstrap .ui-select-choices {
    border-radius: var(--mm-radius) !important;
    box-shadow: var(--mm-shadow-lg) !important;
}

/* ==========================================================================
   Modals
   ========================================================================== */

[ng-app="tpApp"] .modal-content {
    border: none !important;
    border-radius: var(--mm-radius-lg) !important;
    box-shadow: var(--mm-shadow-lg) !important;
    overflow: hidden;
}

[ng-app="tpApp"] .modal-header {
    background: linear-gradient(180deg, var(--mm-surface) 0%, var(--mm-surface-2) 100%);
    border-bottom: 1px solid var(--mm-border) !important;
    padding: 14px 18px !important;
}

[ng-app="tpApp"] .modal-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--mm-text);
}

[ng-app="tpApp"] .modal-body {
    padding: 18px !important;
}

[ng-app="tpApp"] .modal-footer {
    background: var(--mm-surface-2);
    border-top: 1px solid var(--mm-border) !important;
    padding: 12px 18px !important;
}

[ng-app="tpApp"] .modal-backdrop.in {
    opacity: 0.45;
    backdrop-filter: blur(2px);
}

/* ==========================================================================
   Tables
   ========================================================================== */

[ng-app="tpApp"] .table {
    border-collapse: separate;
    border-spacing: 0;
}

[ng-app="tpApp"] .table > thead > tr > th {
    background: var(--mm-surface-2);
    border-bottom: 2px solid var(--mm-border) !important;
    color: var(--mm-text-secondary);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 12px !important;
}

[ng-app="tpApp"] .table > tbody > tr > td {
    padding: 10px 12px !important;
    border-top: 1px solid var(--mm-border) !important;
    vertical-align: middle;
}

[ng-app="tpApp"] .table-striped > tbody > tr:nth-of-type(odd) {
    background: var(--mm-surface-2);
}

[ng-app="tpApp"] .table-hover > tbody > tr:hover {
    background: var(--mm-brand-50) !important;
}

/* ==========================================================================
   ui-grid
   ========================================================================== */

[ng-app="tpApp"] .ui-grid {
    border: 1px solid var(--mm-border) !important;
    border-radius: var(--mm-radius) !important;
    overflow: hidden;
    box-shadow: var(--mm-shadow-xs);
    font-family: var(--mm-font) !important;
}

/* Line-item grids (Invoice / Quote / Job Card) — allow description textarea to expand */
[ng-app="tpApp"] #myGrid1.ui-grid,
[ng-app="tpApp"] .UI_Grid_SpreadSheet .ui-grid,
[ng-app="tpApp"] .gridPurchaseList .ui-grid {
    overflow: visible !important;
}

[ng-app="tpApp"] .ui-grid-header {
    background: var(--mm-surface-2) !important;
    border-bottom: 1px solid var(--mm-border) !important;
}

[ng-app="tpApp"] .ui-grid-header-cell {
    font-weight: 600 !important;
    font-size: 12px !important;
    color: var(--mm-text-secondary) !important;
    border-right: 1px solid var(--mm-border) !important;
}

[ng-app="tpApp"] .ui-grid-row:nth-child(even) .ui-grid-cell {
    background: var(--mm-surface-2);
}

[ng-app="tpApp"] .UI_Grid_SpreadSheet .ui-grid-row:hover .ui-grid-cell,
[ng-app="tpApp"] #myGrid1 .ui-grid-row:hover .ui-grid-cell {
    background: var(--mm-brand-50) !important;
}

[ng-app="tpApp"] .ui-grid-cell {
    border-right: 1px solid var(--mm-border) !important;
    border-bottom: 1px solid var(--mm-border) !important;
}

[ng-app="tpApp"] .ui-grid-cell-contents {
    padding: 6px 8px;
}

[ng-app="tpApp"] .ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell {
    background: var(--mm-brand-100) !important;
}

/* ==========================================================================
   Alerts, badges, wells
   ========================================================================== */

[ng-app="tpApp"] .alert {
    border-radius: var(--mm-radius) !important;
    border: none !important;
    box-shadow: var(--mm-shadow-xs);
    font-weight: 500;
}

[ng-app="tpApp"] .alert-info {
    background: var(--mm-accent-soft) !important;
    color: var(--mm-brand-800) !important;
}

[ng-app="tpApp"] .alert-success {
    background: var(--mm-success-soft) !important;
    color: #065f46 !important;
}

[ng-app="tpApp"] .alert-warning {
    background: var(--mm-warning-soft) !important;
    color: #92400e !important;
}

[ng-app="tpApp"] .alert-danger {
    background: var(--mm-danger-soft) !important;
    color: #991b1b !important;
}

[ng-app="tpApp"] .badge,
[ng-app="tpApp"] .label {
    border-radius: var(--mm-radius-pill) !important;
    font-weight: 600;
    font-size: 11px;
    padding: 3px 8px;
}

[ng-app="tpApp"] .label-primary,
[ng-app="tpApp"] .badge-primary {
    background: var(--mm-brand-500) !important;
}

[ng-app="tpApp"] .well {
    background: var(--mm-surface) !important;
    border: 1px solid var(--mm-border) !important;
    border-radius: var(--mm-radius) !important;
    box-shadow: var(--mm-shadow-xs);
}

/* ==========================================================================
   Purchase sub-menu tabs
   ========================================================================== */

[ng-app="tpApp"] .purchaseMenu ul li a {
    color: var(--mm-brand-600) !important;
    font-weight: 500;
    text-decoration: none !important;
    border-radius: var(--mm-radius-sm);
    transition: background var(--mm-transition);
}

[ng-app="tpApp"] .purchaseMenu ul li a:hover {
    background: var(--mm-brand-50);
    text-decoration: none !important;
}

/* ==========================================================================
   Login & welcome
   ========================================================================== */

[ng-app="tpApp"] .form_wrapper {
    background: linear-gradient(160deg, var(--mm-brand-600), var(--mm-brand-500)) !important;
    border: none !important;
    border-radius: var(--mm-radius-lg) !important;
    box-shadow: var(--mm-shadow-lg) !important;
    overflow: hidden;
}

[ng-app="tpApp"] .form_wrapper h3,
[ng-app="tpApp"] .form_wrapper form h3,
[ng-app="tpApp"] .login-page .form_wrapper h3,
[ng-app="tpApp"] .free-trial-page .form_wrapper h3,
[ng-app="tpApp"] .register-page .form_wrapper h3,
[ng-app="tpApp"] .change-password-page .form_wrapper h3,
[ng-app="tpApp"] .form-trial h3 {
    color: #fff !important;
    background: linear-gradient(160deg, var(--mm-brand-600), var(--mm-brand-500)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

[ng-app="tpApp"] .welcome {
    border-radius: var(--mm-radius-lg) var(--mm-radius-lg) 0 0 !important;
    box-shadow: var(--mm-shadow-sm) !important;
    font-family: var(--mm-font) !important;
}

/* ==========================================================================
   Alertify notifications
   ========================================================================== */

.alertify .ajs-dialog {
    border-radius: var(--mm-radius-lg) !important;
    box-shadow: var(--mm-shadow-lg) !important;
    font-family: var(--mm-font) !important;
}

.alertify .ajs-header {
    font-weight: 600;
}

.alertify .ajs-ok {
    background: var(--mm-brand-500) !important;
    border-color: var(--mm-brand-600) !important;
    border-radius: var(--mm-radius-sm) !important;
}

/* ==========================================================================
   Dashboard & reports (desktop + mobile)
   ========================================================================== */

[ng-app="tpApp"] .im-report-screen .panel,
[ng-app="tpApp"] .im-reports-mobile-modal .panel {
    border-radius: var(--mm-radius) !important;
}

[ng-app="tpApp"] .im-reports-mobile-modal .panel-heading {
    font-weight: 600;
}

/* ==========================================================================
   Content area layout polish
   ========================================================================== */

[ng-app="tpApp"]:not(.mm-marketing-route) [ui-view="body"] {
    padding: 0 12px 24px;
}

[ng-app="tpApp"] .CenterMainMenuOnScreen {
    display: flex;
    justify-content: center;
    max-width: 100%;
    width: 100%;
}

[ng-app="tpApp"] .thirdMenu .navbar-collapse.in .navbar-nav,
[ng-app="tpApp"] .thirdMenu .navbar-collapse.collapsing .navbar-nav {
    justify-content: flex-start;
}

[ng-app="tpApp"] .wrapper {
    border-radius: var(--mm-radius);
}

/* Nav pills / tabs */
[ng-app="tpApp"] .nav-pills > li.active > a,
[ng-app="tpApp"] .nav-pills > li.active > a:hover,
[ng-app="tpApp"] .nav-pills > li.active > a:focus {
    background: var(--mm-brand-500) !important;
    border-radius: var(--mm-radius-sm) !important;
}

[ng-app="tpApp"] .nav-tabs {
    border-bottom: 2px solid var(--mm-border) !important;
}

[ng-app="tpApp"] .nav-tabs > li.active > a,
[ng-app="tpApp"] .nav-tabs > li.active > a:hover {
    border-color: var(--mm-border) var(--mm-border) transparent !important;
    color: var(--mm-brand-600) !important;
    font-weight: 600;
}

/* Pagination */
[ng-app="tpApp"] .pagination > li > a,
[ng-app="tpApp"] .pagination > li > span {
    border-radius: var(--mm-radius-sm) !important;
    margin: 0 2px;
    color: var(--mm-text-secondary);
    border-color: var(--mm-border) !important;
}

[ng-app="tpApp"] .pagination > .active > a {
    background: var(--mm-brand-500) !important;
    border-color: var(--mm-brand-500) !important;
}

/* Progress bars */
[ng-app="tpApp"] .progress {
    border-radius: var(--mm-radius-pill) !important;
    background: var(--mm-surface-3) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

[ng-app="tpApp"] .progress-bar {
    background: linear-gradient(90deg, var(--mm-brand-500), var(--mm-accent)) !important;
    border-radius: var(--mm-radius-pill) !important;
}

/* Tooltips & popovers */
[ng-app="tpApp"] .tooltip-inner {
    border-radius: var(--mm-radius-sm);
    font-size: 12px;
    padding: 6px 10px;
}

[ng-app="tpApp"] .popover {
    border-radius: var(--mm-radius) !important;
    box-shadow: var(--mm-shadow-lg) !important;
    border-color: var(--mm-border) !important;
}

/* Font Awesome sizing consistency */
[ng-app="tpApp"] .fa-2x { font-size: 1.75em; }
[ng-app="tpApp"] .fa-lg  { font-size: 1.15em; }

[ng-app="tpApp"] .fa-question-circle {
    color: var(--mm-brand-400);
    transition: color var(--mm-transition), transform var(--mm-transition);
}

[ng-app="tpApp"] .fa-question-circle:hover {
    color: var(--mm-brand-600);
    transform: scale(1.08);
}

/* ==========================================================================
   Scrollbar (WebKit / modern browsers)
   ========================================================================== */

[ng-app="tpApp"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[ng-app="tpApp"] ::-webkit-scrollbar-track {
    background: var(--mm-surface-2);
}

[ng-app="tpApp"] ::-webkit-scrollbar-thumb {
    background: var(--mm-border-strong);
    border-radius: var(--mm-radius-pill);
}

[ng-app="tpApp"] ::-webkit-scrollbar-thumb:hover {
    background: var(--mm-text-muted);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Responsive polish — tablet & orientation (works with responsive-global.css)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991px) {
    [ng-app="tpApp"] .thirdMenu {
        border-radius: var(--mm-radius) !important;
    }

    [ng-app="tpApp"] .thirdMenu .navbar-nav > li > a:hover {
        background: var(--mm-brand-50) !important;
    }

    [ng-app="tpApp"] .dropdown-menu {
        max-height: 70vh;
        overflow-y: auto;
    }
}

@media (min-width: 768px) and (orientation: landscape) {
    [ng-app="tpApp"] .navbar.bgcolor,
    [ng-app="tpApp"] .navbar.bgColor {
        min-height: 52px;
    }

    [ng-app="tpApp"] .headHeight {
        min-height: 52px;
    }
}

.mm-bp-tablet [ng-app="tpApp"] [ui-view="body"] .panel-body {
    padding: 14px !important;
}

.mm-bp-compact [ng-app="tpApp"] .thirdMenu .navbar-collapse.in {
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}