:root {
    --spm-primary:   #1a56db;
    --spm-dark:      #111827;
    --spm-sidebar-w: 230px;
    --spm-nav-h:     52px;
}

/* ── Base ─────────────────────────────────────────── */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
    max-width: 100%;
}
body {
    background:#f3f4f8;
    font-size:.925rem;
    overflow-x: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0);
    max-width: 100%;
}
img, video { max-width: 100%; height: auto; }
svg { max-width: 100%; }
.spm-card canvas { max-width: 100%; }

/* ── Navbar ───────────────────────────────────────── */
.spm-navbar {
    height: var(--spm-nav-h);
    background: var(--spm-dark);
    position: fixed; top:0; left:0; right:0; z-index:1040;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.spm-navbar .navbar-brand {
    font-size:1rem;
    letter-spacing:.02em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-dropdown.dropdown-menu,
.spm-msg-dropdown.dropdown-menu {
    width: min(320px, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
}
.spm-msg-dropdown.dropdown-menu { width: min(280px, calc(100vw - 1rem)); }

/* ── Layout ───────────────────────────────────────── */
.spm-body {
    margin-top: var(--spm-nav-h);
    min-height: calc(100vh - var(--spm-nav-h));
    width: 100%;
    max-width: 100%;
    min-width: 0;
    position: relative;
}
.spm-sidebar {
    width: var(--spm-sidebar-w);
    min-width: var(--spm-sidebar-w);
    background: #fff;
    border-right: 1px solid #e5e7eb;
    position: fixed;
    top: var(--spm-nav-h);
    left: 0; bottom: 0;
    overflow-y: auto;
    transition: transform .25s ease;
    z-index: 1030;
}
.spm-main {
    margin-left: var(--spm-sidebar-w);
    transition: margin .25s ease;
    min-width: 0;
    flex: 1 1 auto !important;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
.spm-content {
    padding: 1.5rem;
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

/* ── Sidebar nav ─────────────────────────────────── */
.spm-sidebar .nav-link {
    color: #374151;
    padding: .55rem 1rem;
    border-radius: 6px;
    margin: 1px 8px;
    display: flex; align-items: center; gap: 10px;
    font-size: .875rem; font-weight: 500;
    transition: background .15s, color .15s;
}
.spm-sidebar .nav-link i { font-size: 1rem; width: 18px; }
.spm-sidebar .nav-link:hover { background: #f0f4ff; color: var(--spm-primary); }
.spm-sidebar .nav-link.active { background: #e8effd; color: var(--spm-primary); font-weight:600; }
.spm-sidebar .nav-link.active i { color: var(--spm-primary); }

/* ── Sidebar collapsed ───────────────────────────── */
body.sidebar-collapsed .spm-sidebar { transform: translateX(-100%); }
body.sidebar-collapsed .spm-main    { margin-left: 0; }

/* ── Cards ───────────────────────────────────────── */
.spm-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.stat-card {
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 12px; padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    transition: transform .15s, box-shadow .15s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.stat-card .stat-icon {
    width: 48px; height: 48px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
}
.stat-card .stat-num { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.stat-card .stat-label { font-size: .8rem; color: #6b7280; }

/* ── Avatar circle ────────────────────────────────── */
.avatar-circle {
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 600; flex-shrink: 0;
}

/* ── Notification badge ──────────────────────────── */
.notif-badge { font-size:.6rem; min-width:16px; height:16px; padding:0 4px; line-height:16px; }

/* ── Notification dropdown ───────────────────────── */
.notif-dropdown .notif-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: .65rem 1rem; border-bottom: 1px solid #f3f4f6;
    text-decoration: none; color: inherit;
    transition: background .1s;
}
.notif-item:hover { background: #f9fafb; }
.notif-item.unread { background: #f0f4ff; }
.notif-item .notif-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; flex-shrink: 0;
}

/* ── Page header ─────────────────────────────────── */
.page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.5rem; flex-wrap: wrap; gap: .75rem;
}
.page-header h1 { font-size: 1.35rem; font-weight: 700; margin: 0; color: #111827; }
.page-breadcrumb { font-size: .8rem; color: #6b7280; margin-top: 2px; }

/* ── Priority/Status colors ──────────────────────── */
.priority-urgent { border-left: 3px solid #ef4444 !important; }
.priority-high   { border-left: 3px solid #f59e0b !important; }
.priority-medium { border-left: 3px solid #3b82f6 !important; }
.priority-low    { border-left: 3px solid #10b981 !important; }

/* ── Task card ────────────────────────────────────── */
.task-card {
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 10px; padding: 1rem 1.2rem;
    transition: box-shadow .15s;
}
.task-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.task-card .task-title { font-weight: 600; color: #111827; text-decoration: none; }
.task-card .task-title:hover { color: var(--spm-primary); }
.note-card { transition: box-shadow .15s, transform .1s; }
.note-card:hover { transform: translateY(-1px); }

/* ── Progress bar thin ────────────────────────────── */
.progress-xs { height: 6px; }

/* ── Table ────────────────────────────────────────── */
.table-clean { border: none; }
.table-clean thead th {
    background: #f9fafb; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .04em;
    color: #6b7280; border-bottom: 1px solid #e5e7eb;
    font-weight: 600; padding: .65rem 1rem;
}
.table-clean td { padding: .75rem 1rem; border-color: #f3f4f6; vertical-align: middle; }
.table-clean tr:last-child td { border-bottom: 0; }

/* ── Form ─────────────────────────────────────────── */
.form-label { font-weight: 500; font-size: .875rem; color: #374151; margin-bottom: .35rem; }
.form-control, .form-select {
    border: 1px solid #d1d5db; border-radius: 7px;
    font-size: .9rem; transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--spm-primary);
    box-shadow: 0 0 0 3px rgba(26,86,219,.12);
}

/* ── Buttons ─────────────────────────────────────── */
.btn { border-radius: 7px; font-size: .875rem; font-weight: 500; }
.btn-primary { background: var(--spm-primary); border-color: var(--spm-primary); }
.btn-primary:hover { background: #1648c0; border-color: #1648c0; }

/* ── Search bar ───────────────────────────────────── */
.search-bar { position: relative; }
.search-bar .form-control { padding-left: 2.2rem; }
.search-bar .bi-search { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: #9ca3af; }

/* ── WhatsApp indicator ──────────────────────────── */
.wa-status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .78rem; padding: 3px 8px; border-radius: 20px;
}
.wa-status-badge.enabled  { background: #d1fae5; color: #065f46; }
.wa-status-badge.disabled { background: #fee2e2; color: #991b1b; }

/* ── Timeline (task updates) ──────────────────────── */
.timeline { list-style: none; padding: 0; position: relative; }
.timeline::before {
    content: ''; position: absolute;
    left: 15px; top: 0; bottom: 0; width: 2px; background: #e5e7eb;
}
.timeline-item { display: flex; gap: 12px; margin-bottom: 1rem; position: relative; }
.timeline-dot {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; z-index: 1; font-size: .85rem;
}
.timeline-body {
    background: #f9fafb; border: 1px solid #e5e7eb;
    border-radius: 8px; padding: .65rem .9rem; flex: 1;
}

/* ── Login page ────────────────────────────────────── */
.login-page { background: linear-gradient(135deg, #111827 0%, #1a56db 100%); min-height: 100vh; }
.login-card {
    background: #fff; border-radius: 14px;
    box-shadow: 0 20px 40px rgba(0,0,0,.3);
}

/* ── Dashboard (compact phone layout, less scrolling) ─────────────── */
/* Rows use g-0 + padding on cols only — no Bootstrap negative margins (avoids sideways scroll). */
.spm-dashboard {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}
.spm-dashboard .dashboard-inner {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}
/* Phones: tighter page gutter + smaller gutters so stats/cards fit without sideways scroll */
@media (max-width: 575.98px) {
    .spm-content:has(.spm-dashboard) {
        padding-left: max(0.35rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.35rem, env(safe-area-inset-right, 0px));
        padding-top: 0.65rem;
    }
    .spm-dashboard .dashboard-hero-title {
        font-size: 1rem;
    }
    .spm-dashboard .dashboard-hero-sub {
        font-size: 0.72rem;
    }
    .spm-dashboard .stat-card {
        padding: 0.45rem 0.5rem;
        border-radius: 10px;
    }
    .spm-dashboard .dashboard-stats .stat-card .stat-num {
        font-size: clamp(1rem, 4vw, 1.35rem);
    }
    .spm-dashboard .dashboard-stats .stat-card .stat-label {
        font-size: 0.6rem;
    }
    .spm-dashboard .dashboard-stats .stat-icon {
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
        border-radius: 8px;
    }
    .spm-dashboard .dashboard-chart-wrap {
        height: 118px;
        max-width: 100%;
    }
    .spm-dashboard .dashboard-side-chart .spm-card,
    .spm-dashboard .dashboard-activity-card,
    .spm-dashboard .dashboard-recent-card {
        padding: 0.55rem 0.65rem;
    }
    .spm-dashboard .dashboard-side-chart h6,
    .spm-dashboard .dashboard-activity-card h6,
    .spm-dashboard .dashboard-recent-card h6 {
        font-size: 0.68rem !important;
        margin-bottom: 0.35rem !important;
    }
    .spm-dashboard .dashboard-activity-feed {
        max-height: 130px;
    }
    .spm-dashboard .dashboard-recent-table thead th {
        font-size: 0.62rem;
        padding: 0.3rem 0.35rem;
    }
    .spm-dashboard .dashboard-recent-table td {
        padding: 0.4rem 0.35rem;
        font-size: 0.78rem;
    }
    .spm-dashboard .dashboard-recent-table .btn-sm {
        font-size: 0.68rem;
        padding: 0.15rem 0.4rem;
    }
}
.dashboard-hero {
    background: linear-gradient(125deg, #eef2ff 0%, #fdf2f8 45%, #ecfdf5 100%);
    border: 1px solid rgba(226, 232, 240, 0.9);
}
.dashboard-hero-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: #111827;
}
.dashboard-hero-sub {
    font-size: .78rem;
}
.spm-dashboard .stat-card {
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
}
.spm-dashboard .dashboard-stats .stat-card .stat-num {
    font-size: clamp(1.2rem, 4.5vw, 1.65rem);
    line-height: 1.15;
}
.spm-dashboard .dashboard-stats .stat-card .stat-label {
    font-size: .68rem;
    margin-bottom: 0.15rem;
}
.spm-dashboard .dashboard-stats .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
}
.spm-dashboard .dashboard-chart-wrap {
    position: relative;
    width: 100%;
    max-width: min(260px, 100%);
    height: 180px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    box-sizing: border-box;
}
.spm-dashboard .dashboard-chart-legend-xs {
    max-width: 100%;
    box-sizing: border-box;
}
.spm-dashboard .dashboard-recent-table {
    table-layout: fixed;
    width: 100%;
}
.spm-dashboard .dashboard-recent-table .badge {
    white-space: normal;
    line-height: 1.25;
    font-size: 0.65rem;
    font-weight: 500;
    text-align: center;
    max-width: 100%;
    hyphens: auto;
}
@media (max-width: 767.98px) {
    .spm-dashboard .dashboard-recent-table td:nth-child(3),
    .spm-dashboard .dashboard-recent-table th:nth-child(3) {
        width: 34%;
    }
}
.spm-dashboard .dashboard-activity-feed li > div:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}
.spm-dashboard .dashboard-side-chart .spm-card,
.spm-dashboard .dashboard-activity-card {
    padding: 0.85rem 1rem;
}
.spm-dashboard .dashboard-activity-feed {
    max-height: 160px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.spm-dashboard .dashboard-activity-feed .avatar-circle {
    width: 24px !important;
    height: 24px !important;
    font-size: 9px !important;
}
.spm-dashboard .dashboard-recent-card {
    padding: 0.85rem 1rem;
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .spm-dashboard .dashboard-chart-wrap {
        height: 150px;
    }
}
@media (max-width: 991.98px) {
    .spm-dashboard .dashboard-chart-wrap {
        max-width: 100%;
    }
    .spm-dashboard .dashboard-chart-wrap canvas {
        max-width: 100% !important;
    }
    .spm-dashboard .dashboard-recent-card .table-responsive {
        max-width: 100%;
    }
    .spm-dashboard .dashboard-recent-table td,
    .spm-dashboard .dashboard-recent-table th {
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .spm-dashboard .dashboard-recent-table thead th {
        font-size: 0.7rem;
        padding: 0.4rem 0.45rem;
    }
    .spm-dashboard .dashboard-recent-table td {
        padding: 0.5rem 0.45rem;
    }
    .spm-dashboard .dashboard-recent-table tbody tr:nth-child(n + 6) {
        display: none;
    }
}
@media (min-width: 992px) {
    .spm-dashboard .dashboard-recent-table tbody tr {
        display: table-row !important;
    }
    .spm-dashboard .dashboard-chart-wrap {
        height: 200px;
        max-width: min(280px, 100%);
    }
}

/* ── Dashboard (pm2 layout: notepad widget + mobile task list) ───── */
.dashboard-chart-wrap {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    aspect-ratio: 1;
}
.dashboard-chart-wrap canvas { max-height: 200px; }

.dashboard-task-item {
    display: block;
    padding: .55rem .65rem;
    margin-bottom: .4rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
}
.dashboard-task-item:last-child { margin-bottom: 0; }
.dashboard-task-item .badge { font-size: .65rem; }

.spm-mobile-truncate {
    max-width: min(250px, 100%);
}

/* Horizontal scroll for many filter tabs on phones */
.spm-scroll-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.35rem !important;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
}
.spm-scroll-tabs .btn {
    flex-shrink: 0;
}
@media (min-width: 992px) {
    .spm-scroll-tabs {
        flex-wrap: wrap;
        overflow: visible;
    }
}

/* ── Reports hub ──────────────────────────────────── */
.spm-reports .spm-report-tabs .nav-link {
    white-space: nowrap;
    font-size: 0.85rem;
    padding: 0.45rem 0.75rem;
}
.report-chart-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 220px;
}
.report-chart-wrap--sm { height: 200px; max-width: min(320px, 100%); margin: 0 auto; }
.report-chart-wrap--wide { height: 210px; }
.report-chart-wrap--tall { height: 260px; }

.spm-reports .report-staff-row,
.spm-reports .report-drill-row { cursor: pointer; }
.spm-reports .report-staff-row:hover,
.spm-reports .report-drill-row:hover { background: rgba(26, 86, 219, 0.06); }

/* Drill-down summary stats — stable grid (avoids broken Bootstrap row collapse) */
.report-drill-print-area .report-drill-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0;
}
@media (min-width: 768px) {
    .report-drill-print-area .report-drill-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.report-drill-print-area .report-drill-stat {
    min-width: 0;
}
.report-drill-print-area .report-drill-stat .stat-card {
    margin: 0;
    height: 100%;
    position: relative;
    transform: none;
}
.report-drill-print-area .report-drill-stat .stat-card:hover {
    transform: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.report-drill-print-area .report-drill-stat .stat-num {
    font-size: 1.35rem;
    line-height: 1.2;
}
.report-drill-print-area .report-drill-mobile-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid #e5e7eb;
}
.report-drill-print-area .report-drill-mobile-item:last-child {
    border-bottom: 0;
}

/* Overview / personal stat rows inside reports */
.spm-reports .reports-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}
@media (min-width: 768px) {
    .spm-reports .reports-stat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.spm-reports .reports-stat-grid .stat-card {
    margin: 0;
    height: 100%;
}

/* Reports — phone layout (no horizontal zoom) */
.spm-reports {
    max-width: 100%;
    overflow-x: hidden;
}
.spm-reports .row {
    --bs-gutter-x: 0.5rem;
}
.spm-reports [class*="col-"] {
    min-width: 0;
}
.spm-reports .spm-card {
    max-width: 100%;
    overflow: hidden;
}
.spm-reports .table-responsive {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
.spm-reports canvas {
    display: block;
    max-width: 100% !important;
}

@media (max-width: 767.98px) {
    .spm-reports .page-header h1,
    .spm-reports .h4 {
        font-size: 1rem;
    }
    .spm-reports .page-breadcrumb {
        font-size: 0.72rem;
        word-break: break-word;
    }
    .spm-reports .stat-card {
        padding: 0.55rem 0.6rem;
    }
    .spm-reports .stat-card .stat-num {
        font-size: 1.1rem;
        line-height: 1.15;
    }
    .spm-reports .stat-card .stat-label {
        font-size: 0.62rem;
    }
    .spm-reports .spm-card {
        padding: 0.65rem 0.75rem;
    }
    .spm-reports .spm-card h6 {
        font-size: 0.82rem;
    }
    .spm-reports .spm-report-tabs .nav-link {
        padding: 0.3rem 0.55rem;
        font-size: 0.75rem;
    }
    .spm-reports #reportFilterForm .btn-sm {
        font-size: 0.72rem;
        padding: 0.25rem 0.45rem;
    }
    .spm-reports .btn-group {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 0.35rem;
    }
    .spm-reports .btn-group .btn {
        flex: 1 1 auto;
        min-width: 0;
    }
    .spm-reports .export-hint {
        display: none;
    }
    .report-chart-wrap {
        height: 145px;
    }
    .report-chart-wrap--sm {
        height: 130px;
        max-width: 100%;
    }
    .report-chart-wrap--wide {
        height: 140px;
    }
    .report-chart-wrap--tall {
        height: 160px;
    }
    .spm-reports .table-clean {
        font-size: 0.78rem;
    }
    .spm-reports .table-clean td,
    .spm-reports .table-clean th {
        padding: 0.35rem 0.45rem;
        word-break: break-word;
    }
    .spm-reports .report-rate-cell {
        min-width: 0 !important;
    }
    .spm-reports .report-drill-print-area .stat-num {
        font-size: 1rem;
    }
    .spm-reports .report-drill-print-area .row.g-2 {
        --bs-gutter-x: 0.35rem;
    }
}

@media (max-width: 575.98px) {
    .spm-content:has(.spm-reports) {
        padding-left: max(0.4rem, env(safe-area-inset-left, 0));
        padding-right: max(0.4rem, env(safe-area-inset-right, 0));
    }
    .report-chart-wrap {
        height: 120px;
    }
    .report-chart-wrap--tall {
        height: 140px;
    }
}

@media print {
  .sidebar, .topbar, .spm-report-tabs, .no-print, footer, .btn, form#reportFilterForm { display: none !important; }
  .main-content { margin: 0 !important; padding: 0 !important; }
  .report-drill-print-area { break-inside: avoid; }
  .spm-card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

.task-view-toggle .btn { min-width: 38px; }
.task-card-archived, .task-row-archived { opacity: 0.92; }
.tasks-list-table tr:hover { background: rgba(26, 86, 219, 0.04); }

/* ── Settings (tablet / phone) ───────────────────── */
@media (max-width: 991.98px) {
    .spm-settings-layout > .spm-settings-nav-col {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
    }
    .spm-settings-layout .spm-card.p-2 > .nav.flex-column {
        flex-direction: row !important;
        flex-wrap: nowrap;
        gap: 0.35rem;
        min-width: min-content;
    }
    .spm-settings-layout .spm-card.p-2 > .nav .nav-link {
        white-space: nowrap;
        border-radius: 8px;
        padding: 0.4rem 0.65rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 991.98px) {
    .settings-audit-log td[style*="max-width"] {
        max-width: none !important;
    }
}

/* ── Messages layout (mobile-friendly) ───────────── */
.spm-messages-layout {
    height: calc(100vh - var(--spm-nav-h) - 7rem);
    min-height: min(520px, 85vh);
    max-height: calc(100vh - var(--spm-nav-h) - 5rem);
}
.spm-msg-contacts {
    max-height: none;
}
@media (max-width: 991.98px) {
    .spm-messages-layout {
        height: auto;
        min-height: 360px;
        max-height: none;
    }
    .spm-msg-contacts {
        max-height: 220px;
    }
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 991.98px) {
    .spm-sidebar { transform: translateX(-100%); box-shadow: 4px 0 24px rgba(0,0,0,.12); }
    .spm-main    { margin-left: 0; }
    body.sidebar-open .spm-sidebar { transform: translateX(0); }
    body.sidebar-open { overflow: hidden; touch-action: none; }
    body.sidebar-open .spm-body::before {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        top: var(--spm-nav-h);
        bottom: 0;
        background: rgba(17, 24, 39, 0.45);
        z-index: 1025;
        pointer-events: auto;
    }
    .spm-content { padding: .85rem; padding-bottom: max(.85rem, env(safe-area-inset-bottom)); }
    .stat-card .stat-num { font-size: 1.4rem; }
    .spm-card { padding: .9rem; border-radius: 8px; }
    .page-header { flex-direction: column; align-items: stretch !important; }
    .page-header h1 { font-size: 1.1rem; word-break: break-word; }
    .page-header .d-flex.gap-2 { flex-direction: column; width: 100%; align-items: stretch; }
    .page-header .btn { width: 100%; }
    .dashboard-header h1 { font-size: 1.1rem; }
    .dashboard-header .page-breadcrumb { font-size: .72rem; }
    .dashboard-header-actions .btn { font-size: .75rem; padding: .25rem .5rem; }
    .dashboard-stats .stat-card {
        padding: .5rem .6rem;
        border-radius: 8px;
    }
    .dashboard-stats .stat-card:hover { transform: none; }
    .dashboard-stats .stat-card .stat-num { font-size: 1.05rem; }
    .dashboard-stats .stat-card .stat-label { font-size: .62rem; line-height: 1.2; }
    .dashboard-stats .stat-card .stat-icon {
        width: 28px; height: 28px; font-size: .85rem; border-radius: 8px;
    }
    .dashboard-stats .stat-card .mt-1 { display: none; }
    .dashboard-card { padding: .7rem; border-radius: 8px; }
    .dashboard-card h6 { font-size: .85rem; }
    .dashboard-chart-wrap { max-width: 160px; }
    .dashboard-chart-wrap canvas { max-height: 140px; }
    .dashboard-panels .list-unstyled { max-height: 160px !important; }
    .dashboard-panels .avatar-circle { width: 24px !important; height: 24px !important; font-size: .65rem !important; }
    .table-responsive { -webkit-overflow-scrolling: touch; }
    /* Card-style rows for readable tables (skip audit + dashboard recent grid — keep horizontal scroll there) */
    .spm-content .table-clean:not(.settings-audit-log):not(.dashboard-recent-table):not(.spm-reports-table) thead { display: none; }
    .spm-content .table-clean:not(.settings-audit-log):not(.dashboard-recent-table):not(.spm-reports-table) tbody tr { display: block; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: .6rem; background: #fff; }
    .spm-content .table-clean:not(.settings-audit-log):not(.dashboard-recent-table):not(.spm-reports-table) tbody td { display: block; width: 100%; padding: .45rem .7rem; border: 0; text-align: left !important; word-break: break-word; }
    .modal-dialog { margin: .5rem; max-width: calc(100% - 1rem); }
    .input-group { flex-wrap: wrap; }
    .input-group > .form-control { min-width: 0; }
    #taskCalendar .fc-header-toolbar { flex-direction: column; gap: .5rem; align-items: stretch; }
    #taskCalendar .fc-toolbar-chunk { display: flex; flex-wrap: wrap; gap: .25rem; justify-content: center; }
    #taskCalendar .fc-toolbar-title { font-size: 1rem !important; text-align: center; }
    .treetree-shell .treetree-hero h1 { font-size: 1.15rem; }
}

@media (max-width: 576px) {
    .form-control, .form-select, .input-group-text {
        font-size: 16px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .spm-content { padding: 1.1rem; }
    .spm-sidebar { width: 210px; min-width: 210px; }
    .spm-main { margin-left: 210px; }
    body.sidebar-collapsed .spm-main { margin-left: 0; }
}

/* ── Utilities ───────────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.text-truncate-2 { overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.border-dashed { border-style: dashed !important; }
.fs-7 { font-size: .78rem; }