/* ============================================================
   Lushanth CRM - Premium SaaS Design System
   ============================================================ */

:root {
    --bg-app: #f3f4f6;
    --bg-surface: #ffffff;
    --bg-subtle: #fafafa;
    --bg-hover: #f7f7f7;
    --text-primary: #171717;
    --text-secondary: #525252;
    --text-muted: #8a8a8a;
    --border: #e8e8e8;
    --border-strong: #dddddd;
    --primary: #171717;
    --primary-hover: #272727;
    --success: #22c55e;
    --success-light: #dcfce7;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --danger: #ef4444;
    --danger-light: #fee2e2;
    --info: #3b82f6;
    --info-light: #dbeafe;
    --accent-pink: #ec4899;
    --radius-sm: 8px;
    --radius: 10px;
    --radius-lg: 12px;
    --sidebar-width: 252px;
    --sidebar-collapsed: 72px;
    --header-height: 64px;
    --content-padding: 24px;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .03);
    --shadow-sm: 0 6px 18px rgba(0, 0, 0, .05);
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --transition: 150ms ease;
}

html,
body {
    background: var(--bg-app);
    color: var(--text-primary);
    font-family: var(--font);
}

body {
    font-size: 14px;
    line-height: 1.55;
}

.icon {
    flex: 0 0 auto;
}

.app-wrapper {
    min-height: 100vh;
    background: var(--bg-app);
}

.sidebar {
    background: var(--bg-surface) !important;
    border-right: 1px solid var(--border) !important;
    box-shadow: none !important;
}

.sidebar-logo {
    border-bottom: 1px solid var(--border) !important;
    padding: 16px !important;
    justify-content: center !important;
    text-align: center !important;
}

.sidebar-logo-img {
    height: 60px !important;
    max-width: 235px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}

.sidebar-logo-icon,
.brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--primary) !important;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    letter-spacing: 0;
}

.sidebar-logo-text strong,
.sidebar-logo-text span {
    color: var(--text-primary) !important;
}

.sidebar-logo-text span {
    color: var(--text-muted) !important;
}

.sidebar-nav {
    padding: 10px 10px 12px !important;
}

.nav-section {
    margin: 12px 0 16px;
}

.nav-section-label {
    color: var(--text-muted) !important;
    font-size: 11px !important;
    letter-spacing: .04em !important;
    padding: 8px 10px 6px !important;
}

.nav-link {
    color: var(--text-secondary) !important;
    border-radius: 9px !important;
    padding: 9px 10px !important;
    margin: 1px 0 !important;
    gap: 10px !important;
    font-weight: 500 !important;
}

.nav-link:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.nav-link.active {
    background: #f1f1f1 !important;
    color: var(--text-primary) !important;
    font-weight: 650 !important;
}

.nav-icon {
    width: 20px;
    height: 20px;
    color: currentColor;
    display: grid;
    place-items: center;
}

.sidebar-bottom {
    border-top: 1px solid var(--border) !important;
    padding: 12px !important;
}

.sidebar-user {
    background: transparent !important;
    border: 1px solid var(--border);
    border-radius: 12px !important;
    color: var(--text-primary) !important;
}

.sidebar-user:hover {
    background: var(--bg-hover) !important;
}

.topbar {
    height: var(--header-height) !important;
    background: rgba(255,255,255,.96) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px);
}

.sidebar-toggle,
.topbar-btn,
.topbar-user,
.btn {
    border-radius: 9px !important;
}

.topbar-btn,
.sidebar-toggle {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

.topbar-btn:hover,
.sidebar-toggle:hover {
    background: var(--bg-hover) !important;
}

.topbar-search {
    max-width: 360px;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    height: 40px !important;
}

.topbar-search input {
    font-size: 13px !important;
}

.breadcrumb {
    color: var(--text-muted);
    font-size: 14px !important;
    line-height: 1;
    font-weight: 600;
    gap: 8px !important;
    align-items: center !important;
}

.breadcrumb a,
.breadcrumb .current {
    color: var(--text-primary) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
}

.breadcrumb .separator {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--text-muted) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1;
    transform: translateY(-1px);
}

.sidebar-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.main-content {
    background: var(--bg-app) !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: calc(100vh - var(--header-height, 64px)) !important;
    box-sizing: border-box !important;
}

.page-header,
.crm-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.crm-page-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 24px;
    line-height: 1.2;
    font-weight: 720;
    letter-spacing: 0;
}

.crm-page-subtitle {
    margin: 5px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.btn,
button.btn,
a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.btn-primary,
a.btn-primary,
button.btn-primary,
.btn-dark,
a.btn-dark,
button.btn-dark {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active,
button.btn-primary:hover,
button.btn-primary:focus,
button.btn-primary:active,
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
a.btn-dark:hover,
a.btn-dark:focus,
a.btn-dark:active,
button.btn-dark:hover,
button.btn-dark:focus,
button.btn-dark:active {
    background: var(--primary-hover, #1e293b) !important;
    border-color: var(--primary-hover, #1e293b) !important;
    color: #ffffff !important;
}

.btn-secondary {
    background: var(--bg-surface) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

.btn-danger {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
    color: #fff !important;
}

.btn-sm {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 12px;
}

.crm-card,
.card,
.dash-panel,
.hero-card,
.ops-pill {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xs) !important;
}

.crm-card {
    padding: 18px;
}

.crm-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.crm-kpi {
    padding: 16px;
}

.crm-kpi-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.crm-kpi-label {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
}

.crm-kpi-value {
    color: var(--text-primary);
    font-size: 25px;
    line-height: 1.15;
    font-weight: 760;
    letter-spacing: 0;
}

.crm-kpi-note {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 12px;
}

.crm-grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .8fr);
    gap: 16px;
}

.crm-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 700;
}

.crm-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 13px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.table-wrap,
.dash-table-wrap {
    overflow: visible;
}

table,
.table,
.dash-table {
    width: 100%;
    border-collapse: collapse;
}

table th,
.table th,
.dash-table th {
    background: var(--bg-subtle);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

table td,
.table td,
.dash-table td {
    color: var(--text-primary);
    font-size: 13px;
    padding: 11px 12px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

table tr:hover td,
.table tr:hover td,
.dash-table tr:hover td {
    background: #fcfcfc;
}

.badge,
.pill-badge,
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    line-height: 1.4;
    font-weight: 600;
    border: 1px solid transparent;
}

.badge::before,
.pill-badge::before,
.status-chip::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.badge-success,
.pill-green,
.status-success {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border-color: #a7f3d0 !important;
}
.badge-success::before,
.pill-green::before,
.status-success::before {
    background: #10b981 !important;
}

.badge-warning,
.pill-orange,
.status-warning {
    background: #fffbeb !important;
    color: #b45309 !important;
    border-color: #fde68a !important;
}
.badge-warning::before,
.pill-orange::before,
.status-warning::before {
    background: #f59e0b !important;
}

.badge-danger,
.status-danger {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border-color: #fecaca !important;
}
.badge-danger::before,
.status-danger::before {
    background: #ef4444 !important;
}

.badge-info,
.badge-primary,
.pill-blue,
.status-info {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border-color: #bfdbfe !important;
}
.badge-info::before,
.badge-primary::before,
.pill-blue::before,
.status-info::before {
    background: #3b82f6 !important;
}

.badge-secondary,
.status-neutral {
    background: #f4f4f5 !important;
    color: #52525b !important;
    border-color: #e4e4e7 !important;
}
.badge-secondary::before,
.status-neutral::before {
    background: #71717a !important;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
    border: 1px solid var(--border) !important;
    border-radius: 9px !important;
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    min-height: 40px;
    box-shadow: none !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: #b8b8b8 !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,.04) !important;
}

.alert {
    border-radius: 12px !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-xs);
}

.alert-success {
    border-color: #bbf7d0 !important;
    background: #f0fdf4 !important;
}

.alert-danger {
    border-color: #fecaca !important;
    background: #fef2f2 !important;
}

.alert-warning {
    border-color: #fde68a !important;
    background: #fffbeb !important;
}

.dropdown-menu,
.notif-panel {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.10) !important;
}

.dropdown-item {
    border-radius: 8px !important;
    color: var(--text-primary) !important;
    font-size: 13px !important;
}

.dropdown-item:hover {
    background: var(--bg-hover) !important;
}

.progress-track {
    height: 6px;
    border-radius: 999px;
    background: #f1f1f1;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

.empty-state {
    color: var(--text-secondary);
}

.mobile-overlay,
#mobileOverlay {
    display: none !important;
    position: fixed;
    inset: 0;
    background: rgba(23,23,23,.38) !important;
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.app-global-footer {
    position: relative !important;
    margin-left: var(--sidebar-width, 260px) !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    background: #ffffff !important;
    border-top: 1px solid var(--border, #e2e8f0) !important;
    color: var(--text-muted, #64748b);
    font-size: 12px;
    padding: 14px 24px !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box !important;
    max-width: 100vw !important;
}

.main-content.sidebar-collapsed ~ .app-global-footer,
.sidebar.collapsed ~ .app-global-footer,
body.sidebar-collapsed .app-global-footer,
html.sidebar-collapsed-preload .app-global-footer {
    margin-left: var(--sidebar-collapsed, 70px) !important;
}

.app-global-footer a {
    color: #0f172a !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.app-global-footer a:hover {
    text-decoration: underline !important;
}

@media (max-width: 900px) {
    .app-global-footer {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 12px 16px !important;
        justify-content: center !important;
    }
}

@media (max-width: 768px) {
    .app-global-footer {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 12px 14px !important;
        flex-direction: column !important;
        text-align: center !important;
        gap: 4px !important;
        font-size: 11.5px !important;
    }

    .app-global-footer .footer-divider {
        display: none !important;
    }
}

.todo-panel {
    background: var(--bg-surface) !important;
    border-left: 1px solid var(--border) !important;
    box-shadow: -18px 0 40px rgba(0,0,0,.10) !important;
}

.todo-panel-title,
.notif-title {
    color: var(--text-primary);
    font-weight: 700;
}

/* Legacy module polish
   These selectors normalize the older CRM pages without rewriting every view. */
.content,
.page-content,
.main-content {
    color: var(--text-primary);
}

:where(.page-title, .dash-title, .aprv-title, .agr-title, .est-title, .inv-title, .staff-title, .prod-title, .task-title, .ticket-title, .report-title, .notif-title, .section-title, .card-title) {
    color: var(--text-primary) !important;
    letter-spacing: 0 !important;
}

:where(.page-title, .dash-title, .aprv-title, .agr-title, .est-title, .inv-title, .staff-title, .prod-title, .task-title, .ticket-title, .report-title) {
    font-size: 24px !important;
    line-height: 1.2 !important;
    font-weight: 720 !important;
}

:where(.page-subtitle, .dash-subtitle, .aprv-subtitle, .agr-subtitle, .est-subtitle, .inv-subtitle, .muted, .text-muted) {
    color: var(--text-secondary) !important;
}

:where(
    .stat-card,
    .stats-card,
    .kpi-card,
    .metric-card,
    .summary-card,
    .filter-card,
    .filters-card,
    .search-card,
    .table-card,
    .list-card,
    .profile-card,
    .detail-card,
    .settings-card,
    .report-card,
    .notif-card,
    .ticket-card,
    .department-card,
    .user-card,
    .role-card,
    .audit-card,
    .comm-card,
    .server-card,
    .domain-card,
    .hosting-card,
    .subscription-card,
    .account-card,
    .payment-card,
    .expense-card,
    .document-card,
    .leave-card,
    .attendance-card,
    .approval-card,
    .agreement-card,
    .estimate-card,
    .sprint-card,
    .lead-card,
    .client-card,
    .product-card,
    .staff-card,
    .table-wrapper,
    .table-container,
    .table-responsive,
    .aprv-table-wrap,
    .leave-table-wrap,
    .ledger-table-wrap,
    .ar-table-wrap,
    .pl-table-wrap
) {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xs) !important;
}

.table-wrapper, .table-container, .table-responsive, .aprv-table-wrap, .leave-table-wrap, .ledger-table-wrap, .ar-table-wrap, .pl-table-wrap {
    overflow: visible;
}

:where(.stat-card, .stats-card, .kpi-card, .metric-card, .summary-card):hover {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
}

:where(
    .btn-filter,
    .btn-clear,
    .pg-btn,
    .ql-btn,
    .lc-btn,
    .aprv-btn-approve,
    .aprv-btn-reject,
    .action-btn,
    .filter-btn,
    .search-btn,
    .create-btn,
    .add-btn,
    .export-btn,
    .view-btn,
    .edit-btn,
    .delete-btn
) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
    border-radius: 9px !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition) !important;
}

:where(.btn-filter, .lc-btn, .create-btn, .add-btn, .search-btn).btn-primary,
:where(.btn-filter, .lc-btn, .create-btn, .add-btn, .search-btn):not(.btn-clear) {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

:where(.btn-filter, .lc-btn, .create-btn, .add-btn, .search-btn).btn-primary:hover,
:where(.btn-filter, .lc-btn, .create-btn, .add-btn, .search-btn):not(.btn-clear):hover,
:where(.btn-filter, .lc-btn, .create-btn, .add-btn, .search-btn).btn-primary:focus,
:where(.btn-filter, .lc-btn, .create-btn, .add-btn, .search-btn):not(.btn-clear):focus {
    background: var(--primary-hover, #1e293b) !important;
    border-color: var(--primary-hover, #1e293b) !important;
    color: #ffffff !important;
}

:where(.btn-clear, .pg-btn, .ql-btn, .action-btn, .view-btn, .edit-btn) {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

:where(.delete-btn, .aprv-btn-reject) {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #b91c1c !important;
}

:where(.aprv-btn-approve) {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #047857 !important;
}

:where(.btn-filter, .btn-clear, .pg-btn, .ql-btn, .lc-btn, .action-btn, .filter-btn, .search-btn, .create-btn, .add-btn, .export-btn, .view-btn, .edit-btn, .delete-btn):hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-sm) !important;
}

.pg-btn.active,
.page-btn.active,
.pagination .active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

.pg-btn.disabled,
.page-btn.disabled,
.pagination .disabled {
    opacity: .45 !important;
    pointer-events: none !important;
}

:where(
    .aprv-table,
    .leave-table,
    .ledger-table,
    .ar-table,
    .pl-table,
    .data-table,
    .crm-table
) {
    width: 100% !important;
    border-collapse: collapse !important;
}

:where(.aprv-table, .leave-table, .ledger-table, .ar-table, .pl-table, .data-table, .crm-table) thead th {
    background: var(--bg-subtle) !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border) !important;
    font-size: 11.5px !important;
    letter-spacing: .03em !important;
}

:where(.aprv-table, .leave-table, .ledger-table, .ar-table, .pl-table, .data-table, .crm-table) tbody td {
    color: var(--text-primary) !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

:where(.aprv-table, .leave-table, .ledger-table, .ar-table, .pl-table, .data-table, .crm-table) tbody tr:hover td {
    background: #fcfcfc !important;
}

:where(
    .aprv-badge,
    .aprv-type-badge,
    .st-badge,
    .cat-badge,
    .method-badge,
    .overdue-badge,
    .status-badge,
    .status-pill,
    .type-badge,
    .priority-badge,
    .role-badge,
    .permission-badge
) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 24px !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    font-weight: 650 !important;
    white-space: nowrap !important;
}

:where(.aprv-badge, .aprv-type-badge, .st-badge, .cat-badge, .method-badge, .overdue-badge, .status-badge, .status-pill, .type-badge, .priority-badge, .role-badge, .permission-badge)::before {
    content: '' !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: currentColor !important;
    opacity: .85 !important;
    flex: 0 0 auto !important;
}

:where(.aprv-badge.Pending, .aprv-badge.Revised, .status-pending, .status-review, .status-hold, .priority-medium) {
    background: #fffbeb !important;
    color: #b45309 !important;
    border-color: #fde68a !important;
}

:where(.aprv-badge.Approved, .status-active, .status-approved, .status-paid, .status-completed, .status-success, .priority-low) {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border-color: #a7f3d0 !important;
}

:where(.aprv-badge.Rejected, .status-rejected, .status-overdue, .status-expired, .status-danger, .priority-high, .priority-urgent) {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border-color: #fecaca !important;
}

:where(.aprv-type-badge, .status-new, .status-progress, .status-info, .status-sent, .status-open) {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border-color: #bfdbfe !important;
}

:where(.status-neutral, .status-draft, .status-inactive, .status-closed, .role-badge, .permission-badge) {
    background: #f4f4f5 !important;
    color: #52525b !important;
    border-color: #e4e4e7 !important;
}

:where(.empty-state, .empty, .aprv-empty, .no-data, .no-records) {
    background: var(--bg-surface) !important;
    border: 1px dashed var(--border-strong) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--text-secondary) !important;
    padding: 28px !important;
    text-align: center !important;
}

:where(.empty-state-icon, .aprv-empty .icon, .no-data-icon):empty,
:where(.agr-kpi-icon, .att-kpi-icon, .kpi-icon, .stat-icon, .metric-icon):empty {
    position: relative !important;
    display: inline-grid !important;
    place-items: center !important;
}

:where(.empty-state-icon, .aprv-empty .icon, .no-data-icon):empty::before,
:where(.agr-kpi-icon, .att-kpi-icon, .kpi-icon, .stat-icon, .metric-icon):empty::before {
    content: '' !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 6px !important;
    border: 2px solid currentColor !important;
    opacity: .8 !important;
}

:where(.agr-kpi-icon, .att-kpi-icon, .kpi-icon, .stat-icon, .metric-icon) {
    border-radius: 10px !important;
    background: #f4f4f5 !important;
    color: var(--text-primary) !important;
}

:where(.filter-row, .filters-row, .search-row, .toolbar, .table-toolbar, .page-actions) {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

:where(.action-menu, .actions, .row-actions) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

:where(.pagination, .pager) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 16px;
}

:where(.page-btn, .pagination a, .pagination span.page-info) {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
}

.page-btn:not(.active):not(.disabled):hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

.page-btn.active {
    background: #0f172a !important;
    border-color: #0f172a !important;
    color: #ffffff !important;
}

.pagination span.page-info {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Finance and approval modules had older accent-heavy styles. */
:where(.rec-btn-primary, .rec-tab.active, .rec-pg-btn.active, .aprv-tab.active) {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}

:where(.rec-btn-primary, .rec-btn-purple, .rec-pg-btn, .rec-more-btn, .rec-dd-item, .aprv-tab, .ql-btn) {
    color: var(--text-primary) !important;
}

:where(.rec-btn-purple, .rec-pg-btn, .rec-more-btn, .ql-btn.purple) {
    background: var(--bg-surface) !important;
    border-color: var(--border) !important;
}

:where(.rec-stat-card.purple .rec-stat-icon, .pay-stat-card.purple .pay-stat-icon, .rec-empty-icon, .pay-stat-icon[style*="#f5f3ff"]) {
    background: #f4f4f5 !important;
    color: var(--text-primary) !important;
}

:where(.rec-stat-card.purple .rec-stat-value, .pay-stat-card.purple .pay-stat-value, .pay-stat-value[style*="#7c3aed"], .rec-no-link, .rec-m-no, .td-ref, .td-no) {
    color: var(--text-primary) !important;
}

:where(.rec-active-badge, .rec-tab-count, .rec-bd-ended) {
    background: #f4f4f5 !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

:where(.rec-filter-dot) {
    background: var(--primary) !important;
}

.aprv-kpi.urgent::before {
    background: var(--primary) !important;
}

:where(.rec-filter-control:focus, .rec-search-wrap:focus-within, .rec-per-page:focus, .aprv-filter-bar input:focus, .aprv-filter-bar select:focus, .aprv-modal textarea:focus) {
    border-color: #b8b8b8 !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,.04) !important;
}

@media (max-width: 768px) {
    :where(.page-header, .crm-page-header, .toolbar, .table-toolbar, .filter-row, .filters-row, .search-row, .page-actions) {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    :where(.btn, .btn-filter, .btn-clear, .pg-btn, .ql-btn, .lc-btn, .action-btn, .filter-btn, .search-btn, .create-btn, .add-btn, .export-btn) {
        width: 100%;
    }
}

/* ============================================================
   Dashboard Conformity Layer
   Keeps every legacy module in the same visual family as Dashboard.
   ============================================================ */

:root {
    --app-accent: #171717;
    --app-accent-soft: #f4f4f5;
}

* {
    letter-spacing: 0;
}

a {
    color: var(--text-primary);
}

a:hover {
    color: var(--primary);
}

main,
.content-area,
.page,
.page-body,
.portal-main,
.auth-page,
.error-page {
    background: var(--bg-app) !important;
}

:where(.dash-top-bar, .crm-page-header, .page-header, .portal-page-header, .auth-header, .error-header) {
    margin-bottom: 18px !important;
}

:where(.dash-top-bar, .crm-page-header, .page-header, .portal-page-header) h1,
:where(.crm-page-title, .portal-page-title, .auth-title, .error-title) {
    color: var(--text-primary) !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
    margin: 0 !important;
}

:where(.crm-page-subtitle, .page-description, .page-desc, .portal-page-subtitle, .auth-subtitle, .error-subtitle) {
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-top: 6px !important;
}

:where(
    .filter-bar,
    .filters,
    .filters-panel,
    .search-filter-bar,
    .toolbar-card,
    .agr-filter-bar,
    .att-filter-bar,
    .aprv-filter-bar,
    .docs-filter-bar,
    .rec-filter-bar,
    .est-filter-bar,
    .pay-filter-bar,
    .ticket-filter-bar,
    .settings-section,
    .builder-card,
    .builder-panel,
    .invoice-builder,
    .estimate-builder,
    .modal-content,
    .modal,
    .drawer,
    .upload-drawer,
    .portal-card,
    .auth-card,
    .error-card
) {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xs) !important;
}

:where(.filter-bar, .filters, .filters-panel, .search-filter-bar, .toolbar-card, .agr-filter-bar, .att-filter-bar, .aprv-filter-bar, .docs-filter-bar, .rec-filter-bar, .est-filter-bar, .pay-filter-bar, .ticket-filter-bar) {
    padding: 12px 14px !important;
    gap: 10px !important;
}

:where(.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-light, .btn-ghost, .rec-btn-primary, .est-btn-primary, .pay-btn-primary, .docs-upload-btn, .dv-btn-primary, .portal-btn, .auth-submit, .error-action) {
    border-radius: 9px !important;
    min-height: 38px !important;
    box-shadow: none !important;
}

:where(.btn-primary, .rec-btn-primary, .est-btn-primary, .pay-btn-primary, .docs-upload-btn, .dv-btn-primary, .auth-submit, .portal-btn-primary, button[type="submit"].btn-primary) {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

:where(.btn-primary, .rec-btn-primary, .est-btn-primary, .pay-btn-primary, .docs-upload-btn, .dv-btn-primary, .auth-submit, .portal-btn-primary, button[type="submit"].btn-primary):hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

:where(.btn-secondary, .btn-outline, .btn-light, .btn-ghost, .portal-btn-secondary, .error-action-secondary) {
    background: var(--bg-surface) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

:where(.btn-secondary, .btn-outline, .btn-light, .btn-ghost, .portal-btn-secondary, .error-action-secondary):hover {
    background: var(--bg-hover) !important;
    border-color: var(--border-strong) !important;
}

:where(.card, .crm-card, .dash-panel, .stat-card, .kpi-card, .metric-card, .summary-card, .detail-card, .info-card, .profile-card, .timeline-card, .conversation-card, .invoice-card, .estimate-card, .portal-card) {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-xs) !important;
}

:where(.card-header, .panel-header, .section-header, .modal-header, .drawer-header) {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

:where(.card-footer, .panel-footer, .modal-footer, .drawer-footer, .sticky-actions) {
    background: var(--bg-subtle) !important;
    border-top: 1px solid var(--border) !important;
}

:where(.table-wrapper, .table-container, .table-responsive, .crm-table-wrap, .data-table-wrap) table,
:where(table.table, table.crm-table, table.data-table, table.rec-table, table.est-table, table.pay-table, table.docs-table, table.ticket-table, table.audit-table) {
    background: var(--bg-surface) !important;
}

:where(table) thead,
:where(.rec-table thead, .est-table thead, .pay-table thead, .docs-table thead) {
    background: var(--bg-subtle) !important;
}

:where(table) th {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

:where(table) td a {
    color: var(--text-primary) !important;
}

:where(table) td a:hover {
    color: var(--primary) !important;
}

:where(.progress, .progress-track, .prj-bar, .progress-bar-wrap, .portal-progress, .timeline-line) {
    background: #f1f1f1 !important;
    border-radius: 999px !important;
}

:where(.progress-bar, .prj-bar-fill, .portal-progress-fill, .timeline-fill) {
    background: var(--primary) !important;
    border-radius: inherit !important;
}

:where(.tab-btn, .tabs a, .nav-tab, .rpt-tab, .rec-tab, .est-tab, .aprv-tab, .settings-tab, .portal-tab) {
    color: var(--text-secondary) !important;
    border-color: transparent !important;
    border-radius: 9px !important;
}

:where(.tab-btn.active, .tabs a.active, .nav-tab.active, .rpt-tab.active, .rec-tab.active, .est-tab.active, .aprv-tab.active, .settings-tab.active, .portal-tab.active) {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-xs) !important;
}

:where(.dropdown-menu, .custom-select-menu, .project-menu, .customer-dropdown, .tax-dropdown, .notifications-dropdown) {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.10) !important;
}

:where(.dropdown-item, .custom-select-option, .project-menu-item, .customer-option, .tax-option) {
    color: var(--text-primary) !important;
    border-radius: 8px !important;
}

:where(.dropdown-item, .custom-select-option, .project-menu-item, .customer-option, .tax-option):hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

:where(.modal-backdrop, .drawer-backdrop, .portal-backdrop.active) {
    background: rgba(23,23,23,.38) !important;
    backdrop-filter: none !important;
}

:where(.kanban-board, .kanban-columns, .lead-kanban, .task-kanban) {
    background: var(--bg-app) !important;
    gap: 14px !important;
}

:where(.kanban-column, .lead-column, .task-column, .kanban-lane) {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xs) !important;
}

:where(.kanban-card, .lead-card, .task-card, .sprint-card) {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: none !important;
}

:where(.avatar, .user-avatar, .client-avatar, .staff-avatar, .rec-client-avatar, .portal-brand-logo) {
    background: var(--primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}

:where(.icon-box, .file-icon, .notif-icon, .timeline-icon, .stat-icon, .kpi-icon, .metric-icon, .pay-stat-icon, .rec-stat-icon, .est-stat-icon) {
    border-radius: 10px !important;
    background: var(--app-accent-soft) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

/* Override old inline primary-theme colors while preserving semantic status helpers. */
:where([style*="#4f46e5"], [style*="#4338ca"], [style*="#6366f1"], [style*="#7c3aed"], [style*="#8b5cf6"]) {
    border-color: var(--border) !important;
    box-shadow: none !important;
}

:where(a[style*="#4f46e5"], a[style*="#4338ca"], a[style*="#6366f1"], a[style*="#7c3aed"], a[style*="#8b5cf6"], span[style*="#4f46e5"], span[style*="#7c3aed"], div[style*="#4f46e5"], div[style*="#7c3aed"]) {
    color: var(--text-primary) !important;
}

:where(button[style*="#4f46e5"], button[style*="#4338ca"], button[style*="#6366f1"], button[style*="#2563eb"], button[style*="#7c3aed"], a[style*="background:#4f46e5"], a[style*="background:#4338ca"], a[style*="background:#2563eb"], a[style*="background:#7c3aed"]) {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

:where([style*="linear-gradient"][style*="#4f46e5"], [style*="linear-gradient"][style*="#6366f1"], [style*="linear-gradient"][style*="#7c3aed"], [style*="linear-gradient"][style*="#2563eb"]) {
    background: var(--primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}

:where(.badge, .status-chip, .status-badge, .status-pill, .priority-badge, .type-badge, .aprv-badge, .rec-bd, .est-bd) {
    box-shadow: none !important;
    text-transform: none !important;
}

/* Standalone portal/auth/error pages that do not use the main shell. */
.portal-sidebar {
    background: var(--bg-surface) !important;
    color: var(--text-secondary) !important;
    border-right: 1px solid var(--border) !important;
    box-shadow: none !important;
}

.portal-brand,
.portal-nav-section,
.portal-user {
    border-color: var(--border) !important;
}

.portal-brand-name,
.portal-nav-link,
.portal-user-name {
    color: var(--text-primary) !important;
}

.portal-brand-sub,
.portal-nav-label,
.portal-user-meta {
    color: var(--text-muted) !important;
}

.portal-nav-link.active,
.portal-nav-link:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.portal-content,
.portal-main {
    background: var(--bg-app) !important;
}

.portal-topbar {
    background: rgba(255,255,255,.96) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
}

.auth-shell,
.login-page,
.error-shell {
    background: var(--bg-app) !important;
}

.auth-card,
.login-card,
.error-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow-sm) !important;
}

@media print {
    .print-document,
    .invoice-document,
    .estimate-document {
        background: #fff !important;
        color: #111 !important;
    }
}

@media (max-width: 1180px) {
    .crm-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    :root {
        --content-padding: 14px;
    }

    .topbar-search,
    .topbar-user-name,
    .breadcrumb {
        display: none !important;
    }

    .crm-page-header {
        flex-direction: column;
    }

    .crm-kpi-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Batch Module Polish: Finance, HR, Docs, Agile, Infrastructure
   ============================================================ */

:where(
    .sp-page, .sp-board, .sp-card, .sp-column, .sp-sprint-card, .sp-backlog-card,
    .est-page, .est-card, .est-stat-card, .est-filter, .est-table-wrap,
    .rec-page, .rec-card, .rec-stat-card, .rec-filter, .rec-table-wrap,
    .pay-page, .pay-card, .pay-stat-card, .pay-filter, .pay-table-wrap,
    .infra-page, .infra-kpi-card, .infra-card, .server-card, .subscription-card,
    .docs-page, .docs-kpi, .docs-card, .docs-table-wrap,
    .aprv-page, .aprv-kpi, .aprv-filter-bar, .aprv-modal,
    .agr-kpi-card, .agr-filter-bar, .leave-kpi,
    .year-tabs, .year-tab, .bk-chip,
    .branch-card, .announcement-card
) {
    box-shadow: var(--shadow-xs) !important;
}

:where(.sp-title, .est-title, .rec-title, .pay-title, .infra-title, .docs-title, .aprv-title) {
    color: var(--text-primary) !important;
    font-size: 24px !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
}

:where(
    .sp-card, .sp-column, .sp-sprint-card, .sp-backlog-card,
    .est-stat-card, .est-filter-bar, .est-table-wrap,
    .rec-stat-card, .rec-filter-bar, .rec-table-wrap,
    .pay-stat-card, .pay-filter-bar, .pay-table-wrap,
    .infra-kpi-card, .infra-card,
    .docs-kpi, .docs-filter-bar, .docs-table-wrap,
    .aprv-kpi, .aprv-filter-bar,
    .agr-kpi-card, .agr-filter-bar,
    .leave-kpi, .year-tabs, .bk-chip
) {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
}

:where(
    .sp-tab.active, .sp-filter-btn, .sp-btn-primary,
    .est-tab.active, .est-btn-primary,
    .rec-tab.active, .rec-btn-primary,
    .pay-tab.active, .pay-btn-primary,
    .docs-upload-btn,
    .year-tab.active, .year-tab:hover,
    .aprv-tab.active
) {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}

:where(
    .sp-tab, .est-tab, .rec-tab, .pay-tab, .aprv-tab,
    .year-tab, .ql-btn, .rec-btn-blue, .rec-btn-purple, .est-btn-blue,
    .est-btn-purple, .pay-btn-blue
) {
    background: var(--bg-surface) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

:where(
    .sp-table, .est-table, .rec-table, .pay-table, .docs-table,
    .infra-table, .subscription-table, .server-table
) {
    width: 100% !important;
    border-collapse: collapse !important;
    background: var(--bg-surface) !important;
}

:where(
    .sp-table, .est-table, .rec-table, .pay-table, .docs-table,
    .infra-table, .subscription-table, .server-table
) thead {
    background: var(--bg-subtle) !important;
}

:where(
    .sp-table, .est-table, .rec-table, .pay-table, .docs-table,
    .infra-table, .subscription-table, .server-table
) th {
    color: var(--text-secondary) !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

:where(
    .sp-table, .est-table, .rec-table, .pay-table, .docs-table,
    .infra-table, .subscription-table, .server-table
) td {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border) !important;
}

:where(.sp-stat-icon, .est-stat-icon, .rec-stat-icon, .pay-stat-icon, .docs-kpi-icon, .infra-kpi-icon, .att-kpi-icon, .agr-kpi-icon) {
    background: var(--bg-subtle) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
}

:where(.sp-stat-value, .est-stat-value, .rec-stat-value, .pay-stat-value, .kpi-value, .sc-val) {
    color: var(--text-primary) !important;
}

:where(.sp-empty, .est-empty, .rec-empty, .pay-empty, .docs-empty, .infra-empty) {
    background: var(--bg-surface) !important;
    border: 1px dashed var(--border-strong) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--text-secondary) !important;
}

:where(.sp-more-btn, .rec-more-btn, .est-more-btn, .pay-more-btn, .docs-more-btn) {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

:where(.sp-dd, .rec-dd, .est-dd, .pay-dd, .docs-dd) {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.10) !important;
}

:where(.sp-dd-item, .rec-dd-item, .est-dd-item, .pay-dd-item, .docs-dd-item):hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

:where(.sp-progress, .est-progress, .rec-progress, .pay-progress, .infra-progress) {
    background: #f1f1f1 !important;
    border-radius: 999px !important;
}

:where(.sp-progress-fill, .est-progress-fill, .rec-progress-fill, .pay-progress-fill, .infra-progress-fill) {
    background: var(--primary) !important;
}

:where([style*="border-radius:18px"], [style*="border-radius:20px"], [style*="border-radius:24px"]) {
    border-radius: var(--radius-lg) !important;
}

:where([style*="box-shadow:0 4px"], [style*="box-shadow:0 8px"], [style*="box-shadow:0 6px"]) {
    box-shadow: var(--shadow-xs) !important;
}

:where([style*="border-left:4px solid #7c3aed"], [style*="border-left:4px solid #8b5cf6"], [style*="border-left:5px solid #3b82f6"]) {
    border-left-color: var(--border-strong) !important;
}

/* ============================================================
   Responsive Layout Repair: keep redesigned modules aligned
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

:where(
    .sp-page, .est-page, .rec-page, .pay-page, .infra-page, .docs-page,
    .ann-page, .aprv-page, .agr-page, .attendance-page, .reports-page,
    .comm-page
) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: grid;
    gap: 18px;
}

:where(.page-actions, .sp-actions, .est-actions, .rec-actions, .pay-actions, .infra-actions, .docs-actions, .ann-actions) {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end;
    gap: 8px !important;
    flex-wrap: wrap !important;
    min-width: 0;
}

:where(
    .crm-kpi-grid, .sp-stats, .est-stat-grid, .rec-stat-grid, .pay-stat-grid,
    .attendance-kpi-grid, .agr-kpi-grid, .aprv-kpi-grid, .kpi-row,
    .pl-kpis, .infra-kpi-grid, .branch-kpi-grid
) {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
}

:where(
    .crm-card, .crm-kpi-card, .sp-card, .sp-row, .sp-backlog-row,
    .est-stat-card, .rec-stat-card, .pay-stat-card, .infra-kpi-card,
    .docs-kpi, .agr-kpi-card, .aprv-kpi, .leave-kpi
) {
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
}

.crm-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: 18px;
}

.crm-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.crm-card-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 750;
    letter-spacing: 0;
}

.crm-card-subtitle {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.section-eyebrow {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.crm-table-wrap, .table-wrapper, .table-container, .table-responsive, .data-table-wrap,
.est-table-wrap, .rec-table-wrap, .pay-table-wrap, .docs-table-wrap, .ledger-table-wrap,
.ar-table-wrap, .pl-table-wrap, .aprv-table-wrap, .leave-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.crm-table, .est-table, .rec-table, .pay-table, .docs-table, .ledger-table,
.ar-table, .pl-table, .aprv-table, .leave-table, .infra-table, .subscription-table,
.server-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.crm-table {
    border-collapse: collapse;
    background: var(--bg-surface);
}

.crm-table th,
.crm-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.crm-table th {
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 650;
    background: var(--bg-subtle);
}

.text-right {
    text-align: right !important;
}

.table-entity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.entity-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.entity-avatar-square {
    border-radius: 10px;
}

.entity-copy,
.stacked-cell {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.entity-copy strong,
.stacked-cell span,
.stacked-cell a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-copy span,
.muted {
    color: var(--text-secondary);
    font-size: 12.5px;
}

.metric-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-primary);
    font-weight: 650;
    text-decoration: none;
}

.metric-link:hover,
.stacked-cell a:hover {
    color: var(--primary);
}

.crm-empty-state {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 34px 18px;
    color: var(--text-secondary);
    text-align: center;
}

.crm-empty-state.compact {
    padding: 24px 12px;
}

.crm-empty-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.crm-empty-state h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 15px;
}

.crm-empty-state p {
    margin: 0;
    max-width: 420px;
}

.crm-progress {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bg-subtle);
}

.crm-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

.progress-row {
    display: grid;
    gap: 10px;
}

.progress-row > div:first-child,
.progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 13px;
}

.progress-row strong {
    color: var(--text-primary);
}

.sp-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr) !important;
    gap: 16px !important;
    align-items: start !important;
    min-width: 0;
}

.sp-list,
.sp-backlog-list {
    display: grid;
    gap: 10px;
}

.sp-row,
.sp-backlog-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

.sp-row.is-active {
    background: var(--bg-subtle);
}

.sp-row-main,
.sp-backlog-main {
    display: grid;
    gap: 7px;
    min-width: 0;
    flex: 1 1 auto;
}

.sp-row-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sp-row-title strong,
.sp-backlog-main a {
    color: var(--text-primary);
    text-decoration: none;
}

.sp-row-title strong {
    font-size: 14px;
}

.sp-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: 12px;
}

.sp-row p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

.sp-row-progress {
    max-width: 260px;
}

.compact-select,
.sp-project-select {
    width: auto !important;
    min-width: 180px;
    max-width: 260px;
}

.compact-select {
    min-width: 132px;
    height: 34px !important;
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

:where(.est-search-wrap, .rec-search-wrap, .pay-search-wrap, .docs-search-wrap, .att-search-wrap) {
    width: 100% !important;
    max-width: 420px !important;
    min-width: 220px !important;
}

:where(.est-filter-bar, .rec-filter-bar, .pay-filter-bar, .docs-filter-bar, .agr-filter-bar, .aprv-filter-bar, .att-filter-bar) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}

:where(.est-filter-bar, .rec-filter-bar, .pay-filter-bar, .docs-filter-bar, .agr-filter-bar, .aprv-filter-bar, .att-filter-bar) :where(input, select, .form-control) {
    max-width: 100% !important;
}

@media (max-width: 980px) {
    .sp-grid {
        grid-template-columns: 1fr !important;
    }

    .crm-table, .est-table, .rec-table, .pay-table, .docs-table, .ledger-table,
    .ar-table, .pl-table, .aprv-table, .leave-table, .infra-table, .subscription-table,
    .server-table {
        min-width: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 640px) {
    .crm-card {
        padding: 14px;
    }

    .page-actions,
    .sp-row,
    .sp-backlog-row {
        width: 100%;
    }

    .page-actions > *,
    .sp-project-select,
    .compact-select {
        width: 100% !important;
        max-width: none !important;
    }

    .sp-row,
    .sp-backlog-row {
        flex-direction: column;
    }

    .td-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* ============================================================
   Application Shell: Sidebar, Topbar, Global Menus
   ============================================================ */

.app-wrapper {
    min-width: 0;
}

html.sidebar-collapsed-preload .sidebar {
    width: var(--sidebar-collapsed) !important;
}

html.sidebar-collapsed-preload .topbar {
    left: var(--sidebar-collapsed) !important;
}

html.sidebar-collapsed-preload .main-content {
    margin-left: var(--sidebar-collapsed) !important;
}

html.sidebar-collapsed-preload .sidebar-logo {
    justify-content: center;
    padding-inline: 10px !important;
}

html.sidebar-collapsed-preload .sidebar-logo-text,
html.sidebar-collapsed-preload .nav-section-label,
html.sidebar-collapsed-preload .nav-text,
html.sidebar-collapsed-preload .sidebar-user-info {
    display: none !important;
}

html.sidebar-collapsed-preload .nav-link {
    justify-content: center;
    padding-inline: 10px !important;
}

.sidebar {
    width: var(--sidebar-width) !important;
    color: var(--text-primary) !important;
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed) !important;
}

.sidebar-logo {
    min-height: var(--header-height) !important;
}

.sidebar-logo-text,
.sidebar-user-info,
.nav-text {
    min-width: 0;
}

.sidebar-logo-text strong,
.sidebar-user-name,
.nav-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar.collapsed .sidebar-logo {
    justify-content: center;
    padding-inline: 10px !important;
}

.sidebar.collapsed .sidebar-logo-img,
body.sidebar-collapsed .sidebar-logo-img,
html.sidebar-collapsed-preload .sidebar-logo-img {
    height: 36px !important;
    max-width: 40px !important;
    object-fit: cover !important;
    object-position: left center !important;
}

.sidebar.collapsed .nav-link {
    justify-content: center;
    padding-inline: 10px !important;
}

.sidebar.collapsed .sidebar-user {
    justify-content: center;
}

.sidebar-bottom {
    background: var(--bg-surface) !important;
    border-top: 1px solid var(--border) !important;
    padding: 10px 12px 12px !important;
}

.sidebar-user {
    width: 100%;
    min-height: 56px;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-xs) !important;
}

.sidebar-user:hover {
    background: var(--bg-hover) !important;
    border-color: var(--border-strong) !important;
}

.sidebar-user-avatar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex: 0 0 auto !important;
    border: 1px solid var(--border) !important;
    background: var(--primary) !important;
}

.sidebar-user-info {
    display: grid !important;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.sidebar-user-name {
    color: var(--text-primary) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2;
}

.sidebar-user-role {
    color: #8b8bb4 !important;
    font-size: 10.5px !important;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-chevron {
    color: var(--text-primary) !important;
    flex: 0 0 auto;
}

.sidebar.collapsed .sidebar-bottom {
    padding: 10px 8px 12px !important;
}

.sidebar.collapsed .sidebar-user {
    width: 48px;
    height: 48px;
    min-height: 48px;
    justify-content: center !important;
    gap: 0 !important;
    padding: 6px !important;
    position: relative;
    margin: 0 auto;
}

.sidebar.collapsed .sidebar-user-info {
    display: none !important;
}

.sidebar.collapsed .sidebar-user-avatar {
    width: 34px !important;
    height: 34px !important;
}

.sidebar.collapsed .sidebar-user-chevron {
    display: none !important;
}

.sidebar.collapsed .nav-section {
    margin: 8px 0;
}

.sidebar.collapsed .nav-link.active::before {
    display: none;
}

.sidebar-notif-count {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    border: 2px solid var(--bg-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.sidebar.collapsed .sidebar-notif-count {
    position: absolute;
    top: 7px;
    right: 8px;
    margin: 0;
    transform: scale(.92);
}

.topbar {
    left: var(--sidebar-width) !important;
    right: 0 !important;
    padding-inline: var(--content-padding) !important;
    gap: 12px !important;
}

.topbar.sidebar-collapsed {
    left: var(--sidebar-collapsed) !important;
}

.main-content {
    margin-left: var(--sidebar-width) !important;
    padding: var(--content-padding) !important;
}

.main-content.sidebar-collapsed {
    margin-left: var(--sidebar-collapsed) !important;
}

.sidebar-toggle,
.topbar-btn {
    flex: 0 0 auto;
}

.topbar-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end;
    gap: 6px !important;
    margin-left: auto !important;
    min-width: 0;
}

.topbar-search {
    position: relative;
    flex: 1 1 280px;
    min-width: 180px;
}

.topbar-search input {
    width: 100%;
    height: 100%;
    padding: 0 12px 0 36px !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--text-primary) !important;
}

.topbar-search input:focus {
    box-shadow: none !important;
}

.topbar-search:focus-within {
    border-color: var(--border-strong) !important;
    background: #fff !important;
}

.topbar-search-icon {
    left: 12px !important;
    color: var(--text-muted) !important;
}

.topbar-user {
    border: 1px solid var(--border) !important;
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    height: 38px !important;
    max-width: 220px;
}

.topbar-user:hover {
    background: var(--bg-hover) !important;
}

.topbar-user-avatar,
.sidebar-user-avatar {
    border: 1px solid var(--border) !important;
    background: var(--bg-subtle);
}

.topbar-user-name {
    max-width: 132px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary) !important;
}

.topbar-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 4px;
}

.topbar-branch {
    margin-right: 2px;
}

.topbar-scope-btn {
    height: 38px;
    max-width: 250px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
}

.topbar-scope-btn:hover {
    background: var(--bg-hover);
}

.topbar-scope-btn span {
    max-width: 170px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + 4px) !important;
    background: var(--bg-surface, #ffffff) !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .18), 0 4px 12px rgba(0, 0, 0, .08) !important;
    padding: 6px !important;
    min-width: 210px;
    z-index: 99999 !important;
}

.dropdown-menu.open {
    display: block !important;
}

.dropdown-menu.dropup {
    top: auto !important;
    bottom: calc(100% + 6px) !important;
    transform-origin: bottom right !important;
    box-shadow: 0 -18px 48px rgba(15, 23, 42, .20), 0 -4px 12px rgba(0, 0, 0, .08) !important;
}

.dropdown-label {
    padding: 7px 10px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.dropdown-item {
    min-height: 34px;
    border-radius: 8px;
    color: var(--text-primary) !important;
    font-size: 13px;
}

.dropdown-item:hover {
    background: var(--bg-hover) !important;
}

.dropdown-item.danger {
    color: var(--danger) !important;
}

.branch-menu {
    min-width: 260px !important;
}

.branch-option {
    width: 100%;
    border: 0;
    background: transparent;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-weight: 500;
    text-align: left;
}

.branch-option.is-selected {
    font-weight: 750;
    background: var(--bg-subtle) !important;
}

.notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(380px, calc(100vw - 24px));
    max-height: 520px;
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .14);
    display: none;
    z-index: 3100;
}

.notif-panel.open {
    display: block;
}

.notif-header,
.notif-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.notif-footer {
    border-top: 1px solid var(--border);
    border-bottom: 0;
}

.notif-title {
    font-weight: 750;
    color: var(--text-primary);
}

.notif-list {
    max-height: 390px;
    overflow-y: auto;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
}

.notif-item:hover {
    background: var(--bg-hover);
}

.notif-icon-wrap {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.mobile-overlay {
    background: rgba(15, 23, 42, .36) !important;
    backdrop-filter: blur(2px);
}

@media (min-width: 901px) {
    .mobile-overlay,
    .mobile-overlay.active,
    #mobileOverlay,
    #mobileOverlay.active {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

body.soft-nav-loading .main-content {
    opacity: .72;
    transition: opacity 120ms ease;
}

body.soft-nav-loading .sidebar .nav-link {
    pointer-events: none;
}

.performance-track {
    height: 8px;
    background: #f3f4f6;
    border-radius: 999px;
    overflow: hidden;
}

.performance-bar {
    height: 100%;
    border-radius: inherit;
}

.performance-bar-sales {
    background: linear-gradient(90deg, #22c55e, #16a34a) !important;
}

.performance-bar-team {
    background: linear-gradient(90deg, #ec4899, #db2777) !important;
}

.performance-bar-customer {
    background: linear-gradient(90deg, #3b82f6, #2563eb) !important;
}

@media (max-width: 1180px) {
    .topbar-search {
        max-width: 280px;
    }

    .topbar-scope-btn span {
        max-width: 120px;
    }
}

@media (max-width: 900px) {
    .topbar {
        left: 0 !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    .sidebar {
        transform: translateX(-100%);
        width: min(292px, 86vw) !important;
        z-index: 4000 !important;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .mobile-overlay.active {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 3990 !important;
    }

    body.sidebar-open {
        overflow: hidden;
    }

    .breadcrumb {
        display: none !important;
    }

    .topbar-search {
        max-width: none;
    }
}

@media (max-width: 680px) {
    .topbar {
        padding-inline: 12px !important;
        gap: 8px !important;
    }

    .topbar-search,
    .topbar-branch,
    .topbar-divider,
    .topbar-user-name,
    .topbar-user svg {
        display: none !important;
    }

    .topbar-user {
        width: 38px !important;
        padding: 0 !important;
        justify-content: center;
    }

    .topbar-actions {
        gap: 4px !important;
    }

    .main-content {
        padding: 14px !important;
    }
}

/* ============================================================
   Unified Responsive Table Engine
   Desktop: Clean seamless display
   Mobile & Tablet: Smooth horizontal touch scroll with minimum readable column widths
   ============================================================ */
.table-wrap, .dash-table-wrap, .crm-table-wrap, .table-wrapper, .table-container,
.table-responsive, .data-table-wrap, .docs-table-wrap, .card-table,
.data-table-container, .est-table-wrap, .rec-table-wrap, .pay-table-wrap,
.ledger-table-wrap, .ar-table-wrap, .pl-table-wrap, .aprv-table-wrap,
.leave-table-wrap, .attendance-table-wrap, .my-att-table-wrap,
.branch-table-wrap, .comm-table-wrap, .payments-table-wrap,
.income-table-wrap, .recurring-table-wrap, .my-leaves-table-wrap,
.portal-table-wrap, .fin-table-wrap {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

@media (min-width: 901px) {
    .table-wrap, .dash-table-wrap, .crm-table-wrap, .table-wrapper, .table-container,
    .table-responsive, .data-table-wrap, .docs-table-wrap, .card-table,
    .data-table-container, .est-table-wrap, .rec-table-wrap, .pay-table-wrap,
    .ledger-table-wrap, .ar-table-wrap, .pl-table-wrap, .aprv-table-wrap,
    .leave-table-wrap, .attendance-table-wrap, .my-att-table-wrap,
    .branch-table-wrap, .comm-table-wrap, .payments-table-wrap,
    .income-table-wrap, .recurring-table-wrap, .my-leaves-table-wrap,
    .portal-table-wrap, .fin-table-wrap {
        overflow: visible !important;
    }
}

@media (max-width: 900px) {
    .table-wrap, .dash-table-wrap, .crm-table-wrap, .table-wrapper, .table-container,
    .table-responsive, .data-table-wrap, .docs-table-wrap, .card-table,
    .data-table-container, .est-table-wrap, .rec-table-wrap, .pay-table-wrap,
    .ledger-table-wrap, .ar-table-wrap, .pl-table-wrap, .aprv-table-wrap,
    .leave-table-wrap, .attendance-table-wrap, .my-att-table-wrap,
    .branch-table-wrap, .comm-table-wrap, .payments-table-wrap,
    .income-table-wrap, .recurring-table-wrap, .my-leaves-table-wrap,
    .portal-table-wrap, .fin-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px !important;
    }

    .table-wrap table, .dash-table-wrap table, .crm-table-wrap table, .table-wrapper table,
    .table-container table, .table-responsive table, .data-table-wrap table, .docs-table-wrap table,
    .card-table table, .data-table-container table, .est-table-wrap table, .rec-table-wrap table,
    .pay-table-wrap table, .ledger-table-wrap table, .ar-table-wrap table, .pl-table-wrap table,
    .aprv-table-wrap table, .leave-table-wrap table, .attendance-table-wrap table, .my-att-table-wrap table,
    .branch-table-wrap table, .comm-table-wrap table, .payments-table-wrap table,
    .income-table-wrap table, .recurring-table-wrap table, .my-leaves-table-wrap table,
    .portal-table-wrap table, .fin-table-wrap table,
    .crm-table, .data-table, .table, .dash-table, .docs-table,
    .est-table, .rec-table, .pay-table, .ledger-table, .ar-table, .pl-table,
    .aprv-table, .leave-table, .attendance-table, .my-att-table,
    .branch-table, .comm-table, .payments-table, .income-table,
    .recurring-table, .my-leaves-table, .portal-table, .fin-table {
        min-width: 680px !important;
        width: 100% !important;
    }
}

/* ============================================================
   CRM365 SweetAlert2 Theme Styles
   ============================================================ */
div.swal2-container {
    z-index: 100000 !important;
}

.crm-swal-popup {
    border-radius: 20px !important;
    padding: 28px 24px !important;
    font-family: var(--font-sans, "Inter", sans-serif) !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.25) !important;
    max-width: 440px !important;
}

.crm-swal-title {
    font-size: 19px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
    margin: 12px 0 6px !important;
    padding: 0 !important;
}

.crm-swal-html {
    font-size: 14px !important;
    color: #64748b !important;
    line-height: 1.55 !important;
    margin: 8px 0 20px !important;
    padding: 0 8px !important;
}

.crm-swal-actions {
    display: flex !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 16px !important;
    justify-content: center !important;
}

.crm-swal-btn-confirm {
    padding: 10px 22px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    min-width: 110px !important;
}

.crm-swal-btn-cancel {
    padding: 10px 20px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}

.crm-swal-btn-cancel:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Custom Styled Sweet Toast Notifications */
.crm-swal-toast {
    border-radius: 14px !important;
    padding: 12px 18px !important;
    font-family: var(--font-sans, "Inter", sans-serif) !important;
    background: #0f172a !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.22) !important;
}

.crm-swal-toast .swal2-title {
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 650 !important;
}

.crm-swal-toast .swal2-timer-progress-bar {
    background: #3b82f6 !important;
}

.crm-swal-animate-show {
    animation: crmSwalShow 220ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.crm-swal-animate-hide {
    animation: crmSwalHide 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes crmSwalShow {
    0% { transform: scale(0.92); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes crmSwalHide {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.92); opacity: 0; }
}

/* Hide all SweetAlert2 default unused inputs and any accidental custom select wrappers */
.swal2-container .custom-select-wrapper,
.swal2-container .custom-select-trigger,
.swal2-container .custom-select-dropdown,
.swal2-container select.swal2-select,
.swal2-container input.swal2-input:not(.swal2-input-active),
.swal2-container input.swal2-file,
.swal2-container div.swal2-range,
.swal2-container label.swal2-checkbox,
.swal2-container textarea.swal2-textarea {
    display: none !important;
}

/* Tooltip Popups */
.tooltip-popup {
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
    line-height: 1.2 !important;
    user-select: none !important;
}

/* ============================================================
   GLOBAL ENTERPRISE MOBILE RESPONSIVE ENGINE (ALL ADMIN PAGES)
   ============================================================ */

/* ============================================================
   GLOBAL ENTERPRISE MOBILE RESPONSIVE ENGINE (ALL ADMIN & PORTAL PAGES)
   ============================================================ */

/* Root & Layout Anti-Overflow Guard */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative !important;
}

.main-content, .portal-main, .app-layout, .main-wrapper {
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

/* Dashboard Core Base Rules */
.dash-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
}

.crm-dashboard-middle-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
}

.dash-chart-card,
.dash-goals-card {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.dash-deals-card {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.dash-deals-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible;
}

.dash-deals-table-wrap .table {
    width: 100% !important;
    table-layout: auto;
}

.dash-chart-svg-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 220px !important;
    margin-top: 10px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.dash-chart-svg {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.performance-track {
    width: 100% !important;
    max-width: 100% !important;
    background: var(--bg-subtle, #f1f5f9) !important;
    border-radius: 6px !important;
    height: 8px !important;
    overflow: hidden !important;
}

/* Medium Screens & Tablets (<= 1024px) */
@media (max-width: 1024px) {
    .dash-kpi-grid,
    .crm-kpi-grid,
    .kpi-grid,
    .portal-kpi-grid,
    div[class*="kpi-grid"],
    div[style*="repeat(4, minmax(0, 1fr))"],
    div[style*="repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .crm-dashboard-middle-grid,
    .crm-dashboard-grid,
    .dash-grid,
    .dash-main-grid,
    .crm-workspace-grid,
    .portal-workspace-grid,
    .crm-grid-2,
    div[style*="minmax(0, 1.8fr) minmax(300px, 1fr)"],
    div[style*="grid-template-columns:minmax(0, 1.8fr) minmax(300px, 1fr)"],
    div[style*="grid-template-columns: 1.65fr 1fr"],
    div[style*="grid-template-columns:1.65fr 1fr"],
    div[style*="grid-template-columns: 1.6fr 1fr"],
    div[style*="grid-template-columns:1.6fr 1fr"],
    div[style*="grid-template-columns: 1.5fr 1fr"],
    div[style*="grid-template-columns:1.5fr 1fr"],
    div[style*="grid-template-columns: 1.45fr 1fr"],
    div[style*="grid-template-columns:1.45fr 1fr"],
    div[style*="grid-template-columns: 1.85fr 1.15fr"],
    div[style*="grid-template-columns:1.85fr 1.15fr"],
    div[style*="grid-template-columns: 1.35fr 1fr"],
    div[style*="grid-template-columns:1.35fr 1fr"],
    div[style*="minmax(0, 1.45fr) minmax(320px, 1fr)"],
    div[style*="minmax(0, 1.45fr) minmax(300px, .85fr)"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .ticket-form-shell,
    .subscription-form-shell,
    .lead-form-shell,
    .invoice-form-shell,
    .agreement-form-shell {
        grid-template-columns: 1fr !important;
    }
}

/* Tablets & Mobile Breakpoint (<= 768px) */
@media (max-width: 768px) {
    .crm-page-header,
    .page-header,
    .dash-top-bar,
    .portal-page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    .crm-page-header .page-actions,
    .page-header .page-actions,
    .crm-page-header > div:last-child,
    .page-header > div:last-child,
    .dash-top-bar > div:last-child,
    .portal-page-header > div:last-child {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 8px !important;
        justify-content: stretch !important;
    }

    .crm-page-header .btn,
    .page-header .btn,
    .portal-page-header .btn {
        flex: 1 1 auto !important;
        justify-content: center !important;
    }

    /* Filter & Search Form Stacking */
    .filter-bar,
    .table-filters,
    .leads-filter-bar,
    .crm-filter-bar,
    form[method="GET"] {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .filter-bar input,
    .filter-bar select,
    .table-filters input,
    .table-filters select,
    .leads-filter-bar input,
    .leads-filter-bar select,
    form[method="GET"] input,
    form[method="GET"] select,
    form[method="GET"] div[style*="min-width"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* Dashboard Specific Responsive Rules */
    .dash-top-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .dash-chart-metrics {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 20px;
        flex-wrap: wrap;
        gap: 16px;
    }

    .dash-chart-metrics-left {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
    }

    .dash-top-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 8px !important;
    }

    .dash-top-actions .btn,
    .dash-top-actions .dropdown,
    .dash-top-actions .dropdown .btn {
        flex: 1 1 calc(50% - 8px) !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .dash-top-actions span {
        width: 100% !important;
        justify-content: center !important;
        order: 10 !important;
        margin-top: 4px !important;
    }

    .dash-chart-metrics {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }

    .dash-chart-metrics-left {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    .dash-chart-metrics-left > div {
        flex: 1 !important;
    }

    .dash-chart-metrics > span.btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    form[method="GET"] > div:last-child,
    .deals-filter-actions {
        display: flex !important;
        width: 100% !important;
        gap: 8px !important;
    }

    form[method="GET"] > div:last-child .btn,
    .deals-filter-actions .btn,
    .deals-filter-actions .dropdown,
    .deals-filter-actions .dropdown .btn {
        flex: 1 !important;
        width: 100% !important;
        justify-content: center !important;
    }

    .deals-filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .deals-filter-search {
        width: 100% !important;
        max-width: 100% !important;
    }

    .dash-deals-card {
        overflow: hidden !important;
    }

    .dash-deals-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        width: 100% !important;
    }

    .dash-deals-table-wrap .table {
        min-width: 680px !important;
    }

    /* Form Fields & Grids */
    .form-grid,
    .grid-2,
    .grid-3,
    .grid-4,
    div[style*="grid-template-columns:1fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns:repeat(2, minmax(0, 1fr))"],
    div[style*="grid-template-columns:repeat(2, 1fr)"],
    div[style*="grid-template-columns:repeat(3, 1fr)"],
    div[style*="grid-template-columns:repeat(4, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Kanban & Sprint Boards */
    .kanban-board,
    .sprint-board,
    .kanban-columns {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 16px !important;
        gap: 14px !important;
    }

    .kanban-col,
    .kanban-column,
    .sprint-col,
    .sprint-column {
        min-width: 285px !important;
        max-width: 320px !important;
        flex-shrink: 0 !important;
    }

    /* A4 Documents, Invoices & Agreements */
    .print-doc-canvas,
    .invoice-canvas,
    .agreement-canvas {
        overflow-x: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 12px 0 !important;
    }

    .print-page,
    .invoice-paper,
    .agreement-paper {
        min-width: 680px !important;
    }

    /* Modals */
    .modal-dialog,
    .modal-content,
    .crm-modal-content,
    .modal-card {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 10px auto !important;
        padding: 18px 16px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    /* Signature Pads */
    .signature-pad-container,
    .sign-pad-wrap {
        width: 100% !important;
        max-width: 100% !important;
    }

    canvas#signaturePad,
    .signature-pad canvas {
        width: 100% !important;
        height: auto !important;
        touch-action: none !important;
    }
}

/* Small Smart Phones (<= 540px) */
@media (max-width: 540px) {
    .dash-kpi-grid,
    .crm-kpi-grid,
    .kpi-grid,
    .portal-kpi-grid,
    div[class*="kpi-grid"],
    div[style*="repeat(4, minmax(0, 1fr))"],
    div[style*="repeat(4, 1fr)"],
    div[style*="repeat(2, minmax(0, 1fr))"],
    div[style*="repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .dash-chart-svg-wrap {
        height: 160px !important;
    }

    .crm-page-title,
    .page-title,
    .portal-page-title {
        font-size: 20px !important;
    }

    .crm-card,
    .card,
    .portal-card {
        padding: 14px !important;
        border-radius: 10px !important;
    }

    .btn,
    .btn-sm {
        font-size: 12.5px !important;
        padding: 7px 12px !important;
    }

    .status-chip {
        font-size: 10.5px !important;
        padding: 2px 7px !important;
    }
}