/*
|--------------------------------------------------------------------------
| MoBiz Premium UI Authority Layer
|--------------------------------------------------------------------------
| Phase 1: Global Foundation
| Final task: MOBIZ GLOBAL ALL-PAGE PREMIUM UI LOCK
|
| Rule:
| This file is intentionally loaded LAST.
| Old CSS may remain temporarily, but it must not control the final look.
|--------------------------------------------------------------------------
*/

/* MOBIZ_PHASE_1_GLOBAL_PREMIUM_UI_AUTHORITY_START */

:root {
    --mobiz-bg: #f6f8fb;
    --mobiz-surface: #ffffff;
    --mobiz-surface-soft: #f8fafc;
    --mobiz-surface-muted: #f1f5f9;
    --mobiz-border: #e5e7eb;
    --mobiz-border-strong: #d1d5db;
    --mobiz-text: #0f172a;
    --mobiz-text-muted: #64748b;
    --mobiz-text-soft: #94a3b8;
    --mobiz-primary: #174ea6;
    --mobiz-primary-hover: #123f86;
    --mobiz-primary-soft: #eaf2ff;
    --mobiz-teal: #0f766e;
    --mobiz-danger: #b42318;
    --mobiz-warning: #b7791f;
    --mobiz-success: #047857;
    --mobiz-radius-sm: 8px;
    --mobiz-radius-md: 12px;
    --mobiz-radius-lg: 16px;
    --mobiz-radius-xl: 20px;
    --mobiz-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04);
    --mobiz-shadow-card: 0 12px 30px rgba(15, 23, 42, 0.06);
    --mobiz-sidebar-width: 260px;
    --mobiz-topbar-height: 64px;
}

html {
    background: var(--mobiz-bg);
    color: var(--mobiz-text);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body {
    background: var(--mobiz-bg) !important;
    color: var(--mobiz-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/*
|--------------------------------------------------------------------------
| Premium Layout Shell
|--------------------------------------------------------------------------
*/

body[data-mobiz-premium-ui="1"] {
    min-height: 100vh;
}

body[data-mobiz-premium-ui="1"] main {
    color: var(--mobiz-text);
}

body[data-mobiz-premium-ui="1"] .min-h-screen {
    background: var(--mobiz-bg);
}

body[data-mobiz-premium-ui="1"] .max-w-7xl,
body[data-mobiz-premium-ui="1"] .max-w-6xl,
body[data-mobiz-premium-ui="1"] .max-w-5xl {
    width: 100%;
}

/*
|--------------------------------------------------------------------------
| Sidebar Authority
|--------------------------------------------------------------------------
*/

body[data-mobiz-premium-ui="1"] aside,
body[data-mobiz-premium-ui="1"] [data-sidebar],
body[data-mobiz-premium-ui="1"] .sidebar,
body[data-mobiz-premium-ui="1"] .mobiz-sidebar {
    border-right: 1px solid var(--mobiz-border) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: none !important;
}

body[data-mobiz-premium-ui="1"] aside nav a,
body[data-mobiz-premium-ui="1"] aside nav button,
body[data-mobiz-premium-ui="1"] .sidebar a,
body[data-mobiz-premium-ui="1"] .sidebar button,
body[data-mobiz-premium-ui="1"] .mobiz-sidebar a,
body[data-mobiz-premium-ui="1"] .mobiz-sidebar button {
    border-radius: 12px !important;
    font-weight: 500;
    transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}

body[data-mobiz-premium-ui="1"] aside nav a:hover,
body[data-mobiz-premium-ui="1"] aside nav button:hover,
body[data-mobiz-premium-ui="1"] .sidebar a:hover,
body[data-mobiz-premium-ui="1"] .sidebar button:hover,
body[data-mobiz-premium-ui="1"] .mobiz-sidebar a:hover,
body[data-mobiz-premium-ui="1"] .mobiz-sidebar button:hover {
    background: var(--mobiz-primary-soft) !important;
    color: var(--mobiz-primary) !important;
}

/*
|--------------------------------------------------------------------------
| Topbar Authority
|--------------------------------------------------------------------------
*/

body[data-mobiz-premium-ui="1"] header,
body[data-mobiz-premium-ui="1"] [data-topbar],
body[data-mobiz-premium-ui="1"] .topbar,
body[data-mobiz-premium-ui="1"] .mobiz-topbar {
    border-bottom: 1px solid var(--mobiz-border) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(16px);
    box-shadow: none !important;
}

/*
|--------------------------------------------------------------------------
| Cards / Panels
|--------------------------------------------------------------------------
*/

body[data-mobiz-premium-ui="1"] .card,
body[data-mobiz-premium-ui="1"] .panel,
body[data-mobiz-premium-ui="1"] .mobiz-card,
body[data-mobiz-premium-ui="1"] .mobiz-panel,
body[data-mobiz-premium-ui="1"] .rounded-xl.bg-white,
body[data-mobiz-premium-ui="1"] .rounded-2xl.bg-white,
body[data-mobiz-premium-ui="1"] .rounded-3xl.bg-white {
    background: var(--mobiz-surface) !important;
    border: 1px solid var(--mobiz-border) !important;
    border-radius: var(--mobiz-radius-xl) !important;
    box-shadow: var(--mobiz-shadow-soft) !important;
}

body[data-mobiz-premium-ui="1"] .shadow,
body[data-mobiz-premium-ui="1"] .shadow-md,
body[data-mobiz-premium-ui="1"] .shadow-lg,
body[data-mobiz-premium-ui="1"] .shadow-xl,
body[data-mobiz-premium-ui="1"] .shadow-2xl {
    box-shadow: var(--mobiz-shadow-soft) !important;
}

/*
|--------------------------------------------------------------------------
| Typography
|--------------------------------------------------------------------------
*/

body[data-mobiz-premium-ui="1"] h1,
body[data-mobiz-premium-ui="1"] h2,
body[data-mobiz-premium-ui="1"] h3 {
    color: var(--mobiz-text);
    letter-spacing: -0.025em;
}

body[data-mobiz-premium-ui="1"] h1 {
    font-weight: 700;
}

body[data-mobiz-premium-ui="1"] h2,
body[data-mobiz-premium-ui="1"] h3 {
    font-weight: 650;
}

body[data-mobiz-premium-ui="1"] p,
body[data-mobiz-premium-ui="1"] .text-gray-500,
body[data-mobiz-premium-ui="1"] .text-gray-600,
body[data-mobiz-premium-ui="1"] .text-slate-500,
body[data-mobiz-premium-ui="1"] .text-slate-600 {
    color: var(--mobiz-text-muted);
}

/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

body[data-mobiz-premium-ui="1"] .btn,
body[data-mobiz-premium-ui="1"] button,
body[data-mobiz-premium-ui="1"] a[role="button"],
body[data-mobiz-premium-ui="1"] input[type="submit"] {
    border-radius: 12px;
}

body[data-mobiz-premium-ui="1"] .btn-primary,
body[data-mobiz-premium-ui="1"] .bg-blue-600,
body[data-mobiz-premium-ui="1"] .bg-indigo-600 {
    background: var(--mobiz-primary) !important;
    border-color: var(--mobiz-primary) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

body[data-mobiz-premium-ui="1"] .btn-primary:hover,
body[data-mobiz-premium-ui="1"] .bg-blue-600:hover,
body[data-mobiz-premium-ui="1"] .bg-indigo-600:hover {
    background: var(--mobiz-primary-hover) !important;
}

/*
|--------------------------------------------------------------------------
| Forms
|--------------------------------------------------------------------------
*/

body[data-mobiz-premium-ui="1"] input:not([type="checkbox"]):not([type="radio"]),
body[data-mobiz-premium-ui="1"] select,
body[data-mobiz-premium-ui="1"] textarea,
body[data-mobiz-premium-ui="1"] .form-control,
body[data-mobiz-premium-ui="1"] .form-select {
    border: 1px solid var(--mobiz-border-strong) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: var(--mobiz-text) !important;
    box-shadow: none !important;
}

body[data-mobiz-premium-ui="1"] input:focus,
body[data-mobiz-premium-ui="1"] select:focus,
body[data-mobiz-premium-ui="1"] textarea:focus {
    outline: 0 !important;
    border-color: var(--mobiz-primary) !important;
    box-shadow: 0 0 0 4px rgba(23, 78, 166, 0.12) !important;
}

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

body[data-mobiz-premium-ui="1"] table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

body[data-mobiz-premium-ui="1"] thead {
    background: var(--mobiz-surface-soft) !important;
}

body[data-mobiz-premium-ui="1"] th {
    color: #475569 !important;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .03em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--mobiz-border) !important;
}

body[data-mobiz-premium-ui="1"] td {
    color: var(--mobiz-text);
    border-bottom: 1px solid var(--mobiz-border) !important;
}

body[data-mobiz-premium-ui="1"] tr:hover td {
    background: #fbfdff;
}

/*
|--------------------------------------------------------------------------
| Badges / Status Pills
|--------------------------------------------------------------------------
*/

body[data-mobiz-premium-ui="1"] .badge,
body[data-mobiz-premium-ui="1"] .pill,
body[data-mobiz-premium-ui="1"] .status,
body[data-mobiz-premium-ui="1"] .rounded-full {
    border-radius: 999px;
}

/*
|--------------------------------------------------------------------------
| Mobile Drawer / Responsive Safety
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {
    body[data-mobiz-premium-ui="1"] {
        background: var(--mobiz-bg) !important;
    }

    body[data-mobiz-premium-ui="1"] main {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body[data-mobiz-premium-ui="1"] .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }

    body[data-mobiz-premium-ui="1"] table {
        min-width: 760px;
    }

    body[data-mobiz-premium-ui="1"] .card,
    body[data-mobiz-premium-ui="1"] .panel,
    body[data-mobiz-premium-ui="1"] .mobiz-card,
    body[data-mobiz-premium-ui="1"] .mobiz-panel {
        border-radius: 16px !important;
    }
}

/*
|--------------------------------------------------------------------------
| Print Safety
|--------------------------------------------------------------------------
*/

@media print {
    body[data-mobiz-premium-ui="1"] {
        background: #ffffff !important;
    }

    body[data-mobiz-premium-ui="1"] aside,
    body[data-mobiz-premium-ui="1"] header,
    body[data-mobiz-premium-ui="1"] nav {
        box-shadow: none !important;
    }
}


/*
|--------------------------------------------------------------------------
| Phase 1 Visual Smoke Repair
|--------------------------------------------------------------------------
| Fixes detected from first screenshot approval gate:
| - Auth pages looked like raw HTML.
| - Sidebar text was too faded to operate safely.
|--------------------------------------------------------------------------
*/

/* MOBIZ_PHASE_1_VISUAL_SMOKE_REPAIR_START */

/*
|--------------------------------------------------------------------------
| Auth / Login Shell
|--------------------------------------------------------------------------
*/

body[data-mobiz-auth-shell="1"] {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 56px 16px;
    background:
        radial-gradient(circle at top left, rgba(23, 78, 166, 0.08), transparent 34%),
        linear-gradient(180deg, #f8fafc 0%, #eef3f9 100%) !important;
    color: var(--mobiz-text);
    text-align: center;
}

body[data-mobiz-auth-shell="1"] > * {
    width: 100%;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}

body[data-mobiz-auth-shell="1"] h1,
body[data-mobiz-auth-shell="1"] h2,
body[data-mobiz-auth-shell="1"] .text-2xl,
body[data-mobiz-auth-shell="1"] .font-bold {
    font-size: 30px !important;
    line-height: 1.15 !important;
    font-weight: 750 !important;
    letter-spacing: -0.04em !important;
    color: var(--mobiz-text) !important;
    margin-bottom: 8px !important;
}

body[data-mobiz-auth-shell="1"] p,
body[data-mobiz-auth-shell="1"] .text-sm,
body[data-mobiz-auth-shell="1"] .text-gray-500,
body[data-mobiz-auth-shell="1"] .text-gray-600 {
    color: var(--mobiz-text-muted) !important;
}

body[data-mobiz-auth-shell="1"] form {
    width: 100%;
    max-width: 420px;
    margin: 22px auto 0 auto;
    padding: 28px;
    border: 1px solid var(--mobiz-border);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--mobiz-shadow-card);
    text-align: left;
}

body[data-mobiz-auth-shell="1"] label {
    display: block;
    margin-bottom: 7px;
    color: #334155 !important;
    font-size: 13px;
    font-weight: 650;
}

body[data-mobiz-auth-shell="1"] input:not([type="checkbox"]):not([type="radio"]) {
    width: 100% !important;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
}

body[data-mobiz-auth-shell="1"] input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin-right: 8px;
    vertical-align: middle;
}

body[data-mobiz-auth-shell="1"] button,
body[data-mobiz-auth-shell="1"] input[type="submit"] {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--mobiz-primary) !important;
    border-radius: 12px !important;
    background: var(--mobiz-primary) !important;
    color: #ffffff !important;
    font-weight: 700;
    cursor: pointer;
}

body[data-mobiz-auth-shell="1"] button:hover,
body[data-mobiz-auth-shell="1"] input[type="submit"]:hover {
    background: var(--mobiz-primary-hover) !important;
}

body[data-mobiz-auth-shell="1"] a {
    color: var(--mobiz-primary) !important;
    font-weight: 600;
    text-decoration: none;
}

body[data-mobiz-auth-shell="1"] a:hover {
    text-decoration: underline;
}

/* Public registration is locked, so do not advertise workspace creation on auth UI. */
body[data-mobiz-auth-shell="1"] a[href*="register"],
body[data-mobiz-auth-shell="1"] a[href*="business/register"],
body[data-mobiz-auth-shell="1"] a[href*="workspace"] {
    display: none !important;
}

/*
|--------------------------------------------------------------------------
| Sidebar Readability Repair
|--------------------------------------------------------------------------
*/

body[data-mobiz-premium-ui="1"] aside,
body[data-mobiz-premium-ui="1"] .sidebar,
body[data-mobiz-premium-ui="1"] .mobiz-sidebar {
    color: #475569 !important;
}

body[data-mobiz-premium-ui="1"] aside *,
body[data-mobiz-premium-ui="1"] .sidebar *,
body[data-mobiz-premium-ui="1"] .mobiz-sidebar * {
    opacity: 1 !important;
    filter: none !important;
}

body[data-mobiz-premium-ui="1"] aside a,
body[data-mobiz-premium-ui="1"] aside button,
body[data-mobiz-premium-ui="1"] .sidebar a,
body[data-mobiz-premium-ui="1"] .sidebar button,
body[data-mobiz-premium-ui="1"] .mobiz-sidebar a,
body[data-mobiz-premium-ui="1"] .mobiz-sidebar button {
    color: #475569 !important;
}

body[data-mobiz-premium-ui="1"] aside a:hover,
body[data-mobiz-premium-ui="1"] aside button:hover,
body[data-mobiz-premium-ui="1"] .sidebar a:hover,
body[data-mobiz-premium-ui="1"] .sidebar button:hover,
body[data-mobiz-premium-ui="1"] .mobiz-sidebar a:hover,
body[data-mobiz-premium-ui="1"] .mobiz-sidebar button:hover {
    background: var(--mobiz-primary-soft) !important;
    color: var(--mobiz-primary) !important;
}

body[data-mobiz-premium-ui="1"] aside .bg-blue-50,
body[data-mobiz-premium-ui="1"] aside .bg-cyan-50,
body[data-mobiz-premium-ui="1"] aside .active,
body[data-mobiz-premium-ui="1"] .sidebar .active,
body[data-mobiz-premium-ui="1"] .mobiz-sidebar .active {
    background: var(--mobiz-primary-soft) !important;
    color: var(--mobiz-primary) !important;
}

body[data-mobiz-premium-ui="1"] aside .text-xs,
body[data-mobiz-premium-ui="1"] aside .uppercase {
    color: #94a3b8 !important;
    font-weight: 750 !important;
    letter-spacing: .08em !important;
}

/* MOBIZ_PHASE_1_VISUAL_SMOKE_REPAIR_END */

/*
|--------------------------------------------------------------------------
| Phase 2 / Task 7 - Login Page Final Polish
|--------------------------------------------------------------------------
| Page: /login
|--------------------------------------------------------------------------
*/

/* MOBIZ_PHASE_2_TASK_7_LOGIN_FINAL_START */

body[data-mobiz-login-page-final="1"] {
    align-items: center;
    padding: 48px 18px;
}

.mobiz-login-page {
    width: min(100%, 480px);
    margin: 0 auto;
}

.mobiz-login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 22px;
    text-align: left;
}

.mobiz-login-mark {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(23, 78, 166, 0.16);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: var(--mobiz-shadow-soft);
    overflow: hidden;
}

.mobiz-login-mark img {
    width: 30px;
    height: 30px;
    display: block;
}

.mobiz-login-mark span {
    color: var(--mobiz-primary);
    font-weight: 800;
    letter-spacing: -0.04em;
}

.mobiz-login-eyebrow {
    margin: 0 0 3px 0 !important;
    color: var(--mobiz-primary) !important;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mobiz-login-brand h1 {
    margin: 0 !important;
    font-size: 32px !important;
    line-height: 1 !important;
}

.mobiz-login-subtitle {
    margin: 6px 0 0 0 !important;
    font-size: 15px;
}

.mobiz-login-card {
    width: 100%;
    border: 1px solid var(--mobiz-border);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--mobiz-shadow-card);
    overflow: hidden;
}

.mobiz-login-card-header {
    padding: 28px 30px 0 30px;
    text-align: left;
}

.mobiz-login-card-header h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 750;
    letter-spacing: -0.035em;
}

.mobiz-login-card-header p {
    margin: 7px 0 0 0 !important;
    font-size: 14px;
}

body[data-mobiz-auth-shell="1"] form.mobiz-login-form {
    margin: 0;
    max-width: none;
    padding: 24px 30px 30px 30px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.mobiz-form-field + .mobiz-form-field {
    margin-top: 16px;
}

.mobiz-login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}

.mobiz-checkbox-label {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    color: #334155 !important;
    cursor: pointer;
}

.mobiz-checkbox-label input {
    margin: 0 !important;
}

.mobiz-login-link {
    white-space: nowrap;
    font-size: 13px;
}

.mobiz-login-submit {
    width: 100%;
    margin-top: 22px;
    justify-content: center;
}

.mobiz-login-footnote {
    margin: 18px auto 0 auto !important;
    color: var(--mobiz-text-muted) !important;
    font-size: 13px;
    text-align: center;
}

.mobiz-auth-alert {
    margin: 0 0 16px 0;
    padding: 14px 16px;
    border-radius: 16px;
    font-size: 13px;
    text-align: left;
}

.mobiz-auth-alert ul {
    margin: 8px 0 0 18px;
    padding: 0;
}

.mobiz-auth-alert-success {
    border: 1px solid rgba(4, 120, 87, 0.22);
    background: rgba(236, 253, 245, 0.94);
    color: var(--mobiz-success);
}

.mobiz-auth-alert-danger {
    border: 1px solid rgba(180, 35, 24, 0.22);
    background: rgba(254, 242, 242, 0.94);
    color: var(--mobiz-danger);
}

@media (max-width: 520px) {
    body[data-mobiz-login-page-final="1"] {
        align-items: flex-start;
        padding-top: 32px;
    }

    .mobiz-login-brand {
        justify-content: flex-start;
    }

    .mobiz-login-card-header {
        padding: 24px 22px 0 22px;
    }

    body[data-mobiz-auth-shell="1"] form.mobiz-login-form {
        padding: 22px;
    }

    .mobiz-login-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}

/* MOBIZ_PHASE_2_TASK_7_LOGIN_FINAL_END */

/*
|--------------------------------------------------------------------------
| Phase 2 / Task 7 - Login Spacing Repair
|--------------------------------------------------------------------------
| Fixes first final screenshot gate:
| - Card internal spacing too tight.
| - Inputs visually touching card edges.
|--------------------------------------------------------------------------
*/

/* MOBIZ_PHASE_2_TASK_7_LOGIN_SPACING_REPAIR_START */

body[data-mobiz-login-page-final="1"],
body[data-mobiz-login-page-final="1"] *,
body[data-mobiz-login-page-final="1"] *::before,
body[data-mobiz-login-page-final="1"] *::after {
    box-sizing: border-box;
}

body[data-mobiz-login-page-final="1"] .mobiz-login-page {
    width: min(100%, 520px) !important;
}

body[data-mobiz-login-page-final="1"] .mobiz-login-card {
    border-radius: 28px !important;
}

body[data-mobiz-login-page-final="1"] .mobiz-login-card-header {
    padding: 32px 36px 0 36px !important;
}

body[data-mobiz-login-page-final="1"] .mobiz-login-card-header h2 {
    margin: 0 !important;
    font-size: 24px !important;
}

body[data-mobiz-auth-shell="1"][data-mobiz-login-page-final="1"] form.mobiz-login-form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 26px 36px 34px 36px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-mobiz-login-page-final="1"] .mobiz-form-field {
    width: 100%;
}

body[data-mobiz-login-page-final="1"] .mobiz-form-field label {
    margin-bottom: 8px !important;
}

body[data-mobiz-login-page-final="1"] .mobiz-form-field input:not([type="checkbox"]):not([type="radio"]) {
    width: 100% !important;
    min-height: 52px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
}

body[data-mobiz-login-page-final="1"] .mobiz-login-row {
    margin-top: 18px !important;
}

body[data-mobiz-login-page-final="1"] .mobiz-login-submit {
    width: 100% !important;
    min-height: 50px !important;
    margin-top: 24px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 14px !important;
}

@media (max-width: 520px) {
    body[data-mobiz-login-page-final="1"] .mobiz-login-card-header {
        padding: 26px 22px 0 22px !important;
    }

    body[data-mobiz-auth-shell="1"][data-mobiz-login-page-final="1"] form.mobiz-login-form {
        padding: 22px !important;
    }
}

/* MOBIZ_PHASE_2_TASK_7_LOGIN_SPACING_REPAIR_END */

/*
|--------------------------------------------------------------------------
| Phase 2 / Task 8 - Main Dashboard Final Polish
|--------------------------------------------------------------------------
| Page: /app
| Scope: Executive cockpit visual authority only.
| No fake values. No business logic mutation.
|--------------------------------------------------------------------------
*/

/* MOBIZ_PHASE_2_TASK_8_DASHBOARD_FINAL_START */

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] {
    display: grid;
    gap: 18px;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] * {
    box-sizing: border-box;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 132px;
    padding: 28px 30px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(23, 78, 166, 0.08), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: var(--mobiz-shadow-soft);
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
    color: var(--mobiz-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-hero h2 {
    margin: 0;
    color: var(--mobiz-text);
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.055em;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-hero p {
    max-width: 720px;
    margin: 10px 0 0 0;
    color: var(--mobiz-text-muted);
    font-size: 14px;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-date {
    min-width: 210px;
    padding: 16px 18px;
    border: 1px solid var(--mobiz-border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--mobiz-shadow-soft);
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-kpi {
    position: relative;
    min-height: 132px;
    padding: 18px;
    border: 1px solid var(--mobiz-border);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: var(--mobiz-shadow-soft);
    overflow: hidden;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-kpi::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, rgba(23, 78, 166, 0.88), rgba(15, 118, 110, 0.78));
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 12px;
    background: var(--mobiz-primary-soft);
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-kpi span:not(.mobiz-dashboard-mockup-icon) {
    color: var(--mobiz-text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-kpi strong {
    display: block;
    margin-top: 8px;
    color: var(--mobiz-text);
    font-size: 24px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.04em;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-kpi small {
    display: block;
    margin-top: 8px;
    color: var(--mobiz-text-muted);
    font-size: 12px;
    line-height: 1.35;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-card,
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-card {
    border: 1px solid var(--mobiz-border);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: var(--mobiz-shadow-soft);
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-revenue-jobs-chart],
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-financial-summary] {
    grid-column: 1 / -1;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-job-pipeline],
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-critical-stock],
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-workshop-intelligence],
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-recent-activity],
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-maintenance-reminders],
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-integrity-notes] {
    grid-column: span 4;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 18px 0 18px;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-card-header span {
    color: var(--mobiz-text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-card-header h3 {
    margin: 6px 0 0 0;
    color: var(--mobiz-text);
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -0.035em;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-real-chart-stage {
    min-height: 310px;
    padding: 10px 18px 20px 18px;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-card {
    padding: 18px;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-body {
    align-items: center;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-empty {
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f6ff 100%);
    color: var(--mobiz-text-muted);
}

@media (max-width: 1180px) {
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-job-pipeline],
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-critical-stock],
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-workshop-intelligence],
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-recent-activity],
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-maintenance-reminders],
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-integrity-notes] {
        grid-column: span 6;
    }
}

@media (max-width: 820px) {
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-hero {
        grid-template-columns: 1fr;
        padding: 22px;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-date {
        min-width: 0;
        width: 100%;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-kpis,
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-row {
        grid-template-columns: 1fr;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-job-pipeline],
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-critical-stock],
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-workshop-intelligence],
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-recent-activity],
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-maintenance-reminders],
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-integrity-notes] {
        grid-column: 1 / -1;
    }
}

/* MOBIZ_PHASE_2_TASK_8_DASHBOARD_FINAL_END */

/*
|--------------------------------------------------------------------------
| Phase 2 / Task 8 - Dashboard V3 Full Graph Layout
|--------------------------------------------------------------------------
| Approved visual target:
| - Hero full width
| - KPI strip below hero
| - Performance graph full width
| - Financial/data cards start only below graph
|--------------------------------------------------------------------------
*/

/* MOBIZ_PHASE_2_TASK_8_DASHBOARD_V3_FULL_GRAPH_START */

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 18px 24px 52px 24px !important;
    gap: 18px !important;
}

/* Approved hero */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-hero {
    width: 100% !important;
    min-height: 170px !important;
    padding: 32px 38px !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 78% 40%, rgba(20, 184, 166, 0.48), transparent 26%),
        radial-gradient(circle at 62% 22%, rgba(37, 99, 235, 0.38), transparent 34%),
        linear-gradient(135deg, #06122d 0%, #09265d 54%, #075ee8 100%) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16) !important;
}

/* KPI strip */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-kpis {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-kpi {
    min-height: 142px !important;
    padding: 20px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055) !important;
}

/* Main dashboard grid */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-grid {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

/* Non-negotiable: graph owns one entire row */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-revenue-jobs-chart] {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 330px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06) !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-real-chart-stage {
    min-height: 275px !important;
    padding: 12px 24px 22px 24px !important;
}

/* Financial summaries must start below graph, not beside it */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-financial-summary] {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-card {
    min-height: 190px !important;
    padding: 20px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.055) !important;
}

/* Lower cards: 4-card row after financial section */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-job-pipeline],
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-critical-stock],
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-workshop-intelligence],
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-recent-activity] {
    grid-column: span 3 !important;
    min-height: 220px !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-maintenance-reminders],
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-integrity-notes] {
    grid-column: span 6 !important;
    min-height: 220px !important;
}

/* Card rhythm */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-card,
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-card {
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-card {
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.055) !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-card-header {
    padding: 18px 20px 0 20px !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-list,
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-pipeline {
    padding: 14px 20px 20px 20px !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-empty {
    min-height: 120px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f6ff 100%) !important;
}

/* Responsive */
@media (max-width: 1180px) {
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-job-pipeline],
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-critical-stock],
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-workshop-intelligence],
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-recent-activity] {
        grid-column: span 6 !important;
    }
}

@media (max-width: 820px) {
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] {
        padding: 14px 14px 40px 14px !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-hero {
        padding: 24px !important;
        border-radius: 18px !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-kpis,
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-financial-summary] {
        grid-template-columns: 1fr !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-job-pipeline],
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-critical-stock],
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-workshop-intelligence],
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-recent-activity],
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-maintenance-reminders],
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-integrity-notes] {
        grid-column: 1 / -1 !important;
    }
}

/* MOBIZ_PHASE_2_TASK_8_DASHBOARD_V3_FULL_GRAPH_END */

/*
|--------------------------------------------------------------------------
| Phase 2 / Task 8 - Dashboard V4 Two-Column Lower Layout
|--------------------------------------------------------------------------
| Screenshot rejection reason:
| Four lower cards were too cramped.
| Approved rule: graph full width, lower operational cards use 2-column rhythm.
|--------------------------------------------------------------------------
*/

/* MOBIZ_PHASE_2_TASK_8_DASHBOARD_V4_TWO_COLUMN_LOWER_START */

/* Restore hero text contrast on dark banner */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-hero,
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-hero * {
    color: rgba(255, 255, 255, 0.92) !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-hero h2 {
    color: #ffffff !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-hero p {
    color: rgba(226, 232, 240, 0.90) !important;
}

/* Keep graph sacred: one full row */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-revenue-jobs-chart] {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

/* Financial section remains two clean columns below graph */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-financial-summary] {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

/* Main fix: lower operational cards are 2 columns, not 4 */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-job-pipeline],
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-critical-stock],
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-workshop-intelligence],
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-recent-activity],
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-maintenance-reminders],
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-integrity-notes] {
    grid-column: span 6 !important;
    min-height: 250px !important;
}

/* Give intelligence content breathing room */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-workshop-intelligence] {
    min-height: 270px !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-workshop-intelligence] .mobiz-dashboard-mockup-list-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px 12px !important;
    align-items: start !important;
}

/* Reduce awkward empty-card stretching */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-card {
    overflow: hidden !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-empty {
    min-height: 145px !important;
}

/* Tablet/mobile: single column */
@media (max-width: 980px) {
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-financial-summary] {
        grid-template-columns: 1fr !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-job-pipeline],
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-critical-stock],
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-workshop-intelligence],
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-recent-activity],
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-maintenance-reminders],
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-integrity-notes] {
        grid-column: 1 / -1 !important;
    }
}

/* MOBIZ_PHASE_2_TASK_8_DASHBOARD_V4_TWO_COLUMN_LOWER_END */

/*
|--------------------------------------------------------------------------
| Phase 2 / Task 8 - Dashboard V5 Aging Card Layout
|--------------------------------------------------------------------------
| Approved correction:
| - Aging header must sit above aging list.
| - Donut stays left.
| - Header/list area fills the remaining card width.
|--------------------------------------------------------------------------
*/

/* MOBIZ_PHASE_2_TASK_8_DASHBOARD_V5_AGING_CARD_LAYOUT_START */

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-card {
    display: grid !important;
    grid-template-columns: 132px minmax(0, 1fr) !important;
    grid-template-areas:
        "donut header"
        "donut list" !important;
    column-gap: 24px !important;
    row-gap: 12px !important;
    align-items: center !important;
    min-height: 210px !important;
    padding: 24px !important;
}

/* Header becomes the top-right block above the list */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-header {
    grid-area: header !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: start !important;
    margin: 0 !important;
    padding: 0 0 12px 0 !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
}

/* Flatten body so donut and list can occupy the card grid directly */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-body {
    display: contents !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-donut {
    grid-area: donut !important;
    width: 112px !important;
    height: 112px !important;
    justify-self: center !important;
    align-self: center !important;
}

/* List fills the full right-side width below header */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list {
    grid-area: list !important;
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    gap: 8px !important;
    align-self: stretch !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list > div {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list strong {
    text-align: right !important;
    white-space: nowrap !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-clear {
    width: 100% !important;
    margin: 6px 0 0 0 !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    text-align: center !important;
}

/* Mobile/tablet: stack cleanly */
@media (max-width: 760px) {
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-card {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "header"
            "donut"
            "list" !important;
        row-gap: 18px !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-donut {
        justify-self: start !important;
    }
}

/* MOBIZ_PHASE_2_TASK_8_DASHBOARD_V5_AGING_CARD_LAYOUT_END */

/*
|--------------------------------------------------------------------------
| Phase 2 / Task 8 - Dashboard V6 Aging Donut Scale
|--------------------------------------------------------------------------
| Approved correction:
| - Aging card left donut column increased from 132px to 180px.
| - Donut fills the left visual area more confidently.
|--------------------------------------------------------------------------
*/

/* MOBIZ_PHASE_2_TASK_8_DASHBOARD_V6_AGING_DONUT_SCALE_START */

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-card {
    grid-template-columns: 180px minmax(0, 1fr) !important;
    column-gap: 28px !important;
    min-height: 230px !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-donut {
    width: 156px !important;
    height: 156px !important;
    justify-self: center !important;
    align-self: center !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-donut::after {
    inset: 34px !important;
}

/* Keep the right-side content strong and full width */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-header,
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list {
    width: 100% !important;
    min-width: 0 !important;
}

/* Mobile still stacks cleanly */
@media (max-width: 760px) {
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-card {
        grid-template-columns: 1fr !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-donut {
        width: 132px !important;
        height: 132px !important;
        justify-self: start !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-donut::after {
        inset: 30px !important;
    }
}

/* MOBIZ_PHASE_2_TASK_8_DASHBOARD_V6_AGING_DONUT_SCALE_END */

/*
|--------------------------------------------------------------------------
| Phase 2 / Task 8 - Dashboard V7 Donut Fill Space
|--------------------------------------------------------------------------
| Screenshot rejection reason:
| Aging donut became a vertical pill and did not fill its space.
| Approved correction:
| Donut must be a true circle and occupy the visual area confidently.
|--------------------------------------------------------------------------
*/

/* MOBIZ_PHASE_2_TASK_8_DASHBOARD_V7_DONUT_FILL_SPACE_START */

/* Desktop/tablet financial card structure */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-card {
    grid-template-columns: 180px minmax(0, 1fr) !important;
    column-gap: 30px !important;
    align-items: stretch !important;
}

/* Donut owns the full left zone */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-donut {
    grid-area: donut !important;
    display: block !important;
    width: 180px !important;
    height: 180px !important;
    aspect-ratio: 1 / 1 !important;
    max-width: 100% !important;
    border-radius: 9999px !important;
    justify-self: center !important;
    align-self: center !important;
    position: relative !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
}

/* Force the donut hole to be circular, not a vertical slit */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-donut::after {
    content: "" !important;
    position: absolute !important;
    inset: 42px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.85) !important;
}

/* Right side fills remaining card width */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-header,
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list {
    width: 100% !important;
    min-width: 0 !important;
}

/* Mobile: donut should still fill space, but not become ridiculous */
@media (max-width: 760px) {
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-card {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "header"
            "donut"
            "list" !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-donut {
        width: min(100%, 260px) !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        justify-self: center !important;
        align-self: center !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-donut::after {
        inset: 30% !important;
        border-radius: 9999px !important;
    }
}

/* MOBIZ_PHASE_2_TASK_8_DASHBOARD_V7_DONUT_FILL_SPACE_END */

/*
|--------------------------------------------------------------------------
| Phase 2 / Task 8 - Dashboard V8 Visual Proportion Repair
|--------------------------------------------------------------------------
| Screenshot rejection reason:
| Structure is correct, but premium finishing is still undercooked.
| Fixes:
| - Hero snapshot readability
| - KPI card confidence
| - Financial card hierarchy
| - Chart card intentionality
| - System notes softening
|--------------------------------------------------------------------------
*/

/* MOBIZ_PHASE_2_TASK_8_DASHBOARD_V8_VISUAL_PROPORTION_START */

/*
|--------------------------------------------------------------------------
| Overall canvas
|--------------------------------------------------------------------------
*/

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] {
    width: 100% !important;
    max-width: 1440px !important;
    padding: 20px 26px 56px 26px !important;
    gap: 18px !important;
}

/*
|--------------------------------------------------------------------------
| Hero: make it look intentional, not dim
|--------------------------------------------------------------------------
*/

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-hero {
    min-height: 176px !important;
    padding: 34px 40px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    background:
        radial-gradient(circle at 80% 42%, rgba(20, 184, 166, 0.55), transparent 25%),
        radial-gradient(circle at 64% 18%, rgba(59, 130, 246, 0.42), transparent 34%),
        linear-gradient(135deg, #06122d 0%, #09265d 54%, #075ee8 100%) !important;
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.18) !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-hero h2 {
    color: #ffffff !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
    font-size: clamp(30px, 3.4vw, 46px) !important;
    line-height: 1 !important;
    letter-spacing: -0.065em !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-hero p {
    color: rgba(226, 232, 240, 0.92) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-kicker {
    color: #a7f3d0 !important;
    font-size: 11px !important;
    letter-spacing: .14em !important;
}

/* Snapshot card must be readable, not disabled-looking */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-date {
    min-width: 230px !important;
    padding: 18px 20px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18) !important;
    backdrop-filter: blur(18px);
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-date,
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-date * {
    color: #0f172a !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-date span,
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-date small {
    color: #64748b !important;
}

/*
|--------------------------------------------------------------------------
| KPI cards: more confidence, less default-card smell
|--------------------------------------------------------------------------
*/

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-kpis {
    gap: 16px !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-kpi {
    min-height: 150px !important;
    padding: 22px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(248,251,255,1) 100%) !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.065) !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-icon {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 16px !important;
    border-radius: 16px !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65) !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-kpi span:not(.mobiz-dashboard-mockup-icon) {
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: .095em !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-kpi strong {
    margin-top: 10px !important;
    color: #020617 !important;
    font-size: 27px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    letter-spacing: -0.055em !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-kpi small {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
}

/*
|--------------------------------------------------------------------------
| Chart card: full-width, intentional, not empty and timid
|--------------------------------------------------------------------------
*/

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-revenue-jobs-chart] {
    min-height: 348px !important;
    border-radius: 24px !important;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.065) !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-revenue-jobs-chart] .mobiz-dashboard-mockup-card-header {
    padding: 22px 26px 0 26px !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-revenue-jobs-chart] .mobiz-dashboard-mockup-card-header h3 {
    font-size: 21px !important;
    font-weight: 850 !important;
    letter-spacing: -0.045em !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-real-chart-legend {
    padding-left: 26px !important;
    gap: 22px !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-real-chart-stage {
    min-height: 285px !important;
    padding: 10px 26px 22px 26px !important;
}

/*
|--------------------------------------------------------------------------
| Financial cards: donut strong, right side equally meaningful
|--------------------------------------------------------------------------
*/

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-card {
    min-height: 235px !important;
    padding: 24px !important;
    border-radius: 24px !important;
    grid-template-columns: 190px minmax(0, 1fr) !important;
    column-gap: 30px !important;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.06) !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-donut {
    width: 174px !important;
    height: 174px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 9999px !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-donut::after {
    inset: 42px !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-header {
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.95) !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-header h3 {
    margin: 0 0 6px 0 !important;
    color: #020617 !important;
    font-size: 20px !important;
    font-weight: 850 !important;
    letter-spacing: -0.045em !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-header span,
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-header small {
    color: #64748b !important;
    font-weight: 650 !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-header strong {
    color: #020617 !important;
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    letter-spacing: -0.055em !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list {
    gap: 9px !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list > div {
    min-height: 34px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(226, 232, 240, 0.92) !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list strong {
    color: #020617 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-clear {
    min-height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(16, 185, 129, 0.18) !important;
    background: rgba(236, 253, 245, 0.92) !important;
    color: #047857 !important;
    font-weight: 750 !important;
}

/*
|--------------------------------------------------------------------------
| Lower cards: soft premium, not stretched placeholders
|--------------------------------------------------------------------------
*/

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-card {
    border-radius: 24px !important;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.055) !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-card-header {
    padding: 22px 24px 0 24px !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-card-header h3 {
    color: #020617 !important;
    font-size: 20px !important;
    font-weight: 850 !important;
    letter-spacing: -0.045em !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-list,
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-pipeline {
    padding: 16px 24px 24px 24px !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-empty {
    min-height: 142px !important;
    border-radius: 18px !important;
}

/*
|--------------------------------------------------------------------------
| System notes: make it assurance, not legal fine print
|--------------------------------------------------------------------------
*/

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-integrity-notes] {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-integrity-notes] ul {
    margin-top: 14px !important;
    padding-left: 18px !important;
    color: #475569 !important;
    line-height: 1.55 !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-integrity-notes] li {
    margin-bottom: 8px !important;
}

/*
|--------------------------------------------------------------------------
| Responsive guardrails
|--------------------------------------------------------------------------
*/

@media (max-width: 980px) {
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-card {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "header"
            "donut"
            "list" !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-donut {
        width: min(100%, 240px) !important;
        height: auto !important;
        justify-self: center !important;
    }
}

/* MOBIZ_PHASE_2_TASK_8_DASHBOARD_V8_VISUAL_PROPORTION_END */

/*
|--------------------------------------------------------------------------
| Phase 2 / Task 8 - Dashboard V9 Slim Typography
|--------------------------------------------------------------------------
| Screenshot rejection reason:
| Typography looked too bold and wanted to pop out of the screen.
| Approved correction:
| Clean, slim, minimalist SaaS typography. No aggressive font weight.
|--------------------------------------------------------------------------
*/

/* MOBIZ_PHASE_2_TASK_8_DASHBOARD_V9_SLIM_TYPOGRAPHY_START */

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final],
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] * {
    text-shadow: none !important;
}

/* Page header outside dashboard */
body[data-mobiz-premium-ui="1"] h1,
body[data-mobiz-premium-ui="1"] .page-title {
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
}

/* Hero typography: confident but not loud */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-hero h2 {
    font-weight: 620 !important;
    font-size: clamp(28px, 3vw, 40px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.04em !important;
    text-shadow: none !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-hero p {
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-kicker,
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-card-header span,
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-kpi span:not(.mobiz-dashboard-mockup-icon),
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-header span {
    font-weight: 560 !important;
    letter-spacing: .075em !important;
}

/* KPI numbers should be readable, not billboard-bold */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-kpi strong {
    font-weight: 620 !important;
    font-size: 25px !important;
    letter-spacing: -0.035em !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-kpi small {
    font-weight: 400 !important;
    color: #64748b !important;
}

/* Card titles: slim executive style */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-card-header h3,
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-revenue-jobs-chart] .mobiz-dashboard-mockup-card-header h3,
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-header h3 {
    font-weight: 600 !important;
    font-size: 18px !important;
    letter-spacing: -0.025em !important;
}

/* Financial numbers: clear but calmer */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-header strong {
    font-weight: 620 !important;
    font-size: 25px !important;
    letter-spacing: -0.035em !important;
}

/* Aging list: clean table-like readability */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list span,
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list strong {
    font-weight: 500 !important;
    letter-spacing: -0.005em !important;
}

/* Pipeline/list/status rows: reduce shouting */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-list-row span,
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-list-row strong,
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-list-row small,
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-pipeline span,
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-pipeline strong {
    font-weight: 450 !important;
    letter-spacing: 0 !important;
}

/* Status badges can be slightly stronger, not chunky */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-mockup-signal-badge {
    font-weight: 600 !important;
}

/* System notes: calm assurance text */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-integrity-notes],
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-integrity-notes] * {
    font-weight: 400 !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] [data-mobiz-dashboard-integrity-notes] h3 {
    font-weight: 600 !important;
}

/* Topbar/dashboard shell text should not become bold accidentally */
body[data-mobiz-premium-ui="1"] header,
body[data-mobiz-premium-ui="1"] header * {
    font-weight: 450 !important;
}

body[data-mobiz-premium-ui="1"] header strong,
body[data-mobiz-premium-ui="1"] header .font-semibold {
    font-weight: 560 !important;
}

/* MOBIZ_PHASE_2_TASK_8_DASHBOARD_V9_SLIM_TYPOGRAPHY_END */

/*
|--------------------------------------------------------------------------
| Phase 2 / Task 8 - Dashboard V10 Aging Clear Under Donut
|--------------------------------------------------------------------------
| Approved correction:
| - Clear status bar belongs under the donut.
| - Aging header and aging bucket list stay on the right.
|--------------------------------------------------------------------------
*/

/* MOBIZ_PHASE_2_TASK_8_DASHBOARD_V10_AGING_CLEAR_UNDER_DONUT_START */

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 190px minmax(0, 1fr) !important;
    grid-template-areas:
        "donut header"
        "clear list" !important;
    column-gap: 30px !important;
    row-gap: 14px !important;
    align-items: start !important;
    min-height: 260px !important;
}

/* Keep flattened body so donut/list can obey the card grid */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-body {
    display: contents !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-header {
    grid-area: header !important;
    align-self: start !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-donut {
    grid-area: donut !important;
    width: 174px !important;
    height: 174px !important;
    justify-self: center !important;
    align-self: start !important;
}

/*
| Make the list container dissolve so its children can be placed:
| - bucket rows stay in the right column
| - clear status moves to the left column under donut
*/
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list {
    display: contents !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list > div {
    grid-column: 2 !important;
    width: 100% !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-clear {
    grid-area: clear !important;
    width: 100% !important;
    max-width: 190px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    justify-self: center !important;
    align-self: start !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px !important;
    text-align: center !important;
    line-height: 1.25 !important;
}

/* Mobile: stack header, donut, status, list */
@media (max-width: 980px) {
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-card {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "header"
            "donut"
            "clear"
            "list" !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list > div {
        grid-column: 1 !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-clear {
        max-width: none !important;
        width: 100% !important;
    }
}

/* MOBIZ_PHASE_2_TASK_8_DASHBOARD_V10_AGING_CLEAR_UNDER_DONUT_END */

/*
|--------------------------------------------------------------------------
| Phase 2 / Task 8 - Dashboard V11 Aging Clear Bottom Anchor
|--------------------------------------------------------------------------
| Approved correction:
| - Donut owns the left visual frame.
| - Clear status sits at the bottom of the left column.
| - Clear status must not push the donut upward or steal donut space.
|--------------------------------------------------------------------------
*/

/* MOBIZ_PHASE_2_TASK_8_DASHBOARD_V11_AGING_CLEAR_BOTTOM_START */

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 210px minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas:
        "donut header"
        "donut list" !important;
    column-gap: 30px !important;
    row-gap: 14px !important;
    min-height: 265px !important;
    padding: 24px !important;
    align-items: stretch !important;
}

/* Body stays flattened so internal pieces can be placed directly */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-body {
    display: contents !important;
}

/* Header/list stay on the right */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-header {
    grid-area: header !important;
    align-self: start !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list {
    display: grid !important;
    grid-area: list !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 9px !important;
    align-self: stretch !important;
}

/* Bucket rows remain inside the right-side list */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list > div {
    width: 100% !important;
}

/*
| Donut frame:
| - Donut spans the full left side.
| - It is centered in its own visual frame.
| - Extra bottom padding reserves space for the clear status,
|   but does not let the clear status push the donut.
*/
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-donut {
    grid-area: donut !important;
    width: 172px !important;
    height: 172px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 9999px !important;
    justify-self: center !important;
    align-self: center !important;
    transform: translateY(-12px) !important;
    position: relative !important;
    z-index: 1 !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-donut::after {
    inset: 42px !important;
    border-radius: 9999px !important;
}

/*
| Clear status:
| - Visually belongs under the donut.
| - Anchored to bottom-left of card.
| - Does not participate in donut sizing.
*/
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-clear {
    position: absolute !important;
    left: 24px !important;
    bottom: 24px !important;
    width: 210px !important;
    max-width: 210px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px !important;
    text-align: center !important;
    line-height: 1.25 !important;
    z-index: 2 !important;
}

/* Prevent list display from treating clear as a right-column row */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list .mobiz-dashboard-aging-clear {
    grid-column: auto !important;
}

/* Mobile: no absolute positioning; stack naturally */
@media (max-width: 980px) {
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-card {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
        grid-template-areas:
            "header"
            "donut"
            "list" !important;
        min-height: auto !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-donut {
        width: min(100%, 230px) !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        justify-self: center !important;
        transform: none !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-clear {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        margin-top: 8px !important;
    }
}

/* MOBIZ_PHASE_2_TASK_8_DASHBOARD_V11_AGING_CLEAR_BOTTOM_END */

/*
|--------------------------------------------------------------------------
| Phase 2 / Task 8 - Dashboard V12 Aging List Left Align
|--------------------------------------------------------------------------
| Approved correction:
| - Aging list rows align left inside the right content column.
| - Earlier grid-column: 2 rules must not push rows into a fake column.
|--------------------------------------------------------------------------
*/

/* MOBIZ_PHASE_2_TASK_8_DASHBOARD_V12_AGING_LIST_LEFT_ALIGN_START */

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list {
    grid-area: list !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
    align-items: start !important;
    justify-self: start !important;
    align-self: start !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    gap: 9px !important;
}

/* Kill earlier forced grid-column: 2 behavior */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list > div {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Keep bucket labels left and money right inside each full-width row */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list > div:not(.mobiz-dashboard-aging-clear) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list span {
    justify-self: start !important;
    text-align: left !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list strong {
    justify-self: end !important;
    text-align: right !important;
}

/* Clear status remains bottom-left under donut, not part of the right list flow */
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list .mobiz-dashboard-aging-clear,
body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-clear {
    position: absolute !important;
    left: 24px !important;
    bottom: 24px !important;
    width: 210px !important;
    max-width: 210px !important;
    grid-column: auto !important;
    justify-self: center !important;
}

/* Mobile: return clear status to normal flow */
@media (max-width: 980px) {
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list .mobiz-dashboard-aging-clear,
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-clear {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        margin-top: 8px !important;
    }
}

/* MOBIZ_PHASE_2_TASK_8_DASHBOARD_V12_AGING_LIST_LEFT_ALIGN_END */

/*
|--------------------------------------------------------------------------
| Phase 2 / Task 8 - Dashboard V13 Mobile Aging Clear Order
|--------------------------------------------------------------------------
| Screenshot rejection reason:
| On mobile, the clear message appeared between aging bucket rows.
| Cause:
| Desktop absolute positioning hid the real DOM order.
| Mobile static positioning exposed it.
| Approved correction:
| Clear message sits directly under donut, then bucket rows follow.
|--------------------------------------------------------------------------
*/

/* MOBIZ_PHASE_2_TASK_8_DASHBOARD_V13_MOBILE_AGING_CLEAR_ORDER_START */

@media (max-width: 980px) {
    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "header"
            "donut"
            "list" !important;
        row-gap: 16px !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-donut {
        grid-area: donut !important;
        width: min(100%, 240px) !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        justify-self: center !important;
        align-self: center !important;
        transform: none !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list {
        grid-area: list !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-list > div:not(.mobiz-dashboard-aging-clear) {
        order: 20 !important;
        width: 100% !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-dashboard-page-final] .mobiz-dashboard-aging-clear {
        position: static !important;
        order: 1 !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        margin: 0 0 4px 0 !important;
        padding: 10px 14px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 14px !important;
        text-align: center !important;
    }
}

/* MOBIZ_PHASE_2_TASK_8_DASHBOARD_V13_MOBILE_AGING_CLEAR_ORDER_END */

/*
|--------------------------------------------------------------------------
| Phase 2 / Task 9 - Customer Listing Final Polish
|--------------------------------------------------------------------------
| Page: /app/customers
| Rule: clean, slim, minimalist customer directory. No loud fonts.
|--------------------------------------------------------------------------
*/

/* MOBIZ_PHASE_2_TASK_9_CUSTOMER_LISTING_FINAL_START */

body[data-mobiz-premium-ui="1"] [data-mobiz-customers-page-final] {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 22px 44px 22px;
    display: grid;
    gap: 18px;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-customers-page-final],
body[data-mobiz-premium-ui="1"] [data-mobiz-customers-page-final] * {
    box-sizing: border-box;
    text-shadow: none !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 26px 28px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(23, 78, 166, 0.08), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045);
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-eyebrow {
    margin: 0 0 7px 0;
    color: #64748b !important;
    font-size: 11px;
    font-weight: 560;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-hero h1 {
    margin: 0;
    color: #0f172a;
    font-size: 30px;
    line-height: 1.08;
    font-weight: 560;
    letter-spacing: -0.035em;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-hero p:not(.mobiz-customers-eyebrow) {
    max-width: 720px;
    margin: 9px 0 0 0;
    color: #64748b !important;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 400;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-primary-action {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 1px solid #174ea6;
    border-radius: 13px;
    background: #174ea6;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 520;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-primary-action:hover {
    background: #123f86;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-alert {
    padding: 13px 15px;
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: 16px;
    background: rgba(236, 253, 245, 0.92);
    color: #047857;
    font-size: 14px;
    font-weight: 450;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-card {
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.95);
    width: 100%;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.052);
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 24px 16px 24px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-card-header h2 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 560;
    letter-spacing: -0.025em;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-count {
    margin: 0;
    padding: 7px 11px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 999px;
    background: #f8fafc;
    color: #64748b !important;
    font-size: 12px;
    font-weight: 450;
    white-space: nowrap;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-table-scroll {
    width: 100%;
    overflow-x: auto;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-table {
    width: 100%;
    min-width: 860px;
    border-collapse: separate;
    border-spacing: 0;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-table thead {
    background: #fbfdff !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-table th {
    padding: 13px 18px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.95) !important;
    color: #64748b !important;
    font-size: 11px;
    font-weight: 560;
    letter-spacing: .07em;
    text-align: left;
    text-transform: uppercase;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-table td {
    padding: 15px 18px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.78) !important;
    color: #475569;
    font-size: 14px;
    font-weight: 400;
    vertical-align: middle;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-table tbody tr:hover td {
    background: #fbfdff;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-name span {
    color: #0f172a;
    font-weight: 520;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid rgba(16, 185, 129, 0.18);
    border-radius: 999px;
    background: rgba(236, 253, 245, 0.92);
    color: #047857;
    font-size: 12px;
    font-weight: 500;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-table-action {
    text-align: right !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-row-action {
    color: #174ea6 !important;
    font-size: 13px;
    font-weight: 520;
    text-decoration: none;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-row-action:hover {
    text-decoration: underline;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-empty {
    min-height: 220px;
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 36px 20px;
    text-align: center;
    border-radius: 18px;
    background:
        radial-gradient(circle at center, rgba(23, 78, 166, 0.06), transparent 34%),
        linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-empty h3 {
    margin: 0;
    color: #0f172a;
    font-size: 19px;
    font-weight: 560;
    letter-spacing: -0.02em;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-empty p {
    max-width: 420px;
    margin: 0;
    color: #64748b !important;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-empty a {
    margin-top: 8px;
    color: #174ea6 !important;
    font-size: 14px;
    font-weight: 520;
    text-decoration: none;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-empty a:hover {
    text-decoration: underline;
}

body[data-mobiz-premium-ui="1"] .mobiz-customers-pagination {
    padding: 16px 24px 20px 24px;
    border-top: 1px solid rgba(226, 232, 240, 0.85);
}

@media (max-width: 820px) {
    body[data-mobiz-premium-ui="1"] [data-mobiz-customers-page-final] {
        padding: 14px 14px 36px 14px;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-customers-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 22px;
        border-radius: 20px;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-customers-primary-action {
        width: 100%;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-customers-card-header {
        flex-direction: column;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-customers-count {
        width: fit-content;
    }
}

/* MOBIZ_PHASE_2_TASK_9_CUSTOMER_LISTING_FINAL_END */

/*
|--------------------------------------------------------------------------
| Phase 2 / Task 10 - Customer Form V2 Visual Repair
|--------------------------------------------------------------------------
| Screenshot rejection reason:
| - Form passed tests but looked too narrow and too normal-admin.
| - Must match the approved MoBiz customer listing page family.
| - Keep clean, slim, minimalist typography.
|--------------------------------------------------------------------------
*/

/* MOBIZ_PHASE_2_TASK_10_CUSTOMER_FORM_V2_VISUAL_REPAIR_START */

body[data-mobiz-premium-ui="1"] [data-mobiz-customer-form-final] {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 18px 22px 52px 22px !important;
    display: grid !important;
    gap: 18px !important;
}

/* Make Task 10 belong to same family as the approved customer listing page */
body[data-mobiz-premium-ui="1"] .mobiz-customer-form-hero {
    min-height: 122px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 20px !important;
    padding: 28px 30px !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at top right, rgba(23, 78, 166, 0.08), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045) !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-hero h1 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 30px !important;
    line-height: 1.08 !important;
    font-weight: 560 !important;
    letter-spacing: -0.035em !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-hero p:not(.mobiz-customer-form-eyebrow) {
    max-width: 720px !important;
    margin-top: 9px !important;
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
}

/* Main form card must feel like a premium workspace, not a small floating admin box */
body[data-mobiz-premium-ui="1"] .mobiz-customer-form-card {
    overflow: hidden !important;
    width: 100% !important;
    max-width: none !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.052) !important;
}

/* Stronger but still slim card header */
body[data-mobiz-premium-ui="1"] .mobiz-customer-form-card-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 24px 28px 18px 28px !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.055), transparent 26%),
        #ffffff !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-card-header h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 21px !important;
    line-height: 1.15 !important;
    font-weight: 560 !important;
    letter-spacing: -0.025em !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-card-header p:not(.mobiz-customer-form-eyebrow) {
    max-width: 720px !important;
    margin-top: 8px !important;
    color: #64748b !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-eyebrow {
    margin: 0 0 7px 0 !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 560 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

/* Wider, cleaner form grid */
body[data-mobiz-premium-ui="1"] .mobiz-customer-form-grid {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 18px 20px !important;
    padding: 26px 28px 28px 28px !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-field {
    grid-column: span 6 !important;
    display: grid !important;
    gap: 8px !important;
    min-width: 0 !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-field-wide {
    grid-column: 1 / -1 !important;
}

/* Make labels readable but not shouty */
body[data-mobiz-premium-ui="1"] .mobiz-customer-form-field label {
    color: #334155 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 520 !important;
    letter-spacing: .01em !important;
}

/* Premium form control feel */
body[data-mobiz-premium-ui="1"] .mobiz-customer-form-control {
    width: 100% !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(203, 213, 225, 0.92) !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.018) !important;
    outline: none !important;
}

body[data-mobiz-premium-ui="1"] select.mobiz-customer-form-control {
    appearance: auto !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-textarea {
    min-height: 132px !important;
    padding: 13px 14px !important;
    resize: vertical !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-control:focus {
    border-color: rgba(23, 78, 166, 0.55) !important;
    box-shadow:
        0 0 0 4px rgba(23, 78, 166, 0.08),
        inset 0 1px 0 rgba(15, 23, 42, 0.018) !important;
}

/* Cleaner status and error states */
body[data-mobiz-premium-ui="1"] .mobiz-customer-form-status-pill {
    min-height: 30px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(16, 185, 129, 0.18) !important;
    border-radius: 999px !important;
    background: rgba(236, 253, 245, 0.92) !important;
    color: #047857 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-alert {
    margin: 22px 28px 0 28px !important;
    padding: 13px 15px !important;
    border: 1px solid rgba(239, 68, 68, 0.20) !important;
    border-radius: 16px !important;
    background: rgba(254, 242, 242, 0.92) !important;
    color: #b91c1c !important;
    font-size: 14px !important;
    font-weight: 450 !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-error {
    margin: 0 !important;
    color: #b91c1c !important;
    font-size: 12px !important;
    font-weight: 450 !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-control.is-invalid {
    border-color: rgba(239, 68, 68, 0.55) !important;
    background: #fffafa !important;
}

/* Actions should feel aligned with the card footer */
body[data-mobiz-premium-ui="1"] .mobiz-customer-form-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    padding: 18px 28px 24px 28px !important;
    border-top: 1px solid rgba(226, 232, 240, 0.85) !important;
    background: #fbfdff !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-secondary-action,
body[data-mobiz-premium-ui="1"] .mobiz-customer-form-cancel,
body[data-mobiz-premium-ui="1"] .mobiz-customer-form-primary-action {
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    border-radius: 13px !important;
    font-size: 13.5px !important;
    font-weight: 520 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-secondary-action,
body[data-mobiz-premium-ui="1"] .mobiz-customer-form-cancel {
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    background: #ffffff !important;
    color: #334155 !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-primary-action {
    border: 1px solid #174ea6 !important;
    background: #174ea6 !important;
    color: #ffffff !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-primary-action:hover {
    background: #123f86 !important;
}

@media (max-width: 820px) {
    body[data-mobiz-premium-ui="1"] [data-mobiz-customer-form-final] {
        padding: 14px 14px 40px 14px !important;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-customer-form-hero {
        min-height: auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 22px !important;
        border-radius: 20px !important;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-customer-form-secondary-action {
        width: 100% !important;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-customer-form-card-header {
        flex-direction: column !important;
        padding: 22px !important;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-customer-form-grid {
        grid-template-columns: 1fr !important;
        padding: 22px !important;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-customer-form-field,
    body[data-mobiz-premium-ui="1"] .mobiz-customer-form-field-wide {
        grid-column: 1 / -1 !important;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-customer-form-actions {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
        padding: 18px 22px 22px 22px !important;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-customer-form-cancel,
    body[data-mobiz-premium-ui="1"] .mobiz-customer-form-primary-action {
        width: 100% !important;
    }
}

/* MOBIZ_PHASE_2_TASK_10_CUSTOMER_FORM_V2_VISUAL_REPAIR_END */

/*
|--------------------------------------------------------------------------
| Task 11 - Layer 7 Print / Document Global DNA
|--------------------------------------------------------------------------
| Inherits the older Design06 printable document contract.
| This is visual-only. It must not mutate invoice, receipt, payment, POS,
| quotation, statement, tax, stock, accounting, tenant, or route truth.
|--------------------------------------------------------------------------
*/

/* MOBIZ_TASK_11_LAYER_7_PRINT_DOCUMENT_GLOBAL_DNA_START */

body[data-mobiz-premium-ui="1"] [data-mobiz-layer7-print-document],
body[data-mobiz-premium-ui="1"] [data-mobiz-layer7-print-document] * {
    box-sizing: border-box;
    text-shadow: none !important;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-layer7-print-document] {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 18px 22px 52px 22px;
    display: grid;
    gap: 16px;
    color: #0f172a;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-document-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-primary-action,
body[data-mobiz-premium-ui="1"] .mobiz-layer7-secondary-action {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border-radius: 13px;
    font-size: 13.5px;
    font-weight: 520;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
    cursor: pointer;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-primary-action {
    border: 1px solid #174ea6;
    background: #174ea6;
    color: #ffffff !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-secondary-action {
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: #ffffff;
    color: #334155 !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-document-card {
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.95);
    width: 100%;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.052);
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-document-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.88);
    background:
        radial-gradient(circle at top right, rgba(23, 78, 166, 0.08), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-brand {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-eyebrow {
    margin: 0 0 7px 0;
    color: #64748b !important;
    font-size: 11px;
    font-weight: 560;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-document-header h1,
body[data-mobiz-premium-ui="1"] .mobiz-layer7-document-header .mobiz-print-document-title {
    margin: 0;
    color: #0f172a;
    font-size: 28px;
    line-height: 1.08;
    font-weight: 560;
    letter-spacing: -0.035em;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-subtitle {
    margin: 7px 0 0 0;
    color: #64748b !important;
    font-size: 13.5px;
    line-height: 1.45;
    font-weight: 400;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-document-meta {
    min-width: 170px;
    padding: 12px 14px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 18px;
    background: #ffffff;
    text-align: right;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-document-meta span {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 520;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-document-meta strong {
    display: block;
    margin-top: 5px;
    color: #0f172a;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.025em;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-facts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 24px 28px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.78);
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-fact {
    min-height: 74px;
    padding: 14px 16px;
    border: 1px solid rgba(226, 232, 240, 0.86);
    margin: -1px 0 0 -1px;
    background: #ffffff;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-fact-wide {
    grid-column: 1 / -1;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-fact span {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 520;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-fact strong {
    display: block;
    margin-top: 6px;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-table-section,
body[data-mobiz-premium-ui="1"] .mobiz-layer7-payment-section {
    padding: 24px 28px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.78);
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-table,
body[data-mobiz-premium-ui="1"] .mobiz-layer7-table.mobiz-print-table {
    width: 100%;
    border-collapse: collapse;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-table th {
    padding: 12px 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.95);
    color: #64748b;
    font-size: 11px;
    font-weight: 560;
    letter-spacing: .07em;
    text-align: left;
    text-transform: uppercase;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-table td {
    padding: 12px 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.78);
    color: #334155;
    font-size: 13.5px;
    font-weight: 400;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-number {
    text-align: right !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-total-box {
    max-width: 420px;
    margin: 24px 28px 0 auto;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 18px;
    background: #fbfdff;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.78);
    color: #475569;
    font-size: 13.5px;
    font-weight: 400;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-total-row:last-child {
    border-bottom: 0;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-total-row strong {
    color: #0f172a;
    font-weight: 600;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-payment-section h2,
body[data-mobiz-premium-ui="1"] .mobiz-layer7-note h2 {
    margin: 0 0 10px 0;
    color: #0f172a;
    font-size: 15px;
    font-weight: 560;
    letter-spacing: -0.01em;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-payment-list {
    display: grid;
    gap: 8px;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-payment-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #475569;
    font-size: 13.5px;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-payment-list strong {
    color: #0f172a;
    font-weight: 560;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-note,
body[data-mobiz-premium-ui="1"] .mobiz-layer7-truth-note {
    margin: 24px 28px 0 28px;
    padding: 14px 16px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    background: #fbfdff;
    color: #475569;
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 400;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-truth-note {
    border-color: rgba(245, 158, 11, 0.24);
    background: rgba(255, 251, 235, 0.88);
    color: #92400e;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-document-footer {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 24px;
    padding: 16px 28px 24px 28px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 400;
}

body[data-mobiz-premium-ui="1"] .mobiz-layer7-status-alert {
    padding: 13px 15px;
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: 16px;
    background: rgba(236, 253, 245, 0.92);
    color: #047857;
    font-size: 14px;
    font-weight: 450;
}

@media (max-width: 820px) {
    body[data-mobiz-premium-ui="1"] [data-mobiz-layer7-print-document] {
        padding: 14px 14px 40px 14px;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-layer7-document-toolbar,
    body[data-mobiz-premium-ui="1"] .mobiz-layer7-document-header,
    body[data-mobiz-premium-ui="1"] .mobiz-layer7-document-footer {
        flex-direction: column;
        align-items: stretch;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-layer7-primary-action,
    body[data-mobiz-premium-ui="1"] .mobiz-layer7-secondary-action {
        width: 100%;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-layer7-document-meta {
        text-align: left;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-layer7-facts-grid {
        grid-template-columns: 1fr;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-layer7-total-box {
        max-width: none;
        margin: 24px 28px 0 28px;
    }
}

@media print {
    @page {
        size: A4;
        margin: 12mm;
    }

    body[data-mobiz-premium-ui="1"] {
        background: #ffffff !important;
        color: #111827 !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-app-sidebar],
    body[data-mobiz-premium-ui="1"] [data-mobiz-mobile-menu-button],
    body[data-mobiz-premium-ui="1"] [data-mobiz-mobile-sidebar-backdrop],
    body[data-mobiz-premium-ui="1"] [data-mobiz-previous-page-link],
    body[data-mobiz-premium-ui="1"] .mobiz-no-print {
        display: none !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-layer7-print-document] {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        background: #ffffff !important;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-layer7-document-card {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-layer7-document-header {
        padding: 0 0 16px 0 !important;
        background: #ffffff !important;
        break-inside: avoid;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-layer7-facts-grid,
    body[data-mobiz-premium-ui="1"] .mobiz-layer7-table-section,
    body[data-mobiz-premium-ui="1"] .mobiz-layer7-payment-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
        break-inside: avoid;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-layer7-note,
    body[data-mobiz-premium-ui="1"] .mobiz-layer7-truth-note,
    body[data-mobiz-premium-ui="1"] .mobiz-layer7-total-box {
        margin-left: 0 !important;
        margin-right: 0 !important;
        break-inside: avoid;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-layer7-document-footer {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* MOBIZ_TASK_11_LAYER_7_PRINT_DOCUMENT_GLOBAL_DNA_END */
/* MOBIZ_PHASE_1_GLOBAL_PREMIUM_UI_AUTHORITY_END */

/* MOBIZ_PHASE_2_TASK_10_CUSTOMER_FORM_FINAL_START */
body[data-mobiz-premium-ui="1"] [data-mobiz-customer-form-final],
body[data-mobiz-premium-ui="1"] [data-mobiz-customer-form-final] * {
    box-sizing: border-box;
}

body[data-mobiz-premium-ui="1"] [data-mobiz-customer-form-final] {
    width: min(100%, 980px);
    margin: 0 auto;
    display: grid;
    gap: 22px;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-hero,
body[data-mobiz-premium-ui="1"] .mobiz-customer-form-card {
    border: 1px solid rgba(203, 213, 225, 0.78);
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.055), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
    border-radius: 24px;
    box-shadow: 0 20px 54px rgba(15, 23, 42, 0.055);
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-hero {
    padding: 28px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-eyebrow {
    margin: 0 0 8px;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-hero h1,
body[data-mobiz-premium-ui="1"] .mobiz-customer-form-card-header h2 {
    margin: 0;
    color: #020617;
    font-weight: 760;
    letter-spacing: -0.045em;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-hero h1 {
    font-size: clamp(1.85rem, 4vw, 2.35rem);
    line-height: 1.05;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-card-header h2 {
    font-size: 1.35rem;
    line-height: 1.15;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-hero p:not(.mobiz-customer-form-eyebrow),
body[data-mobiz-premium-ui="1"] .mobiz-customer-form-card-header p:not(.mobiz-customer-form-eyebrow) {
    max-width: 640px;
    margin: 12px 0 0;
    color: #475569;
    font-size: 0.96rem;
    line-height: 1.65;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-secondary-action,
body[data-mobiz-premium-ui="1"] .mobiz-customer-form-primary-action {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 0.92rem;
    font-weight: 750;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    white-space: nowrap;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-secondary-action {
    padding: 0 18px;
    border: 1px solid rgba(203, 213, 225, 0.85);
    background: rgba(255, 255, 255, 0.86);
    color: #334155;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-primary-action {
    padding: 0 22px;
    border: 1px solid rgba(29, 78, 216, 0.9);
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(29, 78, 216, 0.18);
    cursor: pointer;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-secondary-action:hover,
body[data-mobiz-premium-ui="1"] .mobiz-customer-form-primary-action:hover {
    transform: translateY(-1px);
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-card {
    padding: 0;
    overflow: hidden;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-card-header {
    padding: 26px 30px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.95);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(16, 185, 129, 0.22);
    background: rgba(236, 253, 245, 0.88);
    color: #047857;
    font-size: 0.82rem;
    font-weight: 800;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-alert {
    margin: 24px 30px 0;
    border: 1px solid rgba(248, 113, 113, 0.28);
    background: rgba(254, 242, 242, 0.88);
    color: #991b1b;
    border-radius: 16px;
    padding: 13px 15px;
    font-size: 0.9rem;
    font-weight: 700;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-grid {
    padding: 28px 30px 8px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 22px;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-field {
    display: grid;
    gap: 8px;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-field-wide {
    grid-column: 1 / -1;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-field label {
    color: #334155;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-control {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(203, 213, 225, 0.95);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    color: #0f172a;
    font-size: 0.95rem;
    line-height: 1.4;
    padding: 11px 13px;
    outline: none;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-control:focus {
    border-color: rgba(37, 99, 235, 0.72);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.095);
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-control.is-invalid {
    border-color: rgba(220, 38, 38, 0.72);
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.075);
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-textarea {
    min-height: 116px;
    resize: vertical;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-error {
    margin: 0;
    color: #dc2626;
    font-size: 0.82rem;
    font-weight: 650;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-actions {
    padding: 22px 30px 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

body[data-mobiz-premium-ui="1"] .mobiz-customer-form-cancel {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    color: #475569;
    font-size: 0.92rem;
    font-weight: 750;
    text-decoration: none;
}

@media (max-width: 760px) {
    body[data-mobiz-premium-ui="1"] [data-mobiz-customer-form-final] {
        gap: 20px;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-customer-form-hero,
    body[data-mobiz-premium-ui="1"] .mobiz-customer-form-card-header {
        padding: 24px;
        display: grid;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-customer-form-secondary-action,
    body[data-mobiz-premium-ui="1"] .mobiz-customer-form-primary-action {
        width: 100%;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-customer-form-grid {
        padding: 24px 24px 6px;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-customer-form-alert {
        margin: 22px 24px 0;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-customer-form-actions {
        padding: 22px 24px 26px;
        display: grid;
        justify-content: stretch;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-customer-form-cancel {
        justify-content: center;
        order: 2;
    }
}
/* MOBIZ_PHASE_2_TASK_10_CUSTOMER_FORM_FINAL_END */

/*
|--------------------------------------------------------------------------
| Task 12 - Layer 6 Report / Analytics Global DNA
|--------------------------------------------------------------------------
| Scope: dashboard, reports, balances, KPI cards, filter bars, chart cards,
| report tables. No workflow/detail/form/listing/admin scope.
|--------------------------------------------------------------------------
*/

/* MOBIZ_TASK_12_LAYER_6_REPORT_ANALYTICS_GLOBAL_DNA_START */

body[data-mobiz-premium-ui="1"] .mobiz-report-page {
    width: min(100%, 1180px) !important;
    margin: 0 auto !important;
    padding: 18px 22px 44px !important;
    display: grid !important;
    gap: 18px !important;
    box-sizing: border-box !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-report-page *,
body[data-mobiz-premium-ui="1"] [data-mobiz-layer6-report-analytics] * {
    box-sizing: border-box !important;
    text-shadow: none !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-report-page .mobiz-report-hero,
body[data-mobiz-premium-ui="1"] [data-mobiz-layer6-report-analytics] .mobiz-report-hero {
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 34rem),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    color: #0f172a !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.045) !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-report-hero-content {
    padding: 26px 28px !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-report-page .mobiz-report-eyebrow,
body[data-mobiz-premium-ui="1"] .mobiz-report-page .mobiz-report-kicker {
    margin: 0 0 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 560 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-report-page .mobiz-report-title {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: clamp(28px, 3vw, 36px) !important;
    line-height: 1.08 !important;
    font-weight: 560 !important;
    letter-spacing: -0.035em !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-report-page .mobiz-report-subtitle {
    max-width: 760px !important;
    margin: 9px 0 0 !important;
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 1.58 !important;
    font-weight: 400 !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-report-card,
body[data-mobiz-premium-ui="1"] .mobiz-report-table-card,
body[data-mobiz-premium-ui="1"] .mobiz-report-summary-card,
body[data-mobiz-premium-ui="1"] .mobiz-report-kpi-card {
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.045) !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-report-card,
body[data-mobiz-premium-ui="1"] .mobiz-report-table-card {
    padding: 22px 24px !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-report-section-title {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
    font-weight: 560 !important;
    letter-spacing: -0.025em !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-report-section-subtitle {
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-report-summary-grid,
body[data-mobiz-premium-ui="1"] .mobiz-report-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-report-summary-card,
body[data-mobiz-premium-ui="1"] .mobiz-report-kpi-card {
    min-height: 112px !important;
    padding: 18px !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-report-metric-label {
    margin: 0 !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 560 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-report-metric-value {
    margin: 9px 0 0 !important;
    color: #0f172a !important;
    font-size: clamp(21px, 2vw, 28px) !important;
    line-height: 1.08 !important;
    font-weight: 600 !important;
    letter-spacing: -0.035em !important;
    overflow-wrap: anywhere !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-report-filter-form {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: end !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-report-filter-form input,
body[data-mobiz-premium-ui="1"] .mobiz-report-filter-form select {
    min-height: 44px !important;
    border-radius: 13px !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-report-table-scroll,
body[data-mobiz-premium-ui="1"] .mobiz-report-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-report-table {
    min-width: 860px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-report-table th {
    padding: 13px 16px !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 560 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    background: #fbfdff !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-report-table td {
    padding: 15px 16px !important;
    color: #475569 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-report-table-number {
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
}

body[data-mobiz-premium-ui="1"] .mobiz-report-notice {
    padding: 14px 16px !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 18px !important;
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

@media (max-width: 980px) {
    body[data-mobiz-premium-ui="1"] .mobiz-report-page {
        padding: 14px 14px 36px !important;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-report-summary-grid,
    body[data-mobiz-premium-ui="1"] .mobiz-report-kpi-grid,
    body[data-mobiz-premium-ui="1"] .mobiz-report-filter-form {
        grid-template-columns: 1fr !important;
    }
}

/* MOBIZ_TASK_12_LAYER_6_REPORT_ANALYTICS_GLOBAL_DNA_END */

/*
|--------------------------------------------------------------------------
| Task 12 - Layer 6 Mobile Overflow Repair
|--------------------------------------------------------------------------
| Scope: report / analytics mobile only. Prevent horizontal overflow on
| report hero, KPI cards, report overview cards, filter bars, and tables.
|--------------------------------------------------------------------------
*/

/* MOBIZ_TASK_12_LAYER_6_MOBILE_OVERFLOW_REPAIR_START */

@media (max-width: 760px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-report-page,
    body[data-mobiz-premium-ui="1"] [data-mobiz-layer6-report-analytics],
    body[data-mobiz-premium-ui="1"] [data-mobiz-layer6-report-analytics].mobiz-report-page {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 16px 14px 36px !important;
        display: grid !important;
        gap: 14px !important;
        overflow-x: hidden !important;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-report-page *,
    body[data-mobiz-premium-ui="1"] [data-mobiz-layer6-report-analytics] * {
        max-width: 100%;
        min-width: 0 !important;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-report-hero,
    body[data-mobiz-premium-ui="1"] .mobiz-report-card,
    body[data-mobiz-premium-ui="1"] .mobiz-report-table-card,
    body[data-mobiz-premium-ui="1"] .mobiz-report-summary-card,
    body[data-mobiz-premium-ui="1"] .mobiz-report-kpi-card,
    body[data-mobiz-premium-ui="1"] [data-mobiz-layer6-report-analytics] .mobiz-report-hero,
    body[data-mobiz-premium-ui="1"] [data-mobiz-layer6-report-analytics] .mobiz-report-card,
    body[data-mobiz-premium-ui="1"] [data-mobiz-layer6-report-analytics] .mobiz-report-table-card,
    body[data-mobiz-premium-ui="1"] [data-mobiz-layer6-report-analytics] .mobiz-report-summary-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-radius: 22px !important;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-report-hero-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 22px 20px !important;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-report-title {
        max-width: 100% !important;
        font-size: clamp(28px, 9vw, 38px) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.045em !important;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-report-subtitle {
        max-width: 100% !important;
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-report-summary-grid,
    body[data-mobiz-premium-ui="1"] .mobiz-report-kpi-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-report-summary-card,
    body[data-mobiz-premium-ui="1"] .mobiz-report-kpi-card {
        min-height: 132px !important;
        padding: 22px 20px !important;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-report-card,
    body[data-mobiz-premium-ui="1"] .mobiz-report-table-card {
        padding: 20px !important;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-report-card-header,
    body[data-mobiz-premium-ui="1"] .mobiz-report-table-header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        align-items: start !important;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-report-section-title {
        font-size: 24px !important;
        line-height: 1.15 !important;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-report-section-subtitle {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-report-filter-form {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-report-filter-form input,
    body[data-mobiz-premium-ui="1"] .mobiz-report-filter-form select,
    body[data-mobiz-premium-ui="1"] .mobiz-report-filter-form button {
        width: 100% !important;
        max-width: 100% !important;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-report-table-scroll,
    body[data-mobiz-premium-ui="1"] .mobiz-report-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-report-table {
        width: max-content !important;
        min-width: 720px !important;
    }

    body[data-mobiz-premium-ui="1"] .mobiz-report-table th,
    body[data-mobiz-premium-ui="1"] .mobiz-report-table td {
        white-space: nowrap !important;
    }
}

/* MOBIZ_TASK_12_LAYER_6_MOBILE_OVERFLOW_REPAIR_END */

/*
|--------------------------------------------------------------------------
| MoBiz Job Card Mobile Width Repair
|--------------------------------------------------------------------------
| Narrow emergency repair only. Prevent job card detail/workflow cards from
| overflowing mobile viewport. Do not restyle reports/forms/listings.
|--------------------------------------------------------------------------
*/

/* MOBIZ_JOB_CARD_MOBILE_WIDTH_REPAIR_START */

@media (max-width: 760px) {
    body[data-mobiz-premium-ui="1"] [data-mobiz-job-card-page],
    body[data-mobiz-premium-ui="1"] [data-mobiz-job-card-show-page],
    body[data-mobiz-premium-ui="1"] [data-mobiz-job-card-detail-page],
    body[data-mobiz-premium-ui="1"] .mobiz-job-card-page,
    body[data-mobiz-premium-ui="1"] .mobiz-job-card-show-page,
    body[data-mobiz-premium-ui="1"] .mobiz-job-card-detail-page {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 16px 14px 36px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-job-card-page] *,
    body[data-mobiz-premium-ui="1"] [data-mobiz-job-card-show-page] *,
    body[data-mobiz-premium-ui="1"] [data-mobiz-job-card-detail-page] *,
    body[data-mobiz-premium-ui="1"] .mobiz-job-card-page *,
    body[data-mobiz-premium-ui="1"] .mobiz-job-card-show-page *,
    body[data-mobiz-premium-ui="1"] .mobiz-job-card-detail-page * {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
        text-shadow: none !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-job-card-page] section,
    body[data-mobiz-premium-ui="1"] [data-mobiz-job-card-show-page] section,
    body[data-mobiz-premium-ui="1"] [data-mobiz-job-card-detail-page] section,
    body[data-mobiz-premium-ui="1"] .mobiz-job-card-page section,
    body[data-mobiz-premium-ui="1"] .mobiz-job-card-show-page section,
    body[data-mobiz-premium-ui="1"] .mobiz-job-card-detail-page section,
    body[data-mobiz-premium-ui="1"] [data-mobiz-job-card-page] article,
    body[data-mobiz-premium-ui="1"] [data-mobiz-job-card-show-page] article,
    body[data-mobiz-premium-ui="1"] [data-mobiz-job-card-detail-page] article {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-radius: 22px !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-job-card-page] table,
    body[data-mobiz-premium-ui="1"] [data-mobiz-job-card-show-page] table,
    body[data-mobiz-premium-ui="1"] [data-mobiz-job-card-detail-page] table {
        width: max-content !important;
        min-width: 720px !important;
    }

    body[data-mobiz-premium-ui="1"] [data-mobiz-job-card-page] .overflow-x-auto,
    body[data-mobiz-premium-ui="1"] [data-mobiz-job-card-show-page] .overflow-x-auto,
    body[data-mobiz-premium-ui="1"] [data-mobiz-job-card-detail-page] .overflow-x-auto {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* MOBIZ_JOB_CARD_MOBILE_WIDTH_REPAIR_END */

/*
|--------------------------------------------------------------------------
| Task 13 - Layer 5 Stock Workflow / Transaction DNA
|--------------------------------------------------------------------------
| Scope: stocktake, stock adjustment approval, opening stock, stock disposal,
| and stock transfer workflow surfaces only.
| Boundary: visual-only CSS. No stock, invoice, payment, POS, purchase, COGS,
| valuation, tenant, route, permission, or accounting mutation.
|--------------------------------------------------------------------------
*/

/* MOBIZ_TASK_13_LAYER_5_STOCK_WORKFLOW_DNA_START */

.mobiz-layer5-stock-workflow {
    width: min(100%, 1220px);
    margin-inline: auto;
    min-width: 0;
}

.mobiz-layer5-stock-workflow :is(.rounded-xl, .rounded-2xl, .bg-white) {
    border-color: rgba(203, 213, 225, 0.82);
    border-radius: 22px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.055);
}

.mobiz-layer5-stock-workflow :is(h1, h2, h3) {
    color: #0f172a;
    font-weight: 560;
    letter-spacing: -0.025em;
}

.mobiz-layer5-stock-workflow :is(p, span, td, th, label, input, select, textarea, button, a) {
    min-width: 0;
}

.mobiz-layer5-stock-workflow :is(table) {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
}

.mobiz-layer5-stock-workflow :is(th) {
    background: rgba(248, 250, 252, 0.96);
    color: #475569;
    font-size: 11px;
    font-weight: 560;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.mobiz-layer5-stock-workflow :is(td) {
    color: #334155;
    font-size: 13px;
    vertical-align: middle;
}

.mobiz-layer5-stock-workflow :is(input, select, textarea, .mobiz-control) {
    border-color: #cbd5e1;
    border-radius: 13px;
    min-height: 42px;
    font-size: 13px;
}

.mobiz-layer5-stock-workflow :is(input:focus, select:focus, textarea:focus, .mobiz-control:focus) {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.10);
    outline: none;
}

.mobiz-layer5-stock-workflow :is(form) {
    min-width: 0;
}

.mobiz-layer5-stock-workflow :is(button, .mobiz-primary-link, .mobiz-btn, a[class*="rounded"]) {
    border-radius: 13px;
    font-weight: 540;
}

.mobiz-layer5-stock-workflow :is(.overflow-x-auto, .overflow-hidden) {
    max-width: 100%;
}

@media (max-width: 760px) {
    .mobiz-layer5-stock-workflow {
        width: 100%;
        max-width: 100%;
        padding-inline: 0;
        overflow-x: hidden;
    }

    .mobiz-layer5-stock-workflow :is(.rounded-xl, .rounded-2xl, .bg-white) {
        border-radius: 18px;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
    }

    .mobiz-layer5-stock-workflow :is(.overflow-x-auto, .overflow-hidden) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobiz-layer5-stock-workflow :is(table) {
        min-width: 680px;
    }

    .mobiz-layer5-stock-workflow :is(form.flex, .flex.items-center, .flex.justify-end) {
        flex-wrap: wrap;
    }

    .mobiz-layer5-stock-workflow :is(button, .mobiz-primary-link, .mobiz-btn) {
        min-height: 42px;
    }
}

/* MOBIZ_TASK_13_LAYER_5_STOCK_WORKFLOW_DNA_END */

/* MOBIZ_TASK_14C1_LAYER_4_DETAIL_SHOW_LITE_DNA_START */
.mobiz-layer4-detail-show-lite {
    max-width: 1180px;
    margin-inline: auto;
}

.mobiz-layer4-detail-show-lite > :first-child:is(.flex, .mobiz-page-header) {
    gap: 1rem;
    align-items: flex-start;
}

.mobiz-layer4-detail-show-lite :is(h1, h2, h3) {
    color: #0f172a;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.mobiz-layer4-detail-show-lite h1 {
    font-size: clamp(1.35rem, 2vw, 1.85rem);
}

.mobiz-layer4-detail-show-lite :is(.rounded-xl, .rounded-2xl, .mobiz-card, .mobiz-detail-card) {
    border-color: rgba(226, 232, 240, 0.95);
    border-radius: 20px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.045);
}

.mobiz-layer4-detail-show-lite :is(.overflow-x-auto, .mobiz-table-wrap) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mobiz-layer4-detail-show-lite table {
    width: 100%;
}

@media (max-width: 760px) {
    .mobiz-layer4-detail-show-lite {
        width: 100%;
        max-width: 100%;
    }

    .mobiz-layer4-detail-show-lite > :first-child:is(.flex, .mobiz-page-header) {
        flex-direction: column;
        align-items: stretch;
    }

    .mobiz-layer4-detail-show-lite > :first-child:is(.flex, .mobiz-page-header) > :last-child {
        width: 100%;
    }

    .mobiz-layer4-detail-show-lite > :first-child:is(.flex, .mobiz-page-header) :is(a, button) {
        justify-content: center;
        width: 100%;
    }
}
/* MOBIZ_TASK_14C1_LAYER_4_DETAIL_SHOW_LITE_DNA_END */

/* MOBIZ_TASK_14C2_LAYER_4_SALES_SHOW_LITE_DNA_START */
.mobiz-layer4-sales-show-lite {
    max-width: 1180px;
    margin-inline: auto;
}

.mobiz-layer4-sales-show-lite > :first-child:is(.mobiz-page-header, .flex) {
    gap: 1rem;
    align-items: flex-start;
}

.mobiz-layer4-sales-show-lite :is(h1, h2, h3) {
    color: #0f172a;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.mobiz-layer4-sales-show-lite h1 {
    font-size: clamp(1.35rem, 2vw, 1.85rem);
}

.mobiz-layer4-sales-show-lite :is(.mobiz-card, .mobiz-detail-card, .rounded-xl, .rounded-2xl) {
    border-color: rgba(226, 232, 240, 0.95);
    border-radius: 20px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.045);
}

.mobiz-layer4-sales-show-lite :is(.mobiz-table-wrap, .overflow-x-auto, .overflow-hidden) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mobiz-layer4-sales-show-lite table {
    width: 100%;
}

@media (max-width: 760px) {
    .mobiz-layer4-sales-show-lite {
        width: 100%;
        max-width: 100%;
    }

    .mobiz-layer4-sales-show-lite > :first-child:is(.mobiz-page-header, .flex) {
        flex-direction: column;
        align-items: stretch;
    }

    .mobiz-layer4-sales-show-lite > :first-child:is(.mobiz-page-header, .flex) > :last-child {
        width: 100%;
    }

    .mobiz-layer4-sales-show-lite > :first-child:is(.mobiz-page-header, .flex) :is(a, button) {
        justify-content: center;
        width: 100%;
    }
}
/* MOBIZ_TASK_14C2_LAYER_4_SALES_SHOW_LITE_DNA_END */

/* MOBIZ_TASK_14C3_LAYER_4_EXPENSE_SUPPLIER_SHOW_LITE_DNA_START */
.mobiz-layer4-expense-supplier-show-lite {
    max-width: 1180px;
    margin-inline: auto;
}

.mobiz-layer4-expense-supplier-show-lite > :first-child:is(.flex, .mobiz-page-header) {
    gap: 1rem;
    align-items: flex-start;
}

.mobiz-layer4-expense-supplier-show-lite :is(h1, h2, h3) {
    color: #0f172a;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.mobiz-layer4-expense-supplier-show-lite h1 {
    font-size: clamp(1.35rem, 2vw, 1.85rem);
}

.mobiz-layer4-expense-supplier-show-lite :is(.mobiz-card, .mobiz-detail-card, .rounded-xl, .rounded-2xl) {
    border-color: rgba(226, 232, 240, 0.95);
    border-radius: 20px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.045);
}

.mobiz-layer4-expense-supplier-show-lite :is(.overflow-x-auto, .mobiz-table-wrap) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mobiz-layer4-expense-supplier-show-lite table {
    width: 100%;
}

@media (max-width: 760px) {
    .mobiz-layer4-expense-supplier-show-lite {
        width: 100%;
        max-width: 100%;
    }

    .mobiz-layer4-expense-supplier-show-lite > :first-child:is(.flex, .mobiz-page-header) {
        flex-direction: column;
        align-items: stretch;
    }

    .mobiz-layer4-expense-supplier-show-lite > :first-child:is(.flex, .mobiz-page-header) > :last-child {
        width: 100%;
    }

    .mobiz-layer4-expense-supplier-show-lite > :first-child:is(.flex, .mobiz-page-header) :is(a, button) {
        justify-content: center;
        width: 100%;
    }
}
/* MOBIZ_TASK_14C3_LAYER_4_EXPENSE_SUPPLIER_SHOW_LITE_DNA_END */

/* MOBIZ_TASK_15A1_LAYER_3_PANEL_EDIT_LITE_DNA_START */
.mobiz-layer3-panel-edit-lite {
    max-width: 1180px;
    margin-inline: auto;
}

.mobiz-layer3-panel-edit-lite.mobiz-panel {
    border-color: rgba(226, 232, 240, 0.95);
    border-radius: 22px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.045);
}

.mobiz-layer3-panel-edit-lite :is(h1, h2, h3) {
    color: #0f172a;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.mobiz-layer3-panel-edit-lite .mobiz-form {
    margin-top: 1.25rem;
}

.mobiz-layer3-panel-edit-lite .mobiz-form-grid {
    gap: 1rem;
}

.mobiz-layer3-panel-edit-lite .mobiz-field label {
    color: #334155;
    font-size: 0.8rem;
    font-weight: 560;
}

.mobiz-layer3-panel-edit-lite :is(input, select, textarea) {
    border-radius: 14px;
}

.mobiz-layer3-panel-edit-lite .mobiz-form-actions {
    gap: 0.75rem;
    align-items: center;
}

@media (max-width: 760px) {
    .mobiz-layer3-panel-edit-lite {
        width: 100%;
        max-width: 100%;
    }

    .mobiz-layer3-panel-edit-lite.mobiz-panel {
        border-radius: 20px;
    }

    .mobiz-layer3-panel-edit-lite .mobiz-form-actions {
        align-items: stretch;
    }

    .mobiz-layer3-panel-edit-lite .mobiz-form-actions :is(a, button) {
        justify-content: center;
        width: 100%;
    }
}
/* MOBIZ_TASK_15A1_LAYER_3_PANEL_EDIT_LITE_DNA_END */

/* MOBIZ_TASK_15A2_LAYER_3_SIMPLE_FORM_CARD_EDIT_LITE_DNA_START */
.mobiz-layer3-simple-form-card-edit-lite {
    border-color: rgba(226, 232, 240, 0.95) !important;
    border-radius: 22px !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.045);
}

.mobiz-layer3-simple-form-card-edit-lite :is(label, .mobiz-form-label) {
    color: #334155;
    font-size: 0.8rem;
    font-weight: 560;
}

.mobiz-layer3-simple-form-card-edit-lite :is(input, select, textarea, .mobiz-control) {
    border-radius: 14px;
}

.mobiz-layer3-simple-form-card-edit-lite :is(.mobiz-primary-link, button[type="submit"]) {
    font-weight: 560;
}

@media (max-width: 760px) {
    .mobiz-layer3-simple-form-card-edit-lite {
        border-radius: 20px !important;
        padding: 1rem !important;
    }

    .mobiz-layer3-simple-form-card-edit-lite :is(.flex, .mobiz-form-actions) {
        align-items: stretch;
    }

    .mobiz-layer3-simple-form-card-edit-lite :is(a, button[type="submit"]) {
        justify-content: center;
        width: 100%;
    }
}
/* MOBIZ_TASK_15A2_LAYER_3_SIMPLE_FORM_CARD_EDIT_LITE_DNA_END */

/* MOBIZ_TASK_15A3_LAYER_3_QUOTATION_EXPENSE_SUPPLIER_EDIT_LITE_DNA_START */
.mobiz-layer3-qes-edit-lite {
    border-color: rgba(226, 232, 240, 0.95) !important;
    border-radius: 22px !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.045);
}

div.mobiz-layer3-qes-edit-lite {
    margin-inline: auto;
}

.mobiz-layer3-qes-edit-lite :is(h1, h2, h3) {
    color: #0f172a;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.mobiz-layer3-qes-edit-lite :is(label, .mobiz-form-label) {
    color: #334155;
    font-size: 0.8rem;
    font-weight: 560;
}

.mobiz-layer3-qes-edit-lite :is(input, select, textarea, .mobiz-control) {
    border-radius: 14px;
}

.mobiz-layer3-qes-edit-lite :is(.mobiz-form-grid, .grid) {
    gap: 1rem;
}

.mobiz-layer3-qes-edit-lite :is(.mobiz-primary-link, button[type="submit"]) {
    font-weight: 560;
}

@media (max-width: 760px) {
    .mobiz-layer3-qes-edit-lite {
        width: 100%;
        max-width: 100%;
        border-radius: 20px !important;
    }

    form.mobiz-layer3-qes-edit-lite,
    .mobiz-layer3-qes-edit-lite form,
    .mobiz-layer3-qes-edit-lite.rounded-xl {
        padding: 1rem !important;
    }

    .mobiz-layer3-qes-edit-lite :is(.flex, .mobiz-form-actions, .mobiz-page-actions) {
        align-items: stretch;
    }

    .mobiz-layer3-qes-edit-lite :is(a, button[type="submit"]) {
        justify-content: center;
        width: 100%;
    }
}
/* MOBIZ_TASK_15A3_LAYER_3_QUOTATION_EXPENSE_SUPPLIER_EDIT_LITE_DNA_END */

/* MOBIZ_TASK_15A4_LAYER_3_LINE_ITEM_EDIT_LITE_DNA_START */
.mobiz-layer3-line-item-edit-lite {
    border-color: rgba(226, 232, 240, 0.95) !important;
    border-radius: 22px !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.045);
}

.mobiz-layer3-line-item-edit-lite :is(label, .mobiz-form-label) {
    color: #334155;
    font-size: 0.8rem;
    font-weight: 560;
}

.mobiz-layer3-line-item-edit-lite :is(input, select, textarea, .mobiz-control) {
    border-radius: 14px;
}

.mobiz-layer3-line-item-edit-lite :is(.mobiz-primary-link, button[type="submit"]) {
    font-weight: 560;
}

@media (max-width: 760px) {
    .mobiz-layer3-line-item-edit-lite {
        border-radius: 20px !important;
        padding: 1rem !important;
    }

    .mobiz-layer3-line-item-edit-lite :is(.flex, .mobiz-form-actions) {
        align-items: stretch;
    }

    .mobiz-layer3-line-item-edit-lite :is(a, button[type="submit"]) {
        justify-content: center;
        width: 100%;
    }
}
/* MOBIZ_TASK_15A4_LAYER_3_LINE_ITEM_EDIT_LITE_DNA_END */

/* MOBIZ_TASK_15A5_LAYER_3_SPECIAL_EDIT_LITE_DNA_START */
.mobiz-layer3-special-edit-lite {
    border-color: rgba(226, 232, 240, 0.95) !important;
    border-radius: 22px !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.045);
}

.mobiz-layer3-special-edit-lite :is(h1, h2, h3) {
    color: #0f172a;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.mobiz-layer3-special-edit-lite :is(label, .mobiz-form-label) {
    color: #334155;
    font-size: 0.8rem;
    font-weight: 560;
}

.mobiz-layer3-special-edit-lite :is(input, select, textarea, .mobiz-control) {
    border-radius: 14px;
}

.mobiz-layer3-special-edit-lite :is(.mobiz-primary-link, .mobiz-btn, button[type="submit"]) {
    font-weight: 560;
}

@media (max-width: 760px) {
    .mobiz-layer3-special-edit-lite {
        border-radius: 20px !important;
        padding: 1rem !important;
    }

    .mobiz-layer3-special-edit-lite :is(.flex, .mobiz-form-actions, .mobiz-form-row) {
        align-items: stretch;
    }

    .mobiz-layer3-special-edit-lite :is(a, button[type="submit"]) {
        justify-content: center;
        width: 100%;
    }
}
/* MOBIZ_TASK_15A5_LAYER_3_SPECIAL_EDIT_LITE_DNA_END */