/* _content/NexaCRM.UI/Components/Controls/DensityToggle.razor.rz.scp.css */
.nc-density-toggle[b-kuyfqijuvb] {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill, 999px);
    border: 1px solid var(--border-color, rgba(148, 163, 184, 0.32));
    padding: 0.125rem;
    background: var(--surface-color, #ffffff);
    box-shadow: var(--shadow-soft-layer, 0 1px 3px rgba(15, 23, 42, 0.12));
    gap: 0.125rem;
}

.nc-density-toggle__option[b-kuyfqijuvb] {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-secondary, #4B5563);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-pill, 999px);
    cursor: pointer;
}

.nc-density-toggle__option i[b-kuyfqijuvb] {
    font-size: 0.95rem;
}

.nc-density-toggle__option.is-active[b-kuyfqijuvb] {
    background: var(--org-primary-soft, rgba(33, 83, 200, 0.12));
    color: var(--org-primary, #2153C8);
    box-shadow: inset 0 1px 0 rgba(33, 83, 200, 0.1);
}

.nc-density-toggle__option:not(.is-active):hover[b-kuyfqijuvb] {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-primary, #111827);
}

.nc-density-toggle__option:focus-visible[b-kuyfqijuvb] {
    outline: 2px solid var(--focus-ring, #2563EB);
    outline-offset: 2px;
}

.nc-density-toggle__text[b-kuyfqijuvb] {
    font-size: 0.875rem;
}

@media (max-width: 600px) {
    .nc-density-toggle__text[b-kuyfqijuvb] {
        display: none;
    }
}

:global([data-theme="dark"]) .nc-density-toggle[b-kuyfqijuvb] {
    background: rgba(17, 24, 39, 0.9);
    border-color: rgba(148, 163, 184, 0.24);
    box-shadow: 0 1px 0 rgba(2, 6, 23, 0.45);
}

:global([data-theme="dark"]) .nc-density-toggle__option.is-active[b-kuyfqijuvb] {
    background: rgba(59, 130, 246, 0.22);
    color: rgba(191, 219, 254, 0.94);
    box-shadow: inset 0 1px 0 rgba(59, 130, 246, 0.2);
}

:global([data-theme="dark"]) .nc-density-toggle__option:not(.is-active):hover[b-kuyfqijuvb] {
    background: rgba(148, 163, 184, 0.16);
    color: rgba(226, 232, 240, 0.92);
}

@media (prefers-reduced-motion: reduce) {
    .nc-density-toggle__option[b-kuyfqijuvb] {
        transition: none;
    }
}
/* _content/NexaCRM.UI/Components/Notifications/Banner.razor.rz.scp.css */
:host[b-ubo4xnia71] {
    display: block;
}

.nc-banner[b-ubo4xnia71] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-sm, 12px);
    padding: var(--space-sm, 12px) var(--space-md, 24px);
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--banner-border-color, rgba(33, 83, 200, 0.18));
    background: var(--banner-background, linear-gradient(135deg, rgba(33, 83, 200, 0.08) 0%, rgba(33, 83, 200, 0.02) 100%));
    color: var(--banner-text-color, var(--text-primary, #111827));
    box-shadow: var(--banner-shadow, 0 1px 2px rgba(15, 23, 42, 0.08));
    align-items: flex-start;
}

.nc-banner__icon[b-ubo4xnia71] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm, 8px);
    background-color: var(--banner-icon-surface, rgba(33, 83, 200, 0.12));
    color: var(--banner-icon-color, #2153C8);
    flex-shrink: 0;
}

.nc-banner__icon .bi[b-ubo4xnia71] {
    font-size: 1.1rem;
}

.nc-banner__body[b-ubo4xnia71] {
    display: grid;
    gap: 0.25rem;
}

.nc-banner__title[b-ubo4xnia71] {
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-base, 1rem);
    line-height: 1.4;
}

.nc-banner__description[b-ubo4xnia71] {
    font-size: 0.95rem;
    line-height: var(--body-line-height, 1.6);
    color: var(--banner-subtle-text, var(--text-secondary, #4B5563));
}

.nc-banner__actions[b-ubo4xnia71] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs, 6px);
    margin-left: auto;
}

.nc-banner__dismiss[b-ubo4xnia71] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target-min, 44px);
    height: var(--touch-target-min, 44px);
    border: none;
    background: transparent;
    border-radius: var(--radius-sm, 8px);
    color: inherit;
    cursor: pointer;
    transition: background-color var(--transition-fast, 0.15s ease);
}

.nc-banner__dismiss:hover[b-ubo4xnia71],
.nc-banner__dismiss:focus-visible[b-ubo4xnia71] {
    background: var(--hover-overlay, rgba(33, 83, 200, 0.12));
    outline: none;
}

.nc-banner[data-variant="success"][b-ubo4xnia71] {
    --banner-border-color: rgba(34, 197, 94, 0.3);
    --banner-background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(34, 197, 94, 0.03) 100%);
    --banner-icon-surface: rgba(34, 197, 94, 0.18);
    --banner-icon-color: #15803d;
}

.nc-banner[data-variant="warning"][b-ubo4xnia71] {
    --banner-border-color: rgba(234, 179, 8, 0.35);
    --banner-background: linear-gradient(135deg, rgba(234, 179, 8, 0.18) 0%, rgba(234, 179, 8, 0.05) 100%);
    --banner-icon-surface: rgba(234, 179, 8, 0.22);
    --banner-icon-color: #b45309;
    --banner-text-color: #78350f;
}

.nc-banner[data-variant="danger"][b-ubo4xnia71] {
    --banner-border-color: rgba(239, 68, 68, 0.35);
    --banner-background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(239, 68, 68, 0.05) 100%);
    --banner-icon-surface: rgba(239, 68, 68, 0.22);
    --banner-icon-color: #b91c1c;
    --banner-text-color: #7f1d1d;
}

.nc-banner[data-variant="info"][b-ubo4xnia71] {
    --banner-border-color: rgba(33, 83, 200, 0.25);
    --banner-background: linear-gradient(135deg, rgba(33, 83, 200, 0.12) 0%, rgba(33, 83, 200, 0.04) 100%);
    --banner-icon-surface: rgba(33, 83, 200, 0.18);
    --banner-icon-color: #2153C8;
}

:global([data-theme="dark"]) .nc-banner[b-ubo4xnia71] {
    --banner-background: linear-gradient(135deg, rgba(148, 163, 184, 0.18) 0%, rgba(30, 41, 59, 0.72) 100%);
    --banner-border-color: rgba(148, 163, 184, 0.24);
    --banner-text-color: rgba(226, 232, 240, 0.96);
    --banner-subtle-text: rgba(226, 232, 240, 0.76);
    --banner-shadow: none;
}

:global([data-theme="dark"]) .nc-banner[data-variant="info"][b-ubo4xnia71] {
    --banner-icon-color: #8db4ff;
    --banner-icon-surface: rgba(125, 176, 255, 0.32);
}

:global([data-theme="dark"]) .nc-banner[data-variant="success"][b-ubo4xnia71] {
    --banner-icon-color: #86efac;
    --banner-icon-surface: rgba(34, 197, 94, 0.32);
}

:global([data-theme="dark"]) .nc-banner[data-variant="warning"][b-ubo4xnia71] {
    --banner-icon-color: #fcd34d;
    --banner-icon-surface: rgba(234, 179, 8, 0.32);
}

:global([data-theme="dark"]) .nc-banner[data-variant="danger"][b-ubo4xnia71] {
    --banner-icon-color: #fca5a5;
    --banner-icon-surface: rgba(239, 68, 68, 0.32);
}

@media (max-width: 768px) {
    .nc-banner[b-ubo4xnia71] {
        grid-template-columns: auto 1fr;
        gap: var(--space-xs, 6px);
    }

    .nc-banner__actions[b-ubo4xnia71] {
        grid-column: 1 / -1;
        justify-content: flex-start;
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .nc-banner[b-ubo4xnia71] {
        padding: var(--space-sm, 12px) var(--space-sm, 12px);
    }

    .nc-banner__title[b-ubo4xnia71] {
        font-size: var(--font-size-sm, 0.95rem);
    }

    .nc-banner__description[b-ubo4xnia71] {
        font-size: 0.9rem;
    }
}
/* _content/NexaCRM.UI/Components/UI/FloatingActionButton.razor.rz.scp.css */
.fab-container[b-3gjut6qz95] {
    @apply fixed bottom-6 right-6 z-50;
}

.fab-main[b-3gjut6qz95] {
    @apply w-14 h-14 bg-blue-600 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer border-none;
    @apply flex items-center justify-center;
}

.fab-main:hover[b-3gjut6qz95] {
    @apply bg-blue-700 transform scale-110;
}

.fab-main:active[b-3gjut6qz95] {
    @apply transform scale-95;
}

.fab-icon[b-3gjut6qz95] {
    @apply transition-transform duration-300;
}

.fab-icon.rotated[b-3gjut6qz95] {
    @apply rotate-45;
}

/* Action Buttons Container */
.fab-actions[b-3gjut6qz95] {
    @apply absolute bottom-16 right-0 flex flex-col items-end gap-3;
    @apply transition-all duration-300 origin-bottom-right;
}

.fab-actions.hidden[b-3gjut6qz95] {
    @apply opacity-0 scale-0 pointer-events-none;
}

.fab-actions.visible[b-3gjut6qz95] {
    @apply opacity-100 scale-100 pointer-events-auto;
}

/* Individual Action Buttons */
.fab-action[b-3gjut6qz95] {
    @apply flex items-center justify-end gap-3 cursor-pointer border-none;
    @apply transition-all duration-200;
}

.fab-action-icon[b-3gjut6qz95] {
    @apply w-12 h-12 rounded-full shadow-lg flex items-center justify-center text-white;
    @apply transition-all duration-200;
}

.fab-action-label[b-3gjut6qz95] {
    @apply bg-gray-800 text-white px-3 py-2 rounded-lg text-sm font-medium shadow-lg;
    @apply opacity-0 transform translate-x-2 transition-all duration-200;
}

.fab-action:hover .fab-action-label[b-3gjut6qz95] {
    @apply opacity-100 translate-x-0;
}

.fab-action:hover .fab-action-icon[b-3gjut6qz95] {
    @apply transform scale-110;
}

.fab-action:active .fab-action-icon[b-3gjut6qz95] {
    @apply transform scale-95;
}

/* Color variations for different actions */
.call-fab .fab-action-icon[b-3gjut6qz95] {
    @apply bg-green-500;
}

.call-fab:hover .fab-action-icon[b-3gjut6qz95] {
    @apply bg-green-600;
}

.email-fab .fab-action-icon[b-3gjut6qz95] {
    @apply bg-blue-500;
}

.email-fab:hover .fab-action-icon[b-3gjut6qz95] {
    @apply bg-blue-600;
}

.meeting-fab .fab-action-icon[b-3gjut6qz95] {
    @apply bg-purple-500;
}

.meeting-fab:hover .fab-action-icon[b-3gjut6qz95] {
    @apply bg-purple-600;
}

.add-fab .fab-action-icon[b-3gjut6qz95] {
    @apply bg-orange-500;
}

.add-fab:hover .fab-action-icon[b-3gjut6qz95] {
    @apply bg-orange-600;
}

/* Background Overlay */
.fab-overlay[b-3gjut6qz95] {
    @apply fixed inset-0 bg-black bg-opacity-20 transition-all duration-300;
    z-index: -1;
}

.fab-overlay.hidden[b-3gjut6qz95] {
    @apply opacity-0 pointer-events-none;
}

.fab-overlay.visible[b-3gjut6qz95] {
    @apply opacity-100 pointer-events-auto;
}

/* Animation delays for staggered effect */
.fab-actions .fab-action:nth-child(1)[b-3gjut6qz95] {
    transition-delay: 0ms;
}

.fab-actions .fab-action:nth-child(2)[b-3gjut6qz95] {
    transition-delay: 50ms;
}

.fab-actions .fab-action:nth-child(3)[b-3gjut6qz95] {
    transition-delay: 100ms;
}

.fab-actions .fab-action:nth-child(4)[b-3gjut6qz95] {
    transition-delay: 150ms;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .fab-container[b-3gjut6qz95] {
        @apply bottom-4 right-4;
    }
    
    .fab-main[b-3gjut6qz95] {
        @apply w-12 h-12;
    }
    
    .fab-action-icon[b-3gjut6qz95] {
        @apply w-10 h-10;
    }
    
    .fab-action-label[b-3gjut6qz95] {
        @apply text-xs px-2 py-1;
    }
}

/* Small mobile screens */
@media (max-width: 480px) {
    .fab-container[b-3gjut6qz95] {
        @apply bottom-3 right-3;
    }
    
    .fab-main[b-3gjut6qz95] {
        @apply w-11 h-11;
    }
    
    .fab-action-icon[b-3gjut6qz95] {
        @apply w-9 h-9;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .fab-main[b-3gjut6qz95],
    .fab-actions[b-3gjut6qz95],
    .fab-action[b-3gjut6qz95],
    .fab-action-icon[b-3gjut6qz95],
    .fab-action-label[b-3gjut6qz95],
    .fab-overlay[b-3gjut6qz95] {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .fab-main[b-3gjut6qz95] {
        @apply border-2 border-white;
    }
    
    .fab-action-icon[b-3gjut6qz95] {
        @apply border-2 border-white;
    }
    
    .fab-action-label[b-3gjut6qz95] {
        @apply border border-white;
    }
}
/* _content/NexaCRM.UI/Components/UI/QuickActionsComponent.razor.rz.scp.css */
.quick-actions-container[b-afcuc6na50] {
    @apply flex flex-col gap-3;
    padding: clamp(0.75rem, 2vw, 1.25rem);
    border: 1px solid var(--ui-surface-border);
    background-color: var(--surface-color, #ffffff);
}

.quick-actions-wrapper[b-afcuc6na50] {
    @apply grid gap-3;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    align-items: stretch;
}

.quick-actions-feedback[b-afcuc6na50] {
    @apply text-sm text-slate-600;
    min-height: 1.25rem;
}

.quick-actions-toast[b-afcuc6na50] {
    @apply mt-3 flex items-center gap-3 rounded-lg bg-slate-900/90 text-white px-4 py-2 shadow-xl;
    backdrop-filter: blur(4px);
    max-width: 28rem;
    line-height: 1.35;
}

.quick-actions-toast__dismiss[b-afcuc6na50] {
    @apply bg-transparent border-none cursor-pointer text-white text-xl leading-none font-bold;
}

.quick-actions-sheet-backdrop[b-afcuc6na50] {
    @apply fixed inset-0 z-40 flex items-center justify-center bg-slate-900/40;
    backdrop-filter: blur(6px);
}

.quick-actions-sheet[b-afcuc6na50] {
    @apply flex flex-col gap-5 bg-white;
    width: min(90%, 28rem);
    border-radius: 1.25rem;
    padding: 1.5rem;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
}

.quick-actions-sheet__header[b-afcuc6na50] {
    @apply flex flex-col gap-2;
}

.quick-actions-sheet__header h3[b-afcuc6na50] {
    @apply text-lg font-semibold text-slate-900;
}

.quick-actions-sheet__header p[b-afcuc6na50] {
    @apply text-sm text-slate-600;
}

.quick-actions-sheet__actions[b-afcuc6na50] {
    @apply flex flex-col gap-3;
}

.quick-actions-sheet__primary[b-afcuc6na50] {
    @apply inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2.5 font-semibold text-white shadow-lg transition-colors;
}

.quick-actions-sheet__primary:hover[b-afcuc6na50],
.quick-actions-sheet__primary:focus-visible[b-afcuc6na50] {
    @apply bg-blue-700;
    outline: none;
}

.quick-actions-sheet__secondary[b-afcuc6na50] {
    @apply inline-flex items-center justify-center gap-2 rounded-lg border border-slate-300 px-4 py-2.5 font-semibold text-slate-700 transition-colors;
}

.quick-actions-sheet__secondary:hover[b-afcuc6na50],
.quick-actions-sheet__secondary:focus-visible[b-afcuc6na50] {
    @apply bg-slate-100;
    outline: none;
}

.quick-actions-sheet__tertiary[b-afcuc6na50] {
    @apply text-sm font-medium text-slate-500 hover:text-slate-700 transition-colors;
}

.quick-action-btn[b-afcuc6na50] {
    @apply flex items-center justify-center gap-2 px-3 py-2 rounded-lg border transition-all duration-200 cursor-pointer;
    min-height: 44px; /* Touch-friendly minimum size */
    min-width: 44px;
}

.quick-action-btn:hover[b-afcuc6na50] {
    @apply transform scale-105 shadow-lg;
}

.quick-action-btn:active[b-afcuc6na50] {
    @apply transform scale-95;
}

.action-icon[b-afcuc6na50] {
    @apply flex items-center justify-center;
    flex-shrink: 0;
}

.action-label[b-afcuc6na50] {
    @apply text-sm font-medium;
}

/* Call Action Styling */
.call-action[b-afcuc6na50] {
    @apply bg-green-500 border-green-500 text-white;
}

.call-action:hover[b-afcuc6na50] {
    @apply bg-green-600 border-green-600;
}

/* Email Action Styling */
.email-action[b-afcuc6na50] {
    @apply bg-blue-500 border-blue-500 text-white;
}

.email-action:hover[b-afcuc6na50] {
    @apply bg-blue-600 border-blue-600;
}

/* Meeting Action Styling */
.meeting-action[b-afcuc6na50] {
    @apply bg-purple-500 border-purple-500 text-white;
}

.meeting-action:hover[b-afcuc6na50] {
    @apply bg-purple-600 border-purple-600;
}

/* Mobile-specific styles */
@media (max-width: 767px) {
    .quick-actions-wrapper[b-afcuc6na50] {
        @apply grid gap-2;
        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    }

    .quick-actions-sheet-backdrop[b-afcuc6na50] {
        @apply items-end;
    }

    .quick-actions-sheet[b-afcuc6na50] {
        width: 100%;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .quick-action-btn[b-afcuc6na50] {
        @apply flex-1 min-w-0;
        min-height: 48px; /* Larger touch target on mobile */
    }
    
    .action-label[b-afcuc6na50] {
        @apply text-xs;
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    .quick-actions-container[b-afcuc6na50] {
        @apply grid gap-4;
        grid-template-columns: minmax(0, 1fr);
    }

    .quick-actions-wrapper[b-afcuc6na50] {
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    }
}

@media (min-width: 1201px) {
    .quick-actions-container[b-afcuc6na50] {
        @apply flex-row items-center;
        gap: 1rem;
    }

    .quick-actions-wrapper[b-afcuc6na50] {
        grid-template-columns: repeat(auto-fit, minmax(9rem, max-content));
        @apply flex items-center gap-3;
    }

    .quick-actions-wrapper[b-afcuc6na50] {
        display: flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quick-action-btn[b-afcuc6na50],
    .quick-actions-toast[b-afcuc6na50],
    .quick-actions-sheet[b-afcuc6na50],
    .quick-actions-sheet__primary[b-afcuc6na50],
    .quick-actions-sheet__secondary[b-afcuc6na50] {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Compact mode (no labels) */
.quick-actions-container.compact .quick-action-btn[b-afcuc6na50] {
    @apply px-2 py-2;
    min-width: 40px;
    min-height: 40px;
}

.quick-actions-container.compact .action-label[b-afcuc6na50] {
    @apply hidden;
}

/* Inline mode for table rows */
.quick-actions-container.inline[b-afcuc6na50] {
    @apply flex-row gap-1;
}

.quick-actions-container.inline .quick-action-btn[b-afcuc6na50] {
    @apply px-2 py-1 text-xs;
    min-width: 32px;
    min-height: 32px;
}

.quick-actions-container.inline .action-icon svg[b-afcuc6na50] {
    width: 16px;
    height: 16px;
}

/* Floating mode for overlay */
.quick-actions-container.floating[b-afcuc6na50] {
    @apply fixed bottom-4 right-4 flex-col gap-2 z-50;
}

.quick-actions-container.floating .quick-action-btn[b-afcuc6na50] {
    @apply rounded-full shadow-lg w-12 h-12 p-0;
}

.quick-actions-container.floating .action-label[b-afcuc6na50] {
    @apply hidden;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .quick-actions-container.floating[b-afcuc6na50] {
        @apply bottom-3 right-3;
    }
    
    .quick-actions-container.floating .quick-action-btn[b-afcuc6na50] {
        @apply w-10 h-10;
    }
}
/* _content/NexaCRM.UI/Pages/AllDbListPage.razor.rz.scp.css */
/* AllDbListPage responsive layout */

.all-db-list-page .table-hover tbody tr[b-nc7a8i3j31] {
    transition: background-color 0.3s ease;
}

.all-db-list-page .table-hover tbody tr:hover[b-nc7a8i3j31] {
    cursor: pointer;
    background-color: #f8f9fa;
}

.desktop-filter[b-nc7a8i3j31] {
    margin-bottom: 1.5rem;
}

.desktop-filter .filter-card[b-nc7a8i3j31] {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
    display: grid;
    gap: 24px;
}

.filter-row[b-nc7a8i3j31] {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: end;
}

.filter-row-dates[b-nc7a8i3j31] {
    border-top: 1px solid #f1f5f9;
    padding-top: 20px;
    margin-top: 8px;
}

.filter-item[b-nc7a8i3j31] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.filter-label[b-nc7a8i3j31] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
}

.filter-label-placeholder[b-nc7a8i3j31] {
    visibility: hidden;
}

.filter-input-group[b-nc7a8i3j31] {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 200px) minmax(180px, 1fr);
}

.filter-input-group .filter-select[b-nc7a8i3j31],
.filter-input-group .form-control[b-nc7a8i3j31] {
    min-width: 0;
}

.date-range-inputs[b-nc7a8i3j31] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.date-range-inputs .form-control[b-nc7a8i3j31] {
    max-width: 200px;
}

.date-divider[b-nc7a8i3j31] {
    font-weight: 600;
    color: #94a3b8;
}

.quick-filter-buttons[b-nc7a8i3j31] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.quick-filter-button[b-nc7a8i3j31] {
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    border-radius: 9999px;
    padding: 6px 18px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    transition: all 0.2s ease;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.quick-filter-button:hover[b-nc7a8i3j31],
.quick-filter-button.active[b-nc7a8i3j31] {
    background-color: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.28);
}

.results-toolbar[b-nc7a8i3j31] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.results-count[b-nc7a8i3j31] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.08em;
}

.count-number[b-nc7a8i3j31] {
    margin-left: 8px;
    font-size: 1.25rem;
    color: #2563eb;
}

.results-actions[b-nc7a8i3j31] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.results-actions .btn-outline-secondary[b-nc7a8i3j31] {
    border-color: #cbd5f5;
    color: #475569;
    font-weight: 600;
    padding: 8px 20px;
}

.results-actions .btn-outline-secondary:hover[b-nc7a8i3j31] {
    background-color: #e2e8f0;
    color: #1e293b;
}

.db-table-container[b-nc7a8i3j31] {
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}

@media (max-width: 1024px) {
    .filter-input-group[b-nc7a8i3j31] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .filter-row[b-nc7a8i3j31] {
        grid-template-columns: 1fr;
    }

    .results-toolbar[b-nc7a8i3j31] {
        flex-direction: column;
        align-items: flex-start;
    }

    .results-actions[b-nc7a8i3j31] {
        width: 100%;
        justify-content: flex-start;
    }
}
/* _content/NexaCRM.UI/Pages/AssignDbPage.razor.rz.scp.css */
.page-container[b-g5xmfj3eqf] {
    animation: fadeIn-b-g5xmfj3eqf 0.3s ease-in;
}

.btn-assign[b-g5xmfj3eqf] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-assign:hover[b-g5xmfj3eqf] {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

@keyframes fadeIn-b-g5xmfj3eqf {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* _content/NexaCRM.UI/Pages/BizManagementPage.razor.rz.scp.css */
.advanced-db[b-zknqaef88l] {
    display: flex;
    flex-direction: column;
    gap: var(--ui-density-gap-sm, 0.75rem);
    margin-inline: clamp(0.5rem, 2vw, 1rem);
    width: min(100%, 100vw);
    color: var(--text-primary, #111827);
}

.advanced-db__header[b-zknqaef88l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-density-gap-sm, 0.75rem);
}

.advanced-db__actions[b-zknqaef88l] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--ui-density-gap-sm, 0.75rem);
}

.advanced-db__density[b-zknqaef88l] {
    flex: 0 0 auto;
}

.advanced-db__header h1[b-zknqaef88l] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary, #111827);
    margin: 0;
}

:global(.advanced-db__banner)[b-zknqaef88l] {
    margin-block: 0.5rem 0.75rem;
    --banner-border-color: rgba(33, 83, 200, 0.22);
    --banner-background: linear-gradient(135deg, rgba(33, 83, 200, 0.12) 0%, rgba(33, 83, 200, 0.04) 100%);
    --banner-icon-surface: rgba(33, 83, 200, 0.16);
    --banner-icon-color: var(--org-primary, #2153C8);
}

:global(.advanced-db__banner .nc-banner__description)[b-zknqaef88l] {
    max-width: 72ch;
}

.advanced-db__header .toolbar[b-zknqaef88l] {
    display: flex;
    gap: var(--ui-density-gap-sm, 0.5rem);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.tabs[b-zknqaef88l] {
    display: flex;
    gap: var(--ui-density-gap-sm, 0.5rem);
    border-bottom: 1px solid var(--border-color, #E5E7EB);
}

.tab[b-zknqaef88l] {
    appearance: none;
    border: none;
    background: transparent;
    padding-block: calc(var(--ui-density-gap-sm, 0.75rem) / 1.5);
    padding-inline: clamp(0.5rem, 2vw, 0.75rem);
    border-bottom: 2px solid transparent;
    color: var(--text-secondary, #6B7280);
    font-weight: 600;
    cursor: pointer;
    transition: color var(--motion-duration-sm, 180ms) var(--motion-ease-standard, cubic-bezier(0.2, 0, 0, 1)),
        border-color var(--motion-duration-sm, 180ms) var(--motion-ease-standard, cubic-bezier(0.2, 0, 0, 1));
}

.tab:hover[b-zknqaef88l] {
    color: var(--text-primary, #374151);
}

.tab.active[b-zknqaef88l] {
    color: var(--text-primary, #111827);
    border-bottom-color: var(--org-primary, #2153C8);
}

.explore[b-zknqaef88l] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--ui-density-gap-md, 1rem);
}

.filters[b-zknqaef88l] {
    border: 1px solid var(--border-color, #E5E7EB);
    background: var(--surface-color, #FFFFFF);
    border-radius: var(--radius-sm, 8px);
    padding: calc(var(--ui-density-gap-sm, 0.75rem) + 0.125rem);
    display: flex;
    flex-direction: column;
    gap: var(--ui-density-gap-sm, 0.75rem);
    height: fit-content;
    box-shadow: var(--shadow-soft-layer, 0 2px 6px rgba(15, 23, 42, 0.12));
}

.filters :where(.form-control, .form-select)[b-zknqaef88l] {
    width: 100%;
}

.filter-group[b-zknqaef88l] {
    display: flex;
    flex-direction: column;
}

.filter-group label[b-zknqaef88l] {
    font-weight: 700;
    color: var(--text-primary, #374151);
    margin-bottom: calc(var(--ui-density-gap-sm, 0.75rem) / 3);
    font-size: 0.9rem;
}

.table td[b-zknqaef88l], .table th[b-zknqaef88l] {
    vertical-align: middle;
}

:global(.advanced-db[data-density] .table)[b-zknqaef88l] {
    font-size: calc(1rem * var(--ui-density-font-scale, 1));
}

:global(.advanced-db[data-density] .table > :not(caption) > * > *)[b-zknqaef88l] {
    padding-block: var(--ui-density-table-padding-y, 0.75rem);
    padding-inline: var(--ui-density-table-padding-x, 0.75rem);
    transition: padding var(--motion-duration-sm, 180ms) var(--motion-ease-standard, cubic-bezier(0.2, 0, 0, 1));
}

.placeholder[b-zknqaef88l] {
    border: 1px solid var(--border-color, #E5E7EB);
    background: var(--surface-color, #FFFFFF);
    border-radius: var(--radius-sm, 8px);
    padding: 2rem;
    text-align: center;
}

.placeholder h5[b-zknqaef88l] {
    color: var(--text-primary, #111827);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.placeholder p[b-zknqaef88l] {
    color: var(--text-secondary, #6B7280);
    margin-bottom: 1rem;
}

.card[b-zknqaef88l] {
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
    box-shadow: var(--shadow-soft-layer, 0 2px 6px rgba(15, 23, 42, 0.12));
}

.card-body[b-zknqaef88l] {
    padding: 1.25rem;
}

:global(.advanced-db[data-density] .toolbar .btn)[b-zknqaef88l] {
    transition: padding var(--motion-duration-sm, 180ms) var(--motion-ease-standard, cubic-bezier(0.2, 0, 0, 1));
    padding-inline: clamp(0.625rem, 2vw, 0.875rem);
}

@media (prefers-reduced-motion: reduce) {
    .tab[b-zknqaef88l] {
        transition: none;
    }

    :global(.advanced-db[data-density] .table > :not(caption) > * > *)[b-zknqaef88l],
    :global(.advanced-db[data-density] .toolbar .btn)[b-zknqaef88l] {
        transition: none;
    }
}

:global([data-theme="dark"]) .advanced-db__banner[b-zknqaef88l] {
    --banner-background: linear-gradient(135deg, rgba(46, 60, 107, 0.82) 0%, rgba(23, 37, 84, 0.88) 100%);
    --banner-border-color: rgba(148, 163, 184, 0.32);
    --banner-icon-surface: rgba(125, 176, 255, 0.26);
    --banner-icon-color: #9bb7ff;
    --banner-subtle-text: rgba(226, 232, 240, 0.78);
}

:global([data-theme="dark"]) .advanced-db .filters[b-zknqaef88l],
:global([data-theme="dark"]) .advanced-db .card[b-zknqaef88l],
:global([data-theme="dark"]) .advanced-db .placeholder[b-zknqaef88l] {
    background: linear-gradient(145deg, rgba(37, 42, 74, 0.96), rgba(26, 32, 58, 0.92));
    border-color: rgba(148, 163, 184, 0.24);
    box-shadow: 0 1px 0 rgba(2, 6, 23, 0.45);
}

:global([data-theme="dark"]) .advanced-db .placeholder h5[b-zknqaef88l] {
    color: rgba(226, 232, 240, 0.94);
}

:global([data-theme="dark"]) .advanced-db .placeholder p[b-zknqaef88l] {
    color: rgba(203, 213, 225, 0.8);
}

:global([data-theme="dark"]) .advanced-db .tab[b-zknqaef88l] {
    color: rgba(203, 213, 225, 0.78);
}

:global([data-theme="dark"]) .advanced-db .tab:hover[b-zknqaef88l] {
    color: rgba(226, 232, 240, 0.96);
}

:global([data-theme="dark"]) .advanced-db .tab.active[b-zknqaef88l] {
    border-bottom-color: #8db4ff;
}

@media (max-width: 991px) {
    .explore[b-zknqaef88l] {
        grid-template-columns: 1fr;
    }

    .filters[b-zknqaef88l] {
        order: 2;
    }
}

@media (max-width: 575px) {
    .advanced-db__header[b-zknqaef88l] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .advanced-db__header .toolbar[b-zknqaef88l] {
        width: 100%;
        flex-direction: column;
    }

    .advanced-db__header .toolbar button[b-zknqaef88l] {
        width: 100%;
    }
    
    .tabs[b-zknqaef88l] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
/* _content/NexaCRM.UI/Pages/BulkSmsPage.razor.rz.scp.css */
.sms-page[b-46ex605yak] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sms-card[b-46ex605yak] {
    background-color: #ffffff;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    padding: 1.75rem;
}

.sms-page-header[b-46ex605yak] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sms-page-title[b-46ex605yak] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sms-page-title .sms-title[b-46ex605yak] {
    font-weight: 700;
    font-size: 1.75rem;
    color: #111827;
    margin-bottom: 0;
}

.sms-page-title .sms-subtitle[b-46ex605yak] {
    margin-bottom: 0;
    color: #6b7280;
    font-size: 0.95rem;
}

.sms-stats-grid[b-46ex605yak] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.sms-stat-card[b-46ex605yak] {
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    background: linear-gradient(180deg, #f9fafc 0%, #eef2ff 100%);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sms-stat-label[b-46ex605yak] {
    font-size: 0.85rem;
    color: #6b7280;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.sms-stat-value[b-46ex605yak] {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1f2937;
}

.sms-warning[b-46ex605yak] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border: 1px solid #ffcfd5;
    background: linear-gradient(180deg, #fff6f6 0%, #ffe6eb 100%);
    color: #b91c1c;
}

.sms-warning-icon[b-46ex605yak] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f87171;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.sms-warning-title[b-46ex605yak] {
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.sms-warning-text[b-46ex605yak] {
    color: #b45309;
    line-height: 1.5;
}

.sms-content-grid[b-46ex605yak] {
    display: grid;
    gap: 1.5rem;
}

.sms-message-card[b-46ex605yak],
.sms-address-card[b-46ex605yak] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sms-section-title[b-46ex605yak] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sms-section-badge[b-46ex605yak] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(180deg, #4f46e5 0%, #6366f1 100%);
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.sms-phone-preview[b-46ex605yak] {
    display: flex;
    justify-content: center;
}

.sms-phone-shell[b-46ex605yak] {
    position: relative;
    width: min(280px, 100%);
    background: linear-gradient(160deg, #0f172a 0%, #1f2937 100%);
    border-radius: 36px;
    padding: 2rem 1.25rem 1.5rem;
    color: #ffffff;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.35);
}

.sms-phone-notch[b-46ex605yak] {
    position: absolute;
    top: 1.1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 35%;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
}

.sms-phone-header[b-46ex605yak] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    opacity: 0.85;
}

.sms-phone-sender[b-46ex605yak] {
    font-weight: 600;
}

.sms-phone-screen[b-46ex605yak] {
    background: #f1f5f9;
    border-radius: 24px;
    padding: 1.25rem 1rem;
    color: #1f2937;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.sms-preview-bubble[b-46ex605yak] {
    background: #ffffff;
    border-radius: 20px;
    border-bottom-left-radius: 6px;
    padding: 1rem;
    box-shadow: 0 12px 30px rgba(148, 163, 184, 0.35);
}

.sms-preview-bubble pre[b-46ex605yak] {
    margin: 0;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.55;
}

.sms-preview-hint[b-46ex605yak] {
    font-size: 0.75rem;
    color: #64748b;
}

.sms-phone-input[b-46ex605yak] {
    margin-top: 1.25rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    padding: 0.65rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
}

.sms-phone-placeholder[b-46ex605yak] {
    color: rgba(255, 255, 255, 0.65);
}

.sms-phone-send[b-46ex605yak] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #22c55e;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
}

.sms-form-group[b-46ex605yak] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sms-template-description[b-46ex605yak] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: #4b5563;
}

.sms-placeholder-grid[b-46ex605yak] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.sms-placeholder-field[b-46ex605yak] {
    background: #f8fafc;
    border: 1px dashed #cbd5f5;
    border-radius: 16px;
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sms-message-textarea[b-46ex605yak] {
    min-height: 160px;
    border-radius: 16px;
    border: 1px solid #cbd5f5;
    padding: 1rem 1.1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sms-message-textarea:focus[b-46ex605yak] {
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

.sms-message-meta[b-46ex605yak] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #6b7280;
}

.sms-options[b-46ex605yak] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
}

.sms-send-footer[b-46ex605yak] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.sms-send-btn[b-46ex605yak] {
    min-width: 160px;
    border-radius: 999px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
}

.sms-progress[b-46ex605yak] {
    height: 10px;
    border-radius: 999px;
    background: #e5e7eb;
}

.sms-progress .progress-bar[b-46ex605yak] {
    border-radius: 999px;
    background: linear-gradient(90deg, #4f46e5 0%, #22c55e 100%);
}

.sms-address-actions[b-46ex605yak] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.sms-upload-wrapper[b-46ex605yak] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.sms-import-feedback[b-46ex605yak] {
    border-radius: 14px;
    background: #eef2ff;
    color: #4338ca;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
}

.sms-search-row[b-46ex605yak],
.sms-add-recipient[b-46ex605yak] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sms-search-row[b-46ex605yak] {
    margin-bottom: 0.75rem;
}

.sms-add-recipient[b-46ex605yak] {
    margin-bottom: 1rem;
}

.sms-table-wrapper[b-46ex605yak] {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    max-height: 420px;
    overflow-y: auto;
}

.sms-recipient-table[b-46ex605yak] {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.95rem;
}

.sms-recipient-table thead tr[b-46ex605yak] {
    background: #f5f7ff;
    color: #4c51bf;
}

.sms-recipient-table th[b-46ex605yak],
.sms-recipient-table td[b-46ex605yak] {
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
    padding: 0.85rem 1rem;
}

.sms-recipient-table tbody tr:last-child td[b-46ex605yak] {
    border-bottom: none;
}

.sms-recipient-table tbody tr:hover[b-46ex605yak] {
    background: #f8fafc;
}

.sms-recipient-table tbody tr.selected[b-46ex605yak] {
    background: #eef2ff;
    box-shadow: inset 3px 0 0 #6366f1;
}

.sms-recipient-tags[b-46ex605yak] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.sms-selected-summary[b-46ex605yak] {
    border-top: 1px solid #e5e7eb;
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.9rem;
    color: #4b5563;
}

@media (min-width: 992px) {
    .sms-content-grid[b-46ex605yak] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .sms-card[b-46ex605yak] {
        border-radius: 20px;
        padding: 1.5rem;
    }
}

@media (max-width: 767.98px) {
    .sms-page[b-46ex605yak] {
        gap: 1.25rem;
    }

    .sms-section-badge[b-46ex605yak] {
        width: 52px;
        height: 52px;
        border-radius: 14px;
    }

    .sms-send-footer[b-46ex605yak] {
        flex-direction: column;
        align-items: stretch;
    }

    .sms-send-btn[b-46ex605yak] {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .sms-card[b-46ex605yak] {
        padding: 1.25rem;
    }

    .sms-stats-grid[b-46ex605yak] {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .sms-phone-shell[b-46ex605yak] {
        width: min(240px, 100%);
        padding: 1.75rem 1rem 1.25rem;
    }

    .sms-placeholder-grid[b-46ex605yak] {
        grid-template-columns: 1fr;
    }
}
/* _content/NexaCRM.UI/Pages/ContactDetailPage.razor.rz.scp.css */
.history-item[b-gw6qtrvib4] {
    position: relative;
    padding: 10px 10px 10px 40px;
    border-left: 2px solid #e7ecf3;
}
.history-icon[b-gw6qtrvib4] {
    position: absolute;
    left: -12px;
    top: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #0d6efd;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
.history-item-body[b-gw6qtrvib4] {
    font-size: 0.95rem;
}
.history-item-meta[b-gw6qtrvib4] {
    font-size: 0.8rem;
    color: #6c757d;
}
/* _content/NexaCRM.UI/Pages/ContactsPage.razor.rz.scp.css */
.contacts-layout[b-7ze5w3ztjf] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg, 2rem);
}

.contacts-toolbar[b-7ze5w3ztjf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md, 1.25rem);
    justify-content: space-between;
}

.contacts-search[b-7ze5w3ztjf] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    padding: 0.6rem 0.85rem;
    border-radius: 0.85rem;
    background: var(--surface-muted, #f1f5f9);
    color: var(--text-secondary, #475569);
}

.contacts-search input[b-7ze5w3ztjf] {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary, #0f172a);
}

.contacts-search input:focus[b-7ze5w3ztjf] {
    outline: none;
}

.contacts-toolbar__button[b-7ze5w3ztjf] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs, 0.5rem);
    border: none;
    background: var(--primary-color, #2563eb);
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: 0.85rem;
    font-weight: 600;
    transition: transform var(--transition-fast, 0.18s), box-shadow var(--transition-fast, 0.18s);
}

.contacts-toolbar__button:hover[b-7ze5w3ztjf] {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(37, 99, 235, 0.24);
}

.contacts-table-container[b-7ze5w3ztjf] {
    border-radius: 1rem;
    border: 1px solid var(--divider-color, #e2e8f0);
    background: var(--surface-color, #ffffff);
    box-shadow: 0 20px 36px rgba(15, 23, 42, 0.08);
}

.contacts-table-wrapper[b-7ze5w3ztjf] {
    overflow-x: auto;
}

.contacts-table[b-7ze5w3ztjf] {
    width: 100%;
    border-collapse: collapse;
}

.contacts-table thead[b-7ze5w3ztjf] {
    background: var(--surface-muted, #f8fafc);
}

.contacts-table th[b-7ze5w3ztjf],
.contacts-table td[b-7ze5w3ztjf] {
    text-align: left;
    padding: 0.85rem 1rem;
    color: var(--text-primary, #0f172a);
    border-bottom: 1px solid var(--divider-color, #e2e8f0);
}

.contacts-loading[b-7ze5w3ztjf],
.contacts-empty[b-7ze5w3ztjf] {
    display: grid;
    place-items: center;
    padding: 4rem 0;
    color: var(--text-secondary, #475569);
    gap: var(--spacing-sm, 0.75rem);
}

.contacts-empty i[b-7ze5w3ztjf] {
    font-size: 2.5rem;
    color: var(--primary-color, #2563eb);
}

@media (max-width: 768px) {
    .contacts-toolbar[b-7ze5w3ztjf] {
        flex-direction: column;
        align-items: stretch;
    }

    .contacts-toolbar__button[b-7ze5w3ztjf] {
        width: 100%;
        justify-content: center;
    }

    .contacts-table-container[b-7ze5w3ztjf] {
        border-radius: 1.25rem;
    }
}
/* _content/NexaCRM.UI/Pages/CustomerConsultationNotes.razor.rz.scp.css */
.consultation-notes-container[b-x2k8kuahbo] {
    padding: 20px;
    background: #f8f9fa;
    min-height: 100vh;
}

.notes-header[b-x2k8kuahbo] {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.header-controls[b-x2k8kuahbo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.notes-title[b-x2k8kuahbo] {
    margin: 0;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-controls[b-x2k8kuahbo] {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.search-box[b-x2k8kuahbo] {
    position: relative;
    min-width: 250px;
}

.search-box .form-control[b-x2k8kuahbo] {
    padding-left: 35px;
}

.search-icon[b-x2k8kuahbo] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
}

.form-select[b-x2k8kuahbo] {
    min-width: 150px;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
}

.notes-content[b-x2k8kuahbo] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 20px;
}

.notes-grid[b-x2k8kuahbo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.note-card[b-x2k8kuahbo] {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px;
    background: white;
    transition: box-shadow 0.2s, transform 0.2s;
    cursor: pointer;
}

.note-card:hover[b-x2k8kuahbo] {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.note-card.high-priority[b-x2k8kuahbo] {
    border-left: 4px solid #fd7e14;
}

.note-card.urgent-priority[b-x2k8kuahbo] {
    border-left: 4px solid #dc3545;
}

.note-header[b-x2k8kuahbo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.note-title-section[b-x2k8kuahbo] {
    flex: 1;
}

.note-title[b-x2k8kuahbo] {
    margin: 0 0 5px 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    line-height: 1.2;
}

.note-meta[b-x2k8kuahbo] {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: #6c757d;
}

.contact-name[b-x2k8kuahbo] {
    font-weight: 500;
}

.note-actions[b-x2k8kuahbo] {
    display: flex;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.2s;
}

.note-card:hover .note-actions[b-x2k8kuahbo] {
    opacity: 1;
}

.note-content[b-x2k8kuahbo] {
    margin-bottom: 12px;
}

.note-preview[b-x2k8kuahbo] {
    margin: 0 0 10px 0;
    font-size: 14px;
    line-height: 1.4;
    color: #555;
}

.note-tags[b-x2k8kuahbo] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

.tag[b-x2k8kuahbo] {
    background-color: #e9ecef;
    color: #495057;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.note-footer[b-x2k8kuahbo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

.priority-badge[b-x2k8kuahbo] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.priority-low[b-x2k8kuahbo] {
    background-color: #d1ecf1;
    color: #0c5460;
}

.priority-medium[b-x2k8kuahbo] {
    background-color: #fff3cd;
    color: #856404;
}

.priority-high[b-x2k8kuahbo] {
    background-color: #f8d7da;
    color: #721c24;
}

.priority-urgent[b-x2k8kuahbo] {
    background-color: #f5c6cb;
    color: #721c24;
    animation: pulse-b-x2k8kuahbo 2s infinite;
}

@keyframes pulse-b-x2k8kuahbo {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.follow-up-badge[b-x2k8kuahbo] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background-color: #fff3cd;
    color: #856404;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.empty-state[b-x2k8kuahbo] {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.empty-icon[b-x2k8kuahbo] {
    font-size: 48px;
    margin-bottom: 20px;
    color: #dee2e6;
}

.empty-state h3[b-x2k8kuahbo] {
    margin: 0 0 10px 0;
    color: #495057;
}

.empty-state p[b-x2k8kuahbo] {
    margin: 0 0 20px 0;
    font-size: 16px;
}

/* Modal Styles */
.modal-backdrop[b-x2k8kuahbo] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content[b-x2k8kuahbo] {
    background: white;
    border-radius: 8px;
    padding: 20px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.note-modal[b-x2k8kuahbo] {
    max-width: 700px;
}

.note-details-modal[b-x2k8kuahbo] {
    max-width: 800px;
}

.note-details-modal .modal-header[b-x2k8kuahbo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #dee2e6;
}

.note-details-modal .note-title-section h4[b-x2k8kuahbo] {
    margin: 0 0 8px 0;
    color: #333;
}

.btn-close[b-x2k8kuahbo] {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close:hover[b-x2k8kuahbo] {
    color: #333;
}

.modal-body[b-x2k8kuahbo] {
    margin-bottom: 20px;
}

.note-full-content[b-x2k8kuahbo] {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 20px;
}

.detail-section[b-x2k8kuahbo] {
    margin-bottom: 15px;
}

.detail-section strong[b-x2k8kuahbo] {
    display: inline-block;
    margin-bottom: 5px;
    color: #495057;
}

.modal-footer[b-x2k8kuahbo] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    border-top: 1px solid #dee2e6;
    padding-top: 15px;
}

.btn[b-x2k8kuahbo] {
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-sm[b-x2k8kuahbo] {
    padding: 4px 8px;
    font-size: 12px;
}

.btn-success[b-x2k8kuahbo] {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
}

.btn-success:hover[b-x2k8kuahbo] {
    background-color: #218838;
    border-color: #1e7e34;
}

.btn-primary[b-x2k8kuahbo] {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

.btn-primary:hover[b-x2k8kuahbo] {
    background-color: #0069d9;
    border-color: #0062cc;
}

.btn-outline-primary[b-x2k8kuahbo] {
    color: #007bff;
    border-color: #007bff;
    background-color: transparent;
}

.btn-outline-primary:hover[b-x2k8kuahbo] {
    background-color: #007bff;
    color: white;
}

.btn-danger[b-x2k8kuahbo] {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

.btn-danger:hover[b-x2k8kuahbo] {
    background-color: #c82333;
    border-color: #bd2130;
}

.btn-outline-danger[b-x2k8kuahbo] {
    color: #dc3545;
    border-color: #dc3545;
    background-color: transparent;
}

.btn-outline-danger:hover[b-x2k8kuahbo] {
    background-color: #dc3545;
    color: white;
}

.btn-secondary[b-x2k8kuahbo] {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

.btn-secondary:hover[b-x2k8kuahbo] {
    background-color: #5a6268;
    border-color: #545b62;
}

/* Responsive Design */
@media (max-width: 768px) {
    .consultation-notes-container[b-x2k8kuahbo] {
        padding: 15px;
    }
    
    .notes-header[b-x2k8kuahbo] {
        padding: 15px;
    }
    
    .header-controls[b-x2k8kuahbo] {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    .notes-title[b-x2k8kuahbo] {
        justify-content: center;
        font-size: 1.3rem;
    }
    
    .search-controls[b-x2k8kuahbo] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .search-box[b-x2k8kuahbo] {
        min-width: auto;
    }
    
    .form-select[b-x2k8kuahbo] {
        min-width: auto;
        min-height: 44px; /* Ensure adequate touch target */
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    .btn[b-x2k8kuahbo] {
        min-height: 44px; /* Ensure minimum touch target size */
        min-width: 44px;
        font-size: 16px;
        padding: 12px 20px;
        border-radius: 8px;
        transition: all 0.2s ease;
    }
    
    .btn:active[b-x2k8kuahbo] {
        transform: scale(0.98);
        transition-duration: 0.1s;
    }
    
    .notes-grid[b-x2k8kuahbo] {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .note-card[b-x2k8kuahbo] {
        padding: 20px;
        border-radius: 12px;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    .note-card:active[b-x2k8kuahbo] {
        transform: scale(0.98);
        transition-duration: 0.1s;
    }
    
    .note-header[b-x2k8kuahbo] {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .note-actions[b-x2k8kuahbo] {
        opacity: 1;
        align-self: flex-end;
        gap: 8px;
    }
    
    .btn-sm[b-x2k8kuahbo] {
        min-height: 40px; /* Slightly smaller but still touch-friendly */
        min-width: 40px;
        padding: 8px 12px;
        font-size: 14px;
    }
    
    .modal-content[b-x2k8kuahbo] {
        width: 95%;
        max-width: 95vw;
        padding: 20px;
        margin: 20px auto;
        border-radius: 12px;
        max-height: 90vh;
    }
    
    .modal-footer[b-x2k8kuahbo] {
        flex-direction: column;
        gap: 12px;
    }
    
    .modal-footer .btn[b-x2k8kuahbo] {
        width: 100%;
        justify-content: center;
        font-weight: 500;
    }
    
    .note-preview[b-x2k8kuahbo] {
        font-size: 15px;
        line-height: 1.5;
    }
    
    .note-tags .tag[b-x2k8kuahbo] {
        font-size: 12px;
        padding: 4px 10px;
        margin: 2px;
        touch-action: manipulation;
    }
    
    .priority-badge[b-x2k8kuahbo],
    .follow-up-badge[b-x2k8kuahbo] {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* Very small screens (phones in portrait) */
@media (max-width: 480px) {
    .consultation-notes-container[b-x2k8kuahbo] {
        padding: 10px;
    }
    
    .notes-header[b-x2k8kuahbo] {
        padding: 12px;
    }
    
    .notes-title[b-x2k8kuahbo] {
        font-size: 1.2rem;
    }
    
    .note-card[b-x2k8kuahbo] {
        padding: 16px;
    }
    
    .search-box .form-control[b-x2k8kuahbo] {
        font-size: 16px;
        padding: 12px 40px 12px 16px;
        border-radius: 8px;
    }
    
    .modal-content[b-x2k8kuahbo] {
        width: 98%;
        padding: 16px;
        margin: 10px auto;
    }
    
    .btn[b-x2k8kuahbo] {
        font-size: 15px;
        padding: 14px 20px;
    }
    
    .btn-sm[b-x2k8kuahbo] {
        font-size: 13px;
        padding: 10px 14px;
    }
}
/* _content/NexaCRM.UI/Pages/CustomerFeedbackAndSurveyManagementTool.razor.rz.scp.css */
@container (max-width: 120px) {
    .table-cafe7f43-be03-44a9-b798-d6051697b66c-column-120[b-v4jx6ojmne] {
        display: none;
    }
}
@container (max-width: 240px) {
    .table-cafe7f43-be03-44a9-b798-d6051697b66c-column-240[b-v4jx6ojmne] {
        display: none;
    }
}
@container (max-width: 360px) {
    .table-cafe7f43-be03-44a9-b798-d6051697b66c-column-360[b-v4jx6ojmne] {
        display: none;
    }
}
@container (max-width: 480px) {
    .table-cafe7f43-be03-44a9-b798-d6051697b66c-column-480[b-v4jx6ojmne] {
        display: none;
    }
}
@container (max-width: 600px) {
    .table-cafe7f43-be03-44a9-b798-d6051697b66c-column-600[b-v4jx6ojmne] {
        display: none;
    }
}

/* Dashboard responsive behavior is provided by the shared ui/patterns.css bundle. */
/* _content/NexaCRM.UI/Pages/CustomerSegmentationTool.razor.rz.scp.css */
@container(max-width:120px){.table-8c706e97-b4c9-4119-aba8-0b6e72186853-column-120[b-c3f2ebz2gh]{display: none;}}
@container(max-width:240px){.table-8c706e97-b4c9-4119-aba8-0b6e72186853-column-240[b-c3f2ebz2gh]{display: none;}}
@container(max-width:360px){.table-8c706e97-b4c9-4119-aba8-0b6e72186853-column-360[b-c3f2ebz2gh]{display: none;}}
@container(max-width:480px){.table-8c706e97-b4c9-4119-aba8-0b6e72186853-column-480[b-c3f2ebz2gh]{display: none;}}
@container(max-width:600px){.table-8c706e97-b4c9-4119-aba8-0b6e72186853-column-600[b-c3f2ebz2gh]{display: none;}}
@container(max-width:720px){.table-8c706e97-b4c9-4119-aba8-0b6e72186853-column-720[b-c3f2ebz2gh]{display: none;}}

/* CustomerSegmentationTool responsive helpers augment the shared dashboard patterns. */

/* Mobile devices (767px and below) */
@media (max-width: 767.98px) {
    /* Mobile header navigation - convert to hamburger menu */
    .header-nav-links[b-c3f2ebz2gh] {
        display: none !important;
    }

    /* Adjust search and profile elements */
    .header-search[b-c3f2ebz2gh] {
        min-width: 120px !important;
        max-width: 150px !important;
    }
    
    .header-profile[b-c3f2ebz2gh] {
        width: 32px !important;
        height: 32px !important;
    }
    
    /* Mobile button adjustments */
    .header-help-button[b-c3f2ebz2gh] {
        padding: 0.5rem !important;
        min-width: 40px !important;
    }
}

/* Tablet devices (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .header-nav-links[b-c3f2ebz2gh] {
        gap: 0.5rem !important;
    }
    
    .header-nav-links a[b-c3f2ebz2gh] {
        font-size: 0.875rem !important;
    }
}

/* Small mobile devices (479px and below) */
@media (max-width: 479.98px) {
    .header-search[b-c3f2ebz2gh] {
        display: none !important;
    }

    .header-help-button[b-c3f2ebz2gh] {
        min-width: 36px !important;
        padding: 0.375rem !important;
    }
}
/* _content/NexaCRM.UI/Pages/CustomerSupportDashboard.razor.rz.scp.css */
@container(max-width:120px){.table-9ed4b39a-6a3d-4583-88e7-88e4b7fa83bd-column-120[b-7ir12e9ffj]{display: none;}}
@container(max-width:240px){.table-9ed4b39a-6a3d-4583-88e7-88e4b7fa83bd-column-240[b-7ir12e9ffj]{display: none;}}
@container(max-width:360px){.table-9ed4b39a-6a3d-4583-88e7-88e4b7fa83bd-column-360[b-7ir12e9ffj]{display: none;}}
@container(max-width:480px){.table-9ed4b39a-6a3d-4583-88e7-88e4b7fa83bd-column-480[b-7ir12e9ffj]{display: none;}}
@container(max-width:600px){.table-9ed4b39a-6a3d-4583-88e7-88e4b7fa83bd-column-600[b-7ir12e9ffj]{display: none;}}

/* Dashboard responsive behavior is provided by the shared ui/patterns.css bundle. */
/* _content/NexaCRM.UI/Pages/CustomerSupportTicketManagementInterface.razor.rz.scp.css */
@container(max-width:120px){.table-ab4db86c-7d5e-460d-9564-c0d12a81122e-column-120[b-uosc3ts8ac]{display: none;}}
@container(max-width:240px){.table-ab4db86c-7d5e-460d-9564-c0d12a81122e-column-240[b-uosc3ts8ac]{display: none;}}
@container(max-width:360px){.table-ab4db86c-7d5e-460d-9564-c0d12a81122e-column-360[b-uosc3ts8ac]{display: none;}}
@container(max-width:480px){.table-ab4db86c-7d5e-460d-9564-c0d12a81122e-column-480[b-uosc3ts8ac]{display: none;}}
@container(max-width:600px){.table-ab4db86c-7d5e-460d-9564-c0d12a81122e-column-600[b-uosc3ts8ac]{display: none;}}
@container(max-width:720px){.table-ab4db86c-7d5e-460d-9564-c0d12a81122e-column-720[b-uosc3ts8ac]{display: none;}}
/* _content/NexaCRM.UI/Pages/DbAdvancedManagementPage.razor.rz.scp.css */
.advanced-db[b-xqcje6rbb6] {
    display: flex;
    flex-direction: column;
    gap: var(--ui-density-gap-sm, 0.75rem);
    /* add subtle horizontal margins so content doesn't touch edges */
    margin-inline: clamp(0.5rem, 2vw, 1rem);
    width: min(100%, 100vw);
    color: var(--text-primary, #111827);
}

.advanced-db__header[b-xqcje6rbb6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-density-gap-sm, 0.75rem);
}

.advanced-db__actions[b-xqcje6rbb6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--ui-density-gap-sm, 0.75rem);
}

.advanced-db__density[b-xqcje6rbb6] {
    flex: 0 0 auto;
}

:global(.advanced-db__banner)[b-xqcje6rbb6] {
    margin-block: 0.5rem 0.75rem;
    --banner-border-color: rgba(33, 83, 200, 0.22);
    --banner-background: linear-gradient(135deg, rgba(33, 83, 200, 0.12) 0%, rgba(33, 83, 200, 0.04) 100%);
    --banner-icon-surface: rgba(33, 83, 200, 0.16);
    --banner-icon-color: var(--org-primary, #2153C8);
}

:global(.advanced-db__banner .nc-banner__description)[b-xqcje6rbb6] {
    max-width: 72ch;
}

.preview-action[b-xqcje6rbb6] {
    opacity: 0.88;
    transition: opacity var(--motion-duration-sm, 180ms) var(--motion-ease-standard, cubic-bezier(0.2, 0, 0, 1));
}

.preview-action:hover[b-xqcje6rbb6] {
    opacity: 1;
}

.advanced-db__header .toolbar[b-xqcje6rbb6] {
    display: flex;
    gap: var(--ui-density-gap-sm, 0.5rem);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.tabs[b-xqcje6rbb6] {
    display: flex;
    gap: var(--ui-density-gap-sm, 0.5rem);
    border-bottom: 1px solid var(--border-color, #E5E7EB);
}

.tab[b-xqcje6rbb6] {
    appearance: none;
    border: none;
    background: transparent;
    padding-block: calc(var(--ui-density-gap-sm, 0.75rem) / 1.5);
    padding-inline: clamp(0.5rem, 2vw, 0.75rem);
    border-bottom: 2px solid transparent;
    color: var(--text-secondary, #6B7280);
    font-weight: 600;
    cursor: pointer;
    transition: color var(--motion-duration-sm, 180ms) var(--motion-ease-standard, cubic-bezier(0.2, 0, 0, 1)),
        border-color var(--motion-duration-sm, 180ms) var(--motion-ease-standard, cubic-bezier(0.2, 0, 0, 1));
}

.tab:hover[b-xqcje6rbb6] {
    color: var(--text-primary, #374151);
}

.tab.active[b-xqcje6rbb6] {
    color: var(--text-primary, #111827);
    border-bottom-color: var(--org-primary, #2153C8);
}

.explore[b-xqcje6rbb6] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--ui-density-gap-md, 1rem);
}

.filters[b-xqcje6rbb6] {
    border: 1px solid var(--border-color, #E5E7EB);
    background: var(--surface-color, #FFFFFF);
    border-radius: var(--radius-sm, 8px);
    padding: calc(var(--ui-density-gap-sm, 0.75rem) + 0.125rem);
    display: flex;
    flex-direction: column;
    gap: var(--ui-density-gap-sm, 0.75rem);
    height: fit-content;
    box-shadow: var(--shadow-soft-layer, 0 2px 6px rgba(15, 23, 42, 0.12));
}

.filters :where(.form-control, .form-select)[b-xqcje6rbb6] {
    width: 100%;
}

.filter-group label[b-xqcje6rbb6] {
    font-weight: 700;
    color: var(--text-primary, #374151);
    margin-bottom: calc(var(--ui-density-gap-sm, 0.75rem) / 3);
    display: block;
}

.grid[b-xqcje6rbb6] {
    border: 1px solid var(--border-color, #E5E7EB);
    background: var(--surface-color, #FFFFFF);
    border-radius: var(--radius-sm, 8px);
    padding: clamp(0.5rem, var(--ui-density-gap-sm, 0.75rem), 0.75rem);
    box-shadow: var(--shadow-soft-layer, 0 2px 6px rgba(15, 23, 42, 0.12));
}

/* Dedupe tab */
.dedupe[b-xqcje6rbb6] { display: flex; flex-direction: column; gap: var(--ui-density-gap-sm, 0.75rem); }
.dedupe-controls[b-xqcje6rbb6] { display: flex; align-items: center; gap: var(--ui-density-gap-md, 1rem); flex-wrap: wrap; }
.dedupe-controls .hint[b-xqcje6rbb6] { font-size: 0.9rem; }
.action-cell[b-xqcje6rbb6] { white-space: nowrap; }
.table td[b-xqcje6rbb6], .table th[b-xqcje6rbb6] { vertical-align: middle; }
.table .action-btn[b-xqcje6rbb6] { font-size: 0.78rem; padding: 0.25rem 0.5rem; line-height: 1.2; border-radius: 0.35rem; }

:global(.advanced-db[data-density] .table)[b-xqcje6rbb6] {
    font-size: calc(1rem * var(--ui-density-font-scale, 1));
}

:global(.advanced-db[data-density] .table > :not(caption) > * > *)[b-xqcje6rbb6] {
    padding-block: var(--ui-density-table-padding-y, 0.75rem);
    padding-inline: var(--ui-density-table-padding-x, 0.75rem);
    transition: padding var(--motion-duration-sm, 180ms) var(--motion-ease-standard, cubic-bezier(0.2, 0, 0, 1));
}

:global(.advanced-db[data-density] .toolbar .btn)[b-xqcje6rbb6] {
    transition: padding var(--motion-duration-sm, 180ms) var(--motion-ease-standard, cubic-bezier(0.2, 0, 0, 1));
    padding-inline: clamp(0.625rem, 2vw, 0.875rem);
}

.modal-backdrop[b-xqcje6rbb6] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    display: grid;
    place-items: center;
    z-index: 1000;
}

.modal-panel[b-xqcje6rbb6] {
    width: min(720px, 92vw);
    background: var(--surface-color, #FFFFFF);
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--border-color, #E5E7EB);
    box-shadow: var(--shadow-deep-layer, 0 24px 48px rgba(15, 23, 42, 0.25));
    overflow: hidden;
}

.modal-header[b-xqcje6rbb6] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color, #E5E7EB);
}

.modal-body[b-xqcje6rbb6] {
    padding: 0.75rem 1rem;
}

.modal-footer[b-xqcje6rbb6] {
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    border-top: 1px solid var(--border-color, #E5E7EB);
}

.dedupe-info[b-xqcje6rbb6] {
    border: 1px solid var(--border-color, #E5E7EB);
    background: var(--surface-muted, #F9FAFB);
    border-radius: var(--radius-sm, 8px);
    padding: 0.75rem;
}

.dedupe-info .info-list[b-xqcje6rbb6] { margin: 0; padding-left: 1rem; display: grid; gap: 0.35rem; }
.dedupe-info .muted-small[b-xqcje6rbb6] {
    color: var(--text-secondary, #6B7280);
    font-size: 0.9rem;
    margin: 0.25rem 0;
}

@media (prefers-reduced-motion: reduce) {
    .tab[b-xqcje6rbb6],
    .preview-action[b-xqcje6rbb6] {
        transition: none;
    }

    :global(.advanced-db[data-density] .table > :not(caption) > * > *)[b-xqcje6rbb6],
    :global(.advanced-db[data-density] .toolbar .btn)[b-xqcje6rbb6] {
        transition: none;
    }
}

.rule-config[b-xqcje6rbb6] {
    border: 1px solid var(--border-color, #E5E7EB);
    background: var(--surface-color, #FFFFFF);
    border-radius: var(--radius-sm, 8px);
    padding: 0.5rem 0.75rem;
    box-shadow: var(--shadow-soft-layer, 0 2px 6px rgba(15, 23, 42, 0.12));
}

.rule-config > summary[b-xqcje6rbb6] {
    cursor: pointer;
    font-weight: 700;
    color: var(--text-primary, #111827);
}
.rule-grid[b-xqcje6rbb6] { display: grid; grid-template-columns: 1fr auto auto; gap: 0.5rem 0.75rem; align-items: center; margin-top: 0.5rem; }
.rule-row[b-xqcje6rbb6] { display: contents; }
.rule-row label[b-xqcje6rbb6] {
    font-weight: 600;
    color: var(--text-primary, #374151);
}
.rule-row input[type="number"][b-xqcje6rbb6] { width: 80px; }

/* Reuse status color tokens */
.status-text[b-xqcje6rbb6] { font-weight: 600; }
.status-new[b-xqcje6rbb6] { color: #2563EB; }
.status-inprogress[b-xqcje6rbb6] { color: #F59E0B; }
.status-noanswer[b-xqcje6rbb6] { color: #EF4444; }
.status-completed[b-xqcje6rbb6] { color: #10B981; }
.status-onhold[b-xqcje6rbb6] { color: #6B7280; }

:global([data-theme="dark"]) .advanced-db__banner[b-xqcje6rbb6] {
    --banner-background: linear-gradient(135deg, rgba(46, 60, 107, 0.82) 0%, rgba(23, 37, 84, 0.88) 100%);
    --banner-border-color: rgba(148, 163, 184, 0.32);
    --banner-icon-surface: rgba(125, 176, 255, 0.26);
    --banner-icon-color: #9bb7ff;
    --banner-subtle-text: rgba(226, 232, 240, 0.78);
}

:global([data-theme="dark"]) .advanced-db .filters[b-xqcje6rbb6],
:global([data-theme="dark"]) .advanced-db .grid[b-xqcje6rbb6],
:global([data-theme="dark"]) .advanced-db .rule-config[b-xqcje6rbb6],
:global([data-theme="dark"]) .advanced-db .dedupe-info[b-xqcje6rbb6] {
    background: linear-gradient(145deg, rgba(37, 42, 74, 0.96), rgba(26, 32, 58, 0.92));
    border-color: rgba(148, 163, 184, 0.24);
    box-shadow: 0 1px 0 rgba(2, 6, 23, 0.45);
}

:global([data-theme="dark"]) .advanced-db .dedupe-info .muted-small[b-xqcje6rbb6] {
    color: rgba(203, 213, 225, 0.8);
}

:global([data-theme="dark"]) .advanced-db .tab[b-xqcje6rbb6] {
    color: rgba(203, 213, 225, 0.78);
}

:global([data-theme="dark"]) .advanced-db .tab:hover[b-xqcje6rbb6] {
    color: rgba(226, 232, 240, 0.96);
}

:global([data-theme="dark"]) .advanced-db .tab.active[b-xqcje6rbb6] {
    border-bottom-color: #8db4ff;
}

:global([data-theme="dark"]) .modal-panel[b-xqcje6rbb6] {
    background: linear-gradient(155deg, rgba(30, 36, 64, 0.96), rgba(18, 24, 45, 0.9));
    border-color: rgba(148, 163, 184, 0.26);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
}

:global([data-theme="dark"]) .modal-header[b-xqcje6rbb6],
:global([data-theme="dark"]) .modal-footer[b-xqcje6rbb6] {
    border-color: rgba(148, 163, 184, 0.26);
}

@media (max-width: 991px) {
    .explore[b-xqcje6rbb6] { grid-template-columns: 1fr; }
}
/* _content/NexaCRM.UI/Pages/DbDistributionStatusPage.razor.rz.scp.css */
.table-responsive[b-f0q0d3ve58] {
    animation: fadeIn-b-f0q0d3ve58 0.3s ease-in;
}

.table-hover tbody tr[b-f0q0d3ve58] {
    transition: background-color 0.2s ease;
}

.table-hover tbody tr:hover[b-f0q0d3ve58] {
    background-color: #f8f9fa;
    cursor: pointer;
}

.action-btn[b-f0q0d3ve58] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.action-btn:hover[b-f0q0d3ve58] {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Align text and buttons neatly in action column */
.action-cell[b-f0q0d3ve58] {
    white-space: nowrap;
}

.table td[b-f0q0d3ve58],
.table th[b-f0q0d3ve58] {
    vertical-align: middle;
}

/* Standardize small action button sizing across DB tables */
.table .action-btn[b-f0q0d3ve58] {
    font-size: 0.78rem;
    padding: 0.25rem 0.5rem; /* slightly smaller than default for balance */
    line-height: 1.2;
    border-radius: 0.35rem;
}

@keyframes fadeIn-b-f0q0d3ve58 {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* _content/NexaCRM.UI/Pages/DemoContactsPage.razor.rz.scp.css */
.contacts-header[b-uniumrxmng] {
    background: var(--surface-color, #ffffff);
    border-bottom: 1px solid var(--divider-color, #e2e8f0);
}

.contacts-header h1[b-uniumrxmng],
.contacts-title[b-uniumrxmng] {
    margin: 0;
}

.contacts-table-container[b-uniumrxmng] {
    border-radius: 1rem;
    border: 1px solid var(--divider-color, #e2e8f0);
    background: var(--surface-color, #ffffff);
    box-shadow: 0 20px 36px rgba(15, 23, 42, 0.08);
}

.contacts-table[b-uniumrxmng] {
    width: 100%;
    border-collapse: collapse;
}

.contacts-table thead[b-uniumrxmng] {
    background: var(--surface-muted, #f8fafc);
}

.contacts-table th[b-uniumrxmng],
.contacts-table td[b-uniumrxmng] {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--divider-color, #e2e8f0);
    text-align: left;
}

.contacts-table tbody tr[b-uniumrxmng] {
    transition: background-color 0.2s ease;
}

.contacts-table tbody tr:hover[b-uniumrxmng] {
    background: var(--hover-overlay, rgba(148, 163, 184, 0.12));
}

@media (max-width: 768px) {
    .contacts-table-container[b-uniumrxmng] {
        border-radius: 1.25rem;
    }
}
/* _content/NexaCRM.UI/Pages/EmailTemplateBuilder.razor.rz.scp.css */
@media (max-width: 640px) {
    .block-grid[b-9oe036e113] {
        grid-template-columns: 1fr;
    }
}
/* _content/NexaCRM.UI/Pages/FaqManagementPage.razor.rz.scp.css */
.faq-table[b-oxw6m766ow] {
    width: 100%;
    border-collapse: collapse;
}

.faq-table th[b-oxw6m766ow],
.faq-table td[b-oxw6m766ow] {
    padding: 0.5rem;
    border: 1px solid #ddd;
}

.faq-actions[b-oxw6m766ow] {
    white-space: nowrap;
}

@media (max-width: 600px) {
    .faq-table th.faq-category-header[b-oxw6m766ow],
    .faq-table td.faq-category-cell[b-oxw6m766ow] {
        display: none;
    }

    .faq-table tbody tr[b-oxw6m766ow] {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 0.5rem;
    }

    .faq-table tbody td[b-oxw6m766ow] {
        display: block;
        border: none;
        padding: 0.25rem 0;
    }

    .faq-actions[b-oxw6m766ow] {
        display: flex;
        justify-content: flex-end;
        gap: 0.25rem;
    }

    .faq-form[b-oxw6m766ow] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .faq-form input[b-oxw6m766ow],
    .faq-form textarea[b-oxw6m766ow],
    .faq-form select[b-oxw6m766ow] {
        width: 100%;
    }

    .faq-form button[b-oxw6m766ow] {
        width: 100%;
    }
}
/* _content/NexaCRM.UI/Pages/LoginPage.razor.rz.scp.css */
.login-container[b-ms02x3otsd] {
    /* Balanced neutral grayscale palette (used across login view) */
    --neutral-50: #f9fafb; /* very light */
    --neutral-100: #f3f4f6;
    --neutral-200: #e5e7eb;
    --neutral-300: #d1d5db;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #0f1724; /* near-black */

    /* Brand accents are preserved but the base surfaces/text use the neutral scale */
    --brand-accent: var(--primary-color);
    --brand-accent-dark: var(--primary-hover);
    --brand-accent-soft: color-mix(in srgb, var(--brand-accent) 18%, transparent);
    --brand-gradient-start: color-mix(in srgb, var(--brand-accent) 86%, transparent);
    --brand-gradient-end: color-mix(in srgb, var(--neutral-900) 12%, transparent);

    /* Surface and text mapped onto neutral palette for consistent gray look */
    --surface-elevated: var(--neutral-50);
    --surface-muted-elevated: var(--neutral-100);
    --card-shadow: var(--shadow-soft, 0 18px 32px rgba(15, 23, 42, 0.06));
    --card-shadow-layer: var(--shadow-soft-layer, 0 2px 6px rgba(15, 23, 42, 0.08));
    --text-color: var(--neutral-900);
    --muted-color: rgba(55,65,81,0.78); /* balanced subtle gray for captions */
    --input-border: var(--neutral-200);
    --input-bg: var(--neutral-50);
    --input-placeholder: rgba(107,114,128,0.52);
    --input-focus-border: color-mix(in srgb, var(--brand-accent) 64%, var(--neutral-700) 36%);
    --divider-color-elevated: var(--neutral-200);
    --focus-ring-color: color-mix(in srgb, var(--brand-accent) 36%, transparent);
    --link-color: var(--neutral-700);
    /* Use flat button backgrounds instead of heavy gradients for a cleaner neutral UI */
    --button-gradient: var(--brand-accent);
    --button-gradient-hover: var(--brand-accent-dark);
    --button-shadow: var(--shadow-deep, 0 32px 64px rgba(15, 23, 42, 0.12));
    --spinner-track-color: color-mix(in srgb, var(--brand-accent) 18%, transparent);
    --spinner-color: color-mix(in srgb, var(--brand-accent) 86%, var(--neutral-900) 14%);
    --surface-radius-sm: var(--radius-sm, 8px);
    --surface-radius-md: var(--radius-md, 12px);
    --surface-radius-lg: var(--radius-lg, 18px);
    --surface-radius-pill: var(--radius-pill, 999px);
    font-family: var(--font-family-sans);
    /* page background: slight neutral tone to separate card visually */
    background: var(--neutral-100, #f3f4f6) !important;
    /* make the login containers fill the viewport to avoid background seams */
    width: min(100%, 100vw);
    min-height: 100dvh;
    color: var(--text-color);
    box-sizing: border-box;
    /* Ensure login container fills the full viewport from the top (0px) on
       small screens. Desktop/tablet layout remains controlled by the
       min-width media query below. */
    height: auto;
    padding: clamp(32px, 6vh, 58px) clamp(16px, 3.2vw, 40px);
    max-width: min(1220px, 92vw);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    overflow: visible;
    position: relative;
    isolation: isolate;
}

.login-container[b-ms02x3otsd]::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Decorative brand gradients removed to keep a clean neutral background */
    background: none;
    z-index: 0;
    pointer-events: none;
}

.login-container > *[b-ms02x3otsd] {
    position: relative;
    z-index: 1;
}

.mobile-login-container[b-ms02x3otsd] {
    overflow: hidden;
    height: 100%;
    min-height: 100%;
    padding: 0;
    width: min(100%, 100vw);
}

/* 이미지 섹션 - 모바일에서는 숨김 */
.login-image-section[b-ms02x3otsd] {
    display: none;
}

/* 데스크톱/태블릿에서는 컨텐츠에 맞게 높이 조절 */
@media (min-width: 769px) {
    .login-container[b-ms02x3otsd] {
        padding: clamp(2rem, 4.2vw, 4rem) clamp(1.2rem, 2.6vw, 2.6rem);
        min-height: 100dvh;
        display: grid;
        /* stronger left image emphasis so it intrudes more into the card */
        grid-template-columns: 70% minmax(320px, 480px);
        /* make the single grid row fill available height */
        grid-template-rows: 1fr;
        gap: clamp(12px, 2vw, 28px);
        margin: 0 auto;
        align-items: stretch;
        justify-items: stretch;
        /* center the grid block both vertically and horizontally */
        align-content: center;
        justify-content: center; /* 그리드 자체를 중앙 정렬 */
    }
    
    /* 왼쪽 이미지 영역 */
    .login-image-section[b-ms02x3otsd] {
        display: flex;
        position: relative;
        /* allow the enlarged backdrop to overflow into the right column so
           it can appear under the login card */
        overflow: visible;
        align-items: center;
        justify-content: center; /* center image content inside left column */
        /* reduce left padding so image appears larger and uses more real estate */
        padding: clamp(2rem, 4.2vw, 4rem) clamp(1.2rem, 2.6vw, 2.6rem);
        border-top-left-radius: var(--surface-radius-lg);
        border-bottom-left-radius: var(--surface-radius-lg);
        box-shadow: 0 36px 74px color-mix(in srgb, var(--primary-color) 16%, rgba(15, 23, 42, 0.28));
        width: 100%;
        max-width: min(1320px, 84vw);
        /* make the image column stretch to match the right column's height */
        height: 100%;
        align-self: stretch;
    }

    .login-image-backdrop[b-ms02x3otsd] {
        position: absolute;
        inset: 0;
        background-size: cover;
        /* wrapper uses dual layers for flicker-free image swapping */
        display: block;
        /* prioritize the right-side subject so it sits closer to the card */
        background-position: center right;
        background-repeat: no-repeat;
        opacity: 1;
        filter: saturate(1.05) contrast(1.12) brightness(1.05);
        animation: loginImageFade-b-ms02x3otsd 0.7s ease forwards;
        transform-origin: center;
        z-index: 0;
        /* conservative backdrop sizing to avoid extreme zoom while still allowing
         visible intrusion under the card. Tweak these values to increase/decrease
         overlap intensity. */
        width: 120%;
        height: 100%;
        transform: translateX(14%) scale(1.12);
        pointer-events: none;
    }

    /* Double-buffer image layers to avoid flicker during swaps */
    .image-wrap[b-ms02x3otsd] { position: absolute; inset: 0; overflow: hidden; }
    .image-layer[b-ms02x3otsd] {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center right;
        background-repeat: no-repeat;
        transition: opacity 480ms ease, transform 480ms ease;
        opacity: 0;
        will-change: opacity;
    }
    .image-layer.visible[b-ms02x3otsd] { opacity: 1; z-index: 2; }
    .image-layer[b-ms02x3otsd] { z-index: 1; }
    
    /* 이미지 위 그라데이션 오버레이 */
    .login-image-section[b-ms02x3otsd]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
                /* stronger overlay for text legibility over images */
                background: linear-gradient(180deg, rgba(6,10,18,0.36) 0%, rgba(6,10,18,0.18) 48%, rgba(6,10,18,0.28) 100%);
    }
    
    .login-image-content[b-ms02x3otsd] {
        text-align: center;
        color: #fff;
        z-index: 2;
        position: relative;
        padding: clamp(1rem, 2vw, 2rem);
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* align text toward card area */
        justify-content: center;
    }

    .login-image-title[b-ms02x3otsd] {
        font-size: 3rem;
        font-weight: 800;
        margin-bottom: 0.5rem;
        letter-spacing: -0.02em;
        text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        color: #ffffff;
    }

    .login-image-subtitle[b-ms02x3otsd] {
        font-size: 1.05rem;
        font-weight: 500;
        opacity: 0.95;
        letter-spacing: -0.01em;
        color: rgba(255,255,255,0.92);
    }
    
    /* 이미지 인디케이터 */
    .image-indicators[b-ms02x3otsd] {
        position: absolute;
        bottom: 2rem;
        left: 2rem;
        display: flex;
        gap: 0.75rem;
        z-index: 3;
    }
    .indicator-dot[b-ms02x3otsd] {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.9);
        background: rgba(255,255,255,0.18);
        cursor: pointer;
        transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
        padding: 0;
        display: inline-grid;
        place-items: center;
    }

    .indicator-dot:hover[b-ms02x3otsd] {
        background: rgba(255, 255, 255, 0.6);
        transform: scale(1.12);
    }

    .indicator-dot.active[b-ms02x3otsd] {
        background: rgba(255, 255, 255, 1);
        border-color: rgba(255, 255, 255, 1);
        box-shadow: 0 6px 18px rgba(0,0,0,0.22);
        transform: scale(1.06);
    }

    .indicator-dot:focus-visible[b-ms02x3otsd] {
        outline: none;
        box-shadow: 0 0 0 4px rgba(59,130,246,0.12), 0 0 0 2px rgba(255,255,255,0.14);
    }
    
    /* 오른쪽 로그인 폼 영역 */
    .mobile-login-card[b-ms02x3otsd] {
        width: 100%;
        max-width: 660px;
        /* let the grid row determine height; allow stretching */
        height: auto;
        border-radius: var(--surface-radius-lg);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: clamp(1.8rem, 3.2vw, 2.6rem);
        position: relative;
        /* ensure card visually sits above the expanded image */
        z-index: 20;
        overflow: visible;
        /* remove negative overlap — use shadow and border to separate card from image */
        margin-left: 0;
        align-self: stretch;
        justify-self: center;
        box-shadow: var(--card-shadow-layer), var(--shadow-deep, 0 32px 64px rgba(15, 23, 42, 0.14));
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .mobile-login-card[b-ms02x3otsd]::-webkit-scrollbar {
        display: none;
    }

    /* Slightly reduce right-column padding so the card doesn't appear pushed
       off the centered grid on narrower desktop widths */
    .login-container > .mobile-login-card[b-ms02x3otsd],
    .login-container > .mobile-login-card *[b-ms02x3otsd] {
        box-sizing: border-box;
    }
}

.mobile-login-card[b-ms02x3otsd] {
    width: 100%;
    max-width: 680px;
    background: var(--surface-elevated) !important;
    color: var(--text-color);
    border-radius: var(--surface-radius-lg);
    /* stronger but subtle border for clearer separation from page background */
    border: 1px solid var(--neutral-200);
    /* lighter, consistent shadow to give depth without heavy overlap */
    box-shadow: 0 12px 28px rgba(15,23,42,0.06), var(--card-shadow-layer);
    padding: clamp(2.25rem, 3.6vw, 3rem) clamp(1.8rem, 3.4vw, 2.6rem);
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: visible;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.mobile-login-card[b-ms02x3otsd]::-webkit-scrollbar {
    display: none;
}

.mobile-login-container button[b-ms02x3otsd],
.mobile-login-container input[b-ms02x3otsd] {
    min-height: unset;
    min-width: unset;
}

.mobile-login-container button[b-ms02x3otsd] {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.mobile-login-container input[b-ms02x3otsd] {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.brand-section[b-ms02x3otsd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    line-height: 1.35;
}

.brand-logo[b-ms02x3otsd] {
    font-size: clamp(2.25rem, 2.8vw, 2.75rem);
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    /* Use flat color for logo text to remove gradient effect */
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    color: var(--text-color);
}

/* Fallback for browsers that don't support background-clip:text (ensure logo is readable) */
/* Logo uses plain text color now; no gradient fallback required */

.brand-caption[b-ms02x3otsd] {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.45;
    color: var(--muted-color);
}

.mobile-form[b-ms02x3otsd] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.input-group[b-ms02x3otsd] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.input-label[b-ms02x3otsd] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted-color);
    letter-spacing: -0.02em;
}

.password-wrapper[b-ms02x3otsd] {
    position: relative;
}

.login-input[b-ms02x3otsd] {
    width: 100%;
    border-radius: var(--surface-radius-md);
    border: 1.5px solid var(--input-border);
    background: var(--input-bg);
    padding: 14px 18px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Ensure left rounded corners show for the username field inside input-group */
#login-username.login-input[b-ms02x3otsd] {
    border-top-left-radius: var(--surface-radius-md) !important;
    border-bottom-left-radius: var(--surface-radius-md) !important;
}

.login-input[b-ms02x3otsd]::placeholder {
    color: var(--input-placeholder);
}

.login-input:focus[b-ms02x3otsd] {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 4px var(--focus-ring-color);
    background: color-mix(in srgb, var(--neutral-white) 98%, transparent);
}

.password-toggle[b-ms02x3otsd] {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--link-color);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--surface-radius-pill);
}

.password-toggle:focus-visible[b-ms02x3otsd] {
    color: var(--link-color);
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring-color);
}

.remember-me[b-ms02x3otsd] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--muted-color);
    cursor: pointer;
}

.remember-checkbox[b-ms02x3otsd] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
    border-radius: var(--surface-radius-sm);
}

.login-error-message[b-ms02x3otsd] {
    border-radius: var(--surface-radius-md);
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: rgba(254, 226, 226, 0.65);
    color: #b91c1c;
    padding: 12px 16px;
    font-size: 0.95rem;
    font-weight: 500;
}

.login-button[b-ms02x3otsd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    border: none;
    border-radius: var(--surface-radius-pill);
    padding: 18px 18px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    color: var(--neutral-white);
    background: var(--button-gradient);
    box-shadow: var(--button-shadow);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease;
    position: relative; /* allow progress bar pseudo-element */
}

.login-button:hover:not(:disabled)[b-ms02x3otsd],
.login-button:active:not(:disabled)[b-ms02x3otsd] {
    transform: translateY(-2px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
    background: var(--button-gradient-hover);
    filter: brightness(1.05);
}

.login-button:focus-visible[b-ms02x3otsd] {
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-accent) 28%, transparent), var(--button-shadow);
}

/* Improve focus visibility for interactive controls */
.login-input:focus-visible[b-ms02x3otsd] {
    outline: none;
    box-shadow: 0 0 0 4px rgba(59,130,246,0.12);
}

.indicator-dot[b-ms02x3otsd] { /* ensure keyboard target size */
    min-width: 44px;
    min-height: 44px;
    padding: 0;
}

.login-button:disabled[b-ms02x3otsd] {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Ensure animate-spin class triggers the global spin keyframes */
.animate-spin[b-ms02x3otsd] {
    animation: spin 1s linear infinite;
    transform-origin: center;
}

/* Indeterminate progress bar shown at the bottom of the disabled (loading) login button */
.login-button:disabled[b-ms02x3otsd]::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%);
    background-size: 200% 100%;
    animation: progress-slide-b-ms02x3otsd 1.1s linear infinite;
    pointer-events: none;
    opacity: 0.95;
}

@keyframes progress-slide-b-ms02x3otsd {
    0% { background-position: 200% 0%; }
    100% { background-position: -200% 0%; }
}

.login-button .ripple-effect[b-ms02x3otsd],
.social-login-btn .ripple-effect[b-ms02x3otsd] {
    width: 180%;
    height: 180%;
    left: -40%;
    top: -40%;
    border-radius: var(--surface-radius-pill);
    opacity: 0.12;
}

.button-loading[b-ms02x3otsd] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--neutral-white);
}

/* When the spinner is used inside the primary login button, force
   the spinner to use the button's foreground (white) so it remains
   visible on a dark/brand background. */
.login-button .button-loading .loading-spinner svg[b-ms02x3otsd] {
    /* stronger pure white color and glow so the spinner is visible on
       dark/brand button backgrounds */
    color: #ffffff !important;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.18));
    opacity: 1 !important;
}

.login-button .button-loading .loading-spinner svg circle[b-ms02x3otsd] {
    stroke: rgba(255,255,255,0.65) !important;
    opacity: 1 !important;
}

.login-button .button-loading .loading-spinner svg path[b-ms02x3otsd] {
    fill: #ffffff !important;
    opacity: 1 !important;
}

.loading-spinner svg[b-ms02x3otsd] {
    width: 22px;
    height: 22px;
    color: var(--spinner-color);
    filter: drop-shadow(0 0 6px rgba(37, 99, 235, 0.28));
}

.loading-spinner svg circle[b-ms02x3otsd] {
    stroke: var(--spinner-track-color);
    opacity: 1;
}

.loading-spinner svg path[b-ms02x3otsd] {
    fill: var(--spinner-color);
    opacity: 1;
}

.login-helper-links[b-ms02x3otsd] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    font-size: 0.82rem;
    letter-spacing: 0.025em;
    color: var(--muted-color);
}

.login-link[b-ms02x3otsd] {
    color: var(--link-color);
    font-weight: 600;
    text-decoration: none;
}

.login-link:hover[b-ms02x3otsd] {
    color: var(--neutral-black);
    text-decoration: underline;
}

.divider-dot[b-ms02x3otsd] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--divider-color-elevated);
}

.login-divider[b-ms02x3otsd] {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted-color);
}

.login-divider[b-ms02x3otsd]::before,
.login-divider[b-ms02x3otsd]::after {
    content: "";
    flex: 1 1;
    height: 1px;
    background: var(--divider-color-elevated);
}

.social-login-grid[b-ms02x3otsd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: clamp(10px, 1vw, 12px);
    width: 100%;
    margin-top: 0;
    align-self: stretch;
}

.social-login-btn[b-ms02x3otsd] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: var(--surface-radius-md);
    border: 1px solid color-mix(in srgb, var(--divider-color-elevated) 80%, transparent);
    padding: 14px 10px;
    background: var(--surface-muted-elevated);
    box-shadow: var(--shadow-soft-layer);
    color: var(--muted-color);
    font-weight: 600;
    font-size: 0.78rem;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.social-login-btn:disabled[b-ms02x3otsd] {
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: none;
    transform: none;
}

.social-login-btn:disabled .social-text[b-ms02x3otsd] {
    color: var(--muted-color);
}

.social-login-btn:hover[b-ms02x3otsd],
.social-login-btn:active[b-ms02x3otsd] {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--surface-muted) 80%, var(--neutral-white) 20%);
    box-shadow: var(--shadow-deep-layer);
}

.social-login-btn:focus-visible[b-ms02x3otsd] {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring-color);
}

.social-icon[b-ms02x3otsd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

.social-icon svg[b-ms02x3otsd] {
    width: 100%;
    height: 100%;
}

.social-text[b-ms02x3otsd] {
    line-height: 1.2;
}

.social-login-notice[b-ms02x3otsd] {
    margin-top: 0; /* flex-gap으로 간격이 이미 적용되므로 불필요한 margin 제거 */
    text-align: center;
    font-size: 0.82rem;
    color: var(--muted-color);
    letter-spacing: 0.02em;
}

.naver-btn[b-ms02x3otsd] {
    color: #047e3a;
}

.google-btn[b-ms02x3otsd] {
    color: #3c4043;
}

.kakao-btn[b-ms02x3otsd] {
    color: #3b2418;
}

@media (max-width: 420px) {
    .login-container[b-ms02x3otsd] {
        padding: 32px 16px;
    }

    .mobile-login-card[b-ms02x3otsd] {
        padding: 28px 20px 32px;
        border-radius: var(--surface-radius-lg);
        gap: 20px;
    }

    .brand-section[b-ms02x3otsd] {
        gap: 8px;
    }

    .brand-logo[b-ms02x3otsd] {
        font-size: 32px;
        letter-spacing: 0.2em;
    }

    .brand-caption[b-ms02x3otsd] {
        font-size: 0.9rem;
    }

    .mobile-form[b-ms02x3otsd] {
        gap: 18px;
    }

    .input-group[b-ms02x3otsd] {
        gap: 6px;
    }

    .input-label[b-ms02x3otsd] {
        font-size: 0.78rem;
    }

    .login-input[b-ms02x3otsd] {
        padding: 12px 16px;
        font-size: 15px;
        border-radius: var(--surface-radius-md);
    }

    .password-toggle[b-ms02x3otsd] {
        right: 14px;
        font-size: 0.65rem;
    }

    .remember-me[b-ms02x3otsd] {
        gap: 10px;
        font-size: 0.8rem;
    }

    .remember-checkbox[b-ms02x3otsd] {
        width: 18px;
        height: 18px;
    }

    .login-button[b-ms02x3otsd] {
        font-size: 0.95rem;
        padding: 18px;
        border-radius: var(--surface-radius-pill);
        letter-spacing: 0.05em;
    }

    .button-loading[b-ms02x3otsd] {
        gap: 10px;
    }

    .login-helper-links[b-ms02x3otsd] {
        gap: 10px;
        font-size: 0.78rem;
    }

    .login-divider[b-ms02x3otsd] {
        gap: 12px;
        font-size: 0.7rem;
        letter-spacing: 0.16em;
    }

    .social-login-grid[b-ms02x3otsd] {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 10px;
    }

    .social-login-btn[b-ms02x3otsd] {
        gap: 10px;
        padding: 14px 10px;
        border-radius: var(--surface-radius-md);
        font-size: 0.75rem;
    }

    .social-icon[b-ms02x3otsd] {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 340px) {
    /* On extremely narrow screens, keep buttons compact and attempt to
       show three per row; if the viewport is too small, they will wrap but
       remain visually balanced and not clipped. */
    .social-login-grid[b-ms02x3otsd] {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
        gap: 6px;
    }

    .social-login-btn[b-ms02x3otsd] {
        min-width: 0;
        gap: 5px;
        padding: 9px 6px;
        border-radius: var(--surface-radius-sm);
        font-size: 0.66rem;
    }

    .social-icon[b-ms02x3otsd] {
        width: 32px;
        height: 32px;
    }
}

@keyframes loginImageFade-b-ms02x3otsd {
    0% {
        opacity: 0.4;
        transform: scale(1.015);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

[data-theme="dark"] .login-container[b-ms02x3otsd] {
    background: radial-gradient(circle at top, #1b1830 0%, #0c091b 100%);
    --brand-gradient-start: rgba(226, 232, 240, 0.92);
    --brand-gradient-end: rgba(148, 163, 184, 0.88);
    --surface-color: rgba(24, 22, 35, 0.95);
    --surface-muted: rgba(17, 24, 39, 0.72);
    --card-shadow: var(--shadow-deep, 0 32px 64px rgba(4, 8, 20, 0.7));
    --text-color: #f3f4f6;
    --muted-color: rgba(226, 232, 240, 0.78);
    --input-border: rgba(148, 163, 184, 0.38);
    --input-bg: rgba(17, 24, 39, 0.7);
    --input-placeholder: rgba(203, 213, 225, 0.7);
    --input-focus-border: rgba(96, 165, 250, 0.65);
    --divider-color: rgba(148, 163, 184, 0.3);
    --focus-ring-color: rgba(59, 130, 246, 0.35);
    --link-color: rgba(226, 232, 240, 0.92);
    --button-gradient: linear-gradient(160deg, rgba(96, 165, 250, 0.85) 0%, rgba(37, 99, 235, 0.95) 100%);
    --button-gradient-hover: linear-gradient(160deg, rgba(147, 197, 253, 0.9) 0%, rgba(29, 78, 216, 1) 100%);
    --button-shadow: 0 24px 44px rgba(15, 23, 42, 0.55);
}

[data-theme="dark"] .login-container .login-input[b-ms02x3otsd]::placeholder {
    color: rgba(203, 213, 225, 0.7);
}

[data-theme="dark"] .login-container .login-button[b-ms02x3otsd] {
    box-shadow: var(--button-shadow);
}

[data-theme="dark"] .login-container .social-login-btn[b-ms02x3otsd] {
    background: var(--surface-muted);
    box-shadow: var(--shadow-deep-layer);
}

[data-theme="dark"] .login-container .login-error-message[b-ms02x3otsd] {
    background: rgba(127, 29, 29, 0.35);
    border-color: rgba(248, 113, 113, 0.45);
    color: #fee2e2;
}
/* _content/NexaCRM.UI/Pages/ManagerDashboard.razor.rz.scp.css */
/* SalesManagerDashboard Mobile Responsive Styles (renamed for ManagerDashboard) */

/* Ensure page content sits below the fixed app-shell page header. This
   uses the runtime-updated --app-shell-page-header-offset variable so the
   stats-container and other content won't be occluded by the header. */
.layout-content-container[b-8qejtwi4ny] {
    margin-top: var(--app-shell-page-header-offset, 0px) !important;
}

/* Ensure the stats container (page-level summary cards) always begins
   below the fixed app-shell page header. We use the runtime-updated
   --app-shell-page-header-offset so the page remains robust to changes
   in header height across breakpoints and when hot-reloading. */
.layout-content-container .stats-container[b-8qejtwi4ny] {
    margin-top: calc(var(--app-shell-page-header-offset, 0px) + 0.5rem) !important;
    /* provide a small scroll margin so anchor-navigation doesn't put the
       stats behind the fixed header */
    scroll-margin-top: calc(var(--app-shell-page-header-offset, 0px) + 0.5rem);
}


/* Container query table responsive behavior */
@container(max-width:120px){.table-90e7711b-05e4-42bf-8822-e250d5edb30e-column-120[b-8qejtwi4ny]{display: none;}}
@container(max-width:240px){.table-90e7711b-05e4-42bf-8822-e250d5edb30e-column-240[b-8qejtwi4ny]{display: none;}}
@container(max-width:360px){.table-90e7711b-05e4-42bf-8822-e250d5edb30e-column-360[b-8qejtwi4ny]{display: none;}}
@container(max-width:480px){.table-90e7711b-05e4-42bf-8822-e250d5edb30e-column-480[b-8qejtwi4ny]{display: none;}}

/* Mobile responsive styles for sales dashboard */
@media (max-width: 768px) {
    /* Header mobile adjustments */
    .dashboard-header[b-8qejtwi4ny] {
        padding: 0.75rem 1rem !important;
        gap: 1rem !important;
    }
    
    .dashboard-nav[b-8qejtwi4ny] {
        display: none;
    }
    
    /* Show mobile menu button */
    .mobile-menu-button[b-8qejtwi4ny] {
        display: block !important;
    }
    
    /* Main container mobile padding */
    .dashboard-main-container[b-8qejtwi4ny] {
        padding: 1rem !important;
    }
    
    /* Statistics cards mobile layout */
    .stats-container[b-8qejtwi4ny] {
        gap: 0.75rem !important;
    }
    
    .stat-card[b-8qejtwi4ny] {
        min-width: 100% !important;
        padding: 1rem !important;
    }
    
    /* Chart containers mobile */
    .chart-container[b-8qejtwi4ny] {
        min-width: 100% !important;
        padding: 1rem !important;
    }
    
    /* Performance table mobile - convert to cards */
    .performance-table-container[b-8qejtwi4ny] {
        display: none !important;
    }
    
    .performance-mobile-view[b-8qejtwi4ny] {
        display: block !important;
    }
    
    /* Mobile search adjustments */
    .dashboard-search[b-8qejtwi4ny] {
        min-width: 8rem !important;
        max-width: 12rem !important;
    }
    
    /* Profile and notifications mobile */
    .dashboard-controls[b-8qejtwi4ny] {
        gap: 0.5rem !important;
    }
}

/* Small mobile devices (480px and below) */
@media (max-width: 480px) {
    .dashboard-header[b-8qejtwi4ny] {
        padding: 0.5rem !important;
    }
    
    .dashboard-main-container[b-8qejtwi4ny] {
        padding: 0.5rem !important;
    }
    
    .stat-card[b-8qejtwi4ny] {
        padding: 0.75rem !important;
    }
    
    .chart-container[b-8qejtwi4ny] {
        padding: 0.75rem !important;
    }
    
    .dashboard-search[b-8qejtwi4ny] {
        display: none !important;
    }
}

/* Performance mobile card styles */
.performance-mobile-view[b-8qejtwi4ny] {
    display: none;
}

.performance-card[b-8qejtwi4ny] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.performance-card-rank[b-8qejtwi4ny] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 0.75rem;
}

.performance-card-name[b-8qejtwi4ny] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.performance-card-stats[b-8qejtwi4ny] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.75rem;
}

.performance-stat[b-8qejtwi4ny] {
    text-align: center;
}

.performance-stat-label[b-8qejtwi4ny] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.performance-stat-value[b-8qejtwi4ny] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Mobile hamburger menu styles */
.mobile-menu-button[b-8qejtwi4ny] {
    display: none;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
}

.mobile-menu-icon[b-8qejtwi4ny] {
    width: 24px;
    height: 24px;
    color: var(--text-primary);
}

/* Mobile navigation overlay */
.mobile-nav-overlay[b-8qejtwi4ny] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 50;
}

.mobile-nav-overlay.active[b-8qejtwi4ny] {
    display: block;
}

.mobile-nav-menu[b-8qejtwi4ny] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 280px;
    background: white;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 51;
    padding: 1rem;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

.mobile-nav-menu.active[b-8qejtwi4ny] {
    transform: translateX(0);
}

.mobile-nav-close[b-8qejtwi4ny] {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    margin-left: auto;
    display: block;
    margin-bottom: 1rem;
}

.mobile-nav-links[b-8qejtwi4ny] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-link[b-8qejtwi4ny] {
    display: block;
    padding: 1rem 0;
    color: #0e131b;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid #e5e7eb;
}

.mobile-nav-link:hover[b-8qejtwi4ny] {
    background: #f8faff;
    border-radius: 8px;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .mobile-nav-menu[b-8qejtwi4ny] {
        transition: none;
    }
}

/* Ensure app shell content does not overlap or extend beneath the nav-rail.
   We use a CSS variable --nav-rail-width so the layout can adapt if the
   rail width changes. On small screens where the nav rail is hidden or
   becomes an overlay, remove the left margin so the content can span full
   width. */
.app-shell__content[b-8qejtwi4ny] {
    /* default rail width — override with :root or a parent when needed */
    --nav-rail-width: 72px;
    margin-left: var(--nav-rail-width);
    max-width: calc(100% - var(--nav-rail-width));
    box-sizing: border-box;
    position: relative;
    overflow-wrap: break-word;
    /* keep content scrollable within its area */
    overflow-x: hidden;
}

/* If the app hides the nav-rail on small screens (or uses an overlay),
   ensure the content doesn't keep the left offset. Adjust breakpoint to
   match your layout's collapse point. */
@media (max-width: 768px) {
    .app-shell__content[b-8qejtwi4ny] {
        margin-left: 0 !important;
        max-width: 100% !important;
    }
}
/* _content/NexaCRM.UI/Pages/MarketingCampaignManagementInterface.razor.rz.scp.css */
@container(max-width:120px){.table-0373b817-e540-417d-8e5e-f72c3c241345-column-120[b-o1lfbmjhzh]{display: none;}}
@container(max-width:240px){.table-0373b817-e540-417d-8e5e-f72c3c241345-column-240[b-o1lfbmjhzh]{display: none;}}
@container(max-width:360px){.table-0373b817-e540-417d-8e5e-f72c3c241345-column-360[b-o1lfbmjhzh]{display: none;}}
@container(max-width:480px){.table-0373b817-e540-417d-8e5e-f72c3c241345-column-480[b-o1lfbmjhzh]{display: none;}}
@container(max-width:600px){.table-0373b817-e540-417d-8e5e-f72c3c241345-column-600[b-o1lfbmjhzh]{display: none;}}
@container(max-width:720px){.table-0373b817-e540-417d-8e5e-f72c3c241345-column-720[b-o1lfbmjhzh]{display: none;}}
@container(max-width:840px){.table-0373b817-e540-417d-8e5e-f72c3c241345-column-840[b-o1lfbmjhzh]{display: none;}}
/* _content/NexaCRM.UI/Pages/MyAssignmentHistoryPage.razor.rz.scp.css */
.table-hover tbody tr:hover[b-ybagad20my] {
    cursor: pointer;
}

.table-responsive[b-ybagad20my] {
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    background-color: #ffffff;
}
/* _content/NexaCRM.UI/Pages/MyDbListPage.razor.rz.scp.css */
.table-hover tbody tr:hover[b-rb7qew3ic1] {
    cursor: pointer;
}

.table-responsive[b-rb7qew3ic1] {
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    background-color: #ffffff;
}

.status-text[b-rb7qew3ic1] {
    font-weight: 700;
}

.status-new[b-rb7qew3ic1] {
    color: #2563eb;
}

.status-inprogress[b-rb7qew3ic1] {
    color: #f59e0b;
}

.status-noanswer[b-rb7qew3ic1] {
    color: #ef4444;
}

.status-completed[b-rb7qew3ic1] {
    color: #10b981;
}

.status-onhold[b-rb7qew3ic1] {
    color: #6b7280;
}
/* _content/NexaCRM.UI/Pages/NewDbListPage.razor.rz.scp.css */
.table-hover tbody tr:hover[b-hy1h17ngau] {
    cursor: pointer;
}

.table-responsive[b-hy1h17ngau] {
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    background-color: #ffffff;
}

@media (max-width: 768px) {
    .table-responsive[b-hy1h17ngau] {
        border-radius: 20px;
    }
}
/* _content/NexaCRM.UI/Pages/NewlyAssignedDbPage.razor.rz.scp.css */
.table-hover tbody tr:hover[b-basr99fye6] {
    cursor: pointer;
}

.table-responsive[b-basr99fye6] {
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    background-color: #ffffff;
}

.action-cell[b-basr99fye6] {
    text-align: right;
}

@media (max-width: 768px) {
    .action-cell[b-basr99fye6] {
        text-align: left;
    }
}
/* _content/NexaCRM.UI/Pages/NoticeManagementPage.razor.rz.scp.css */
.notice-board[b-aol9o1zi8c] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--surface-color);
    border-radius: 0;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
    border: 1px solid var(--border-color);
    overflow-y: auto;
    overflow-x: hidden;
}

.notice-board__header[b-aol9o1zi8c] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-lg);
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: var(--spacing-lg);
}

.notice-board__actions[b-aol9o1zi8c] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.notice-board__headline[b-aol9o1zi8c] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.notice-board__eyebrow[b-aol9o1zi8c] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0;
}

.notice-board__title[b-aol9o1zi8c] {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--body-letter-spacing);
}

.notice-board__description[b-aol9o1zi8c] {
    margin: 0;
    color: var(--text-secondary);
}

.notice-board__search[b-aol9o1zi8c] {
    flex: 0 0 320px;
    max-width: 100%;
}

.notice-board__search-input[b-aol9o1zi8c] {
    width: 100%;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    padding: 0.75rem 1.25rem;
    font-size: var(--font-size-sm);
    background: var(--surface-muted);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.notice-board__search-input:focus[b-aol9o1zi8c] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.notice-board__filters[b-aol9o1zi8c] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.notice-chip[b-aol9o1zi8c] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    background: var(--surface-muted);
    border: 1px solid transparent;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.notice-chip--active[b-aol9o1zi8c],
.notice-list-item.is-active .notice-chip--category[b-aol9o1zi8c],
.notice-list-item.is-active .notice-chip--importance[b-aol9o1zi8c] {
    background: color-mix(in srgb, var(--primary-color) 90%, white 10%);
    color: white;
    box-shadow: 0 8px 20px rgba(33, 83, 200, 0.18);
}

.notice-chip--category.is-update[b-aol9o1zi8c] {
    background: rgba(33, 83, 200, 0.12);
    color: var(--primary-color);
}

.notice-chip--category.is-maintenance[b-aol9o1zi8c] {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
}

.notice-chip--category.is-security[b-aol9o1zi8c] {
    background: rgba(59, 130, 246, 0.14);
    color: #1e3a8a;
}

.notice-chip--category.is-policy[b-aol9o1zi8c] {
    background: rgba(107, 114, 128, 0.18);
    color: #374151;
}

.notice-chip--category.is-promotion[b-aol9o1zi8c] {
    background: rgba(236, 72, 153, 0.16);
    color: #be185d;
}

.notice-chip--importance.is-highlight[b-aol9o1zi8c] {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
}

.notice-chip--importance.is-critical[b-aol9o1zi8c] {
    background: rgba(239, 68, 68, 0.16);
    color: #b91c1c;
}

.notice-chip--pinned[b-aol9o1zi8c] {
    background: rgba(14, 116, 144, 0.16);
    color: #0f766e;
}

.notice-board__layout[b-aol9o1zi8c] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--spacing-lg);
}

.notice-board__list[b-aol9o1zi8c] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.notice-list-item[b-aol9o1zi8c] {
    width: 100%;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.notice-list-item:hover[b-aol9o1zi8c] {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.notice-list-item.is-active[b-aol9o1zi8c] {
    border-color: var(--primary-color);
    box-shadow: 0 16px 32px rgba(33, 83, 200, 0.18);
}

.notice-list-item__meta[b-aol9o1zi8c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.notice-list-item__title[b-aol9o1zi8c] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.notice-list-item__summary[b-aol9o1zi8c] {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.notice-list-item__date[b-aol9o1zi8c] {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.notice-board__pagination[b-aol9o1zi8c] {
    margin-top: var(--spacing-md);
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
}

.notice-page-button[b-aol9o1zi8c] {
    min-width: 2.25rem;
    padding: 0.45rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.notice-page-button:hover:not(:disabled)[b-aol9o1zi8c] {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.notice-page-button--active[b-aol9o1zi8c] {
    background: var(--primary-color);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 10px 20px rgba(33, 83, 200, 0.2);
}

.notice-page-button:disabled[b-aol9o1zi8c] {
    opacity: 0.5;
    cursor: not-allowed;
}

.notice-board__detail[b-aol9o1zi8c] {
    position: relative;
    padding: 1.5rem;
    min-height: 420px;
}

.notice-detail[b-aol9o1zi8c] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    height: 100%;
}

.notice-detail--empty[b-aol9o1zi8c] {
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text-secondary);
    gap: var(--spacing-sm);
}

.notice-detail__header[b-aol9o1zi8c] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: var(--spacing-sm);
}

.notice-detail__chips[b-aol9o1zi8c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.notice-detail__title[b-aol9o1zi8c] {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}

.notice-detail__meta[b-aol9o1zi8c] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.notice-detail__link[b-aol9o1zi8c] {
    color: var(--primary-color);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.notice-detail__link:hover[b-aol9o1zi8c] {
    text-decoration: underline;
}

.notice-detail__body[b-aol9o1zi8c] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.7;
}

.notice-detail__actions[b-aol9o1zi8c] {
    display: flex;
    gap: 0.75rem;
    margin-top: auto;
    /* Push actions to the bottom */
    padding-top: 1rem;
    border-top: 1px solid var(--divider-color);
}

.notice-detail__action-btn[b-aol9o1zi8c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.notice-detail__action-btn--danger[b-aol9o1zi8c] {
    background-color: #fee2e2;
    color: #b91c1c;
}

.notice-board__placeholder[b-aol9o1zi8c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    border: 1px dashed var(--border-color);
    border-radius: 1rem;
    color: var(--text-secondary);
    background: var(--surface-muted);
}

.notice-board__placeholder--error[b-aol9o1zi8c] {
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(254, 242, 242, 0.8);
}

.spinner[b-aol9o1zi8c] {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(15, 23, 42, 0.15);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: notice-spin-b-aol9o1zi8c 1s linear infinite;
}

@keyframes notice-spin-b-aol9o1zi8c {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1024px) {
    .notice-board__layout[b-aol9o1zi8c] {
        grid-template-columns: 1fr;
    }

    .notice-board__detail[b-aol9o1zi8c] {
        min-height: 360px;
    }
}

/* Add Button */
.notice-board__add-button[b-aol9o1zi8c] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: white;
    background: var(--primary-color);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.notice-board__add-button:hover[b-aol9o1zi8c] {
    background: var(--primary-color-dark, #1e40af);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.notice-board__add-button .icon[b-aol9o1zi8c] {
    font-size: 1.2em;
}

/* Modal Overlay */
.notice-modal-overlay[b-aol9o1zi8c] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: fadeIn-b-aol9o1zi8c 0.2s ease-out;
}

@keyframes fadeIn-b-aol9o1zi8c {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Modal */
.notice-modal[b-aol9o1zi8c] {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp-b-aol9o1zi8c 0.3s ease-out;
}

@keyframes slideUp-b-aol9o1zi8c {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.notice-modal__header[b-aol9o1zi8c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--divider-color);
}

.notice-modal__title[b-aol9o1zi8c] {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.notice-modal__close[b-aol9o1zi8c] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 1.5rem;
    transition: all 0.2s;
}

.notice-modal__close:hover[b-aol9o1zi8c] {
    background: var(--surface-muted);
    color: var(--text-primary);
}

.notice-modal__body[b-aol9o1zi8c] {
    padding: 1.5rem;
}

.notice-modal__footer[b-aol9o1zi8c] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem;
    border-top: 1px solid var(--divider-color);
}

/* Form */
.notice-form[b-aol9o1zi8c] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.notice-form__field[b-aol9o1zi8c] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.notice-form__row[b-aol9o1zi8c] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.notice-form__label[b-aol9o1zi8c] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.notice-form__input[b-aol9o1zi8c],
.notice-form__textarea[b-aol9o1zi8c],
.notice-form__select[b-aol9o1zi8c] {
    padding: 0.75rem;
    font-size: var(--font-size-sm);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: white;
    transition: all 0.2s;
}

.notice-form__input:focus[b-aol9o1zi8c],
.notice-form__textarea:focus[b-aol9o1zi8c],
.notice-form__select:focus[b-aol9o1zi8c] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.notice-form__textarea[b-aol9o1zi8c] {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}

.notice-form__checkbox[b-aol9o1zi8c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.notice-form__checkbox input[type="checkbox"][b-aol9o1zi8c] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

.notice-form__error[b-aol9o1zi8c] {
    padding: 1rem;
    background: rgba(254, 242, 242, 0.8);
    border: 1px solid rgba(239, 68, 68, 0.45);
    border-radius: 0.5rem;
    color: #b91c1c;
}

.notice-form__error strong[b-aol9o1zi8c] {
    display: block;
    margin-bottom: 0.25rem;
}

.notice-form__error p[b-aol9o1zi8c] {
    margin: 0;
    font-size: var(--font-size-sm);
}

/* Buttons */
.notice-button[b-aol9o1zi8c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.notice-button:disabled[b-aol9o1zi8c] {
    opacity: 0.6;
    cursor: not-allowed;
}

.notice-button--primary[b-aol9o1zi8c] {
    color: white;
    background: var(--primary-color);
}

.notice-button--primary:hover:not(:disabled)[b-aol9o1zi8c] {
    background: var(--primary-color-dark, #1e40af);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.notice-button--secondary[b-aol9o1zi8c] {
    color: var(--text-primary);
    background: var(--surface-muted);
}

.notice-button--secondary:hover:not(:disabled)[b-aol9o1zi8c] {
    background: var(--border-color);
}

.spinner-small[b-aol9o1zi8c] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: notice-spin-b-aol9o1zi8c 0.8s linear infinite;
}

@media (max-width: 640px) {
    .notice-board[b-aol9o1zi8c] {
        padding: var(--spacing-md);
        border-radius: 1rem;
    }

    .notice-board__search[b-aol9o1zi8c] {
        flex: 1 1 100%;
    }

    .notice-board__actions[b-aol9o1zi8c] {
        flex-direction: column;
        width: 100%;
    }

    .notice-board__add-button[b-aol9o1zi8c] {
        width: 100%;
        justify-content: center;
    }

    .notice-form__row[b-aol9o1zi8c] {
        grid-template-columns: 1fr;
    }

    .notice-modal[b-aol9o1zi8c] {
        max-height: 95vh;
        margin: 0;
    }
}
/* _content/NexaCRM.UI/Pages/NotificationSettingsPage.razor.rz.scp.css */
.layout-content-container[b-qlxhbrcr6k] {
  /* Ensure the main container itself has no border/shadow so inner content feels flush */
  border: none;
  box-shadow: none;
}

/* Make the soft-surface blocks look borderless and flatter like the provided design */
.layout-content-container .bg-surface-soft[b-qlxhbrcr6k] {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important; /* optional: match page background for a borderless look */
}

/* Inputs and selects inside this page: remove visible borders and soften focus */
.layout-content-container .form-input[b-qlxhbrcr6k],
.layout-content-container select[b-qlxhbrcr6k],
.layout-content-container .ui-input-height-lg[b-qlxhbrcr6k] {
  border-color: transparent !important;
  background-color: transparent !important;
}
    
/* Buttons: keep primary color but remove strong outlines when desired */
.layout-content-container .bg-primary[b-qlxhbrcr6k] {
  box-shadow: none !important;
  border: none !important;
}

/* Slight spacing tweak to maintain readable layout without visible separators */
.layout-content-container .d-flex.align-items-center.gap-4[b-qlxhbrcr6k] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Keep toggle pill visible (white thumb) but without an outer border */
.layout-content-container label.position-relative.rounded-pill[b-qlxhbrcr6k] {
  border: none !important;
  background-color: var(--accent-soft, rgba(14,165,162,0.08));
}

/* Make status/info messages match the flatter look */
.layout-content-container .px-2.py-2[b-qlxhbrcr6k] {
  background: transparent;
}
/* _content/NexaCRM.UI/Pages/NotificationsPage.razor.rz.scp.css */
.notifications-page[b-hyvrpbxisu] {
  padding: 1rem;
}

.notifications-header[b-hyvrpbxisu] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.notifications-header h1[b-hyvrpbxisu] {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
  color: #111827;
}
.notifications-header .actions[b-hyvrpbxisu] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.notifications-header .refresh-button[b-hyvrpbxisu] {
  border: 1px solid #E5E7EB;
  background: #FFFFFF;
  color: #111827;
  height: 36px;
  width: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.notifications-header .refresh-button:hover[b-hyvrpbxisu] {
  background: #F9FAFB;
  border-color: #D1D5DB;
}
.notifications-header .refresh-button:active[b-hyvrpbxisu] {
  transform: scale(0.95);
}
.notifications-header .mark-read[b-hyvrpbxisu] {
  border: 1px solid #E5E7EB;
  background: #FFFFFF;
  color: #111827;
  height: 36px;
  padding: 0 0.75rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.notifications-header .mark-read:hover:not(:disabled)[b-hyvrpbxisu] {
  background: #F9FAFB;
  border-color: #D1D5DB;
}
.notifications-header .mark-read:disabled[b-hyvrpbxisu] {
  opacity: 0.5;
  cursor: not-allowed;
}
.notifications-header .settings-link[b-hyvrpbxisu] {
  color: var(--secondary-color);
  font-weight: 600;
  text-decoration: none;
}
.notifications-header .settings-link:hover[b-hyvrpbxisu] {
  text-decoration: underline;
}

/* Loading state */
.loading-state[b-hyvrpbxisu] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem 1rem;
  color: #6B7280;
}
.loading-state .spinner[b-hyvrpbxisu] {
  width: 40px;
  height: 40px;
  border: 3px solid #E5E7EB;
  border-top-color: #3B82F6;
  border-radius: 50%;
  animation: spin-b-hyvrpbxisu 0.8s linear infinite;
}

@keyframes spin-b-hyvrpbxisu {
  to { transform: rotate(360deg); }
}

/* Error state */
.error-state[b-hyvrpbxisu] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem 1rem;
  text-align: center;
}
.error-state strong[b-hyvrpbxisu] {
  color: #DC2626;
  font-size: 1.125rem;
}
.error-state p[b-hyvrpbxisu] {
  color: #6B7280;
  margin: 0;
}
.error-state .retry-button[b-hyvrpbxisu] {
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  background: #3B82F6;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.error-state .retry-button:hover[b-hyvrpbxisu] {
  background: #2563EB;
}

/* Empty state */
.empty-state[b-hyvrpbxisu] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: #6B7280;
  padding: 3rem 1rem;
  text-align: center;
}
.empty-state .empty-icon[b-hyvrpbxisu] {
  font-size: 3rem;
  opacity: 0.5;
}
.empty-state p[b-hyvrpbxisu] {
  margin: 0;
}
.empty-state .empty-hint[b-hyvrpbxisu] {
  font-size: 0.875rem;
  color: #9CA3AF;
}

/* Notifications stats */
.notifications-stats[b-hyvrpbxisu] {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: #F9FAFB;
  border-radius: 10px;
  font-size: 0.875rem;
}
.notifications-stats .total-count[b-hyvrpbxisu] {
  color: #374151;
  font-weight: 600;
}
.notifications-stats .unread-count[b-hyvrpbxisu] {
  color: #3B82F6;
  font-weight: 600;
}

.notif-list[b-hyvrpbxisu] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.notif-item[b-hyvrpbxisu] {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  background: #FFFFFF;
  transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.notif-item.unread[b-hyvrpbxisu] {
  border-color: #D1D5DB;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
}
.notif-item .icon[b-hyvrpbxisu] { width: 28px; height: 28px; border-radius: 8px; }
.notif-item .icon.type-info[b-hyvrpbxisu] { background: #DBEAFE; }
.notif-item .icon.type-success[b-hyvrpbxisu] { background: #DCFCE7; }
.notif-item .icon.type-warning[b-hyvrpbxisu] { background: #FEF9C3; }
.notif-item .icon.type-error[b-hyvrpbxisu] { background: #FEE2E2; }

.notif-item .title[b-hyvrpbxisu] { font-weight: 700; color: #111827; }
.notif-item .message[b-hyvrpbxisu] { color: #374151; margin-top: 2px; }
.notif-item .meta[b-hyvrpbxisu] { color: #6B7280; margin-top: 2px; font-size: 12px; }

/* Bulk mark-as-read visual feedback */
.notif-item.mark-read-anim[b-hyvrpbxisu] {
  animation: notifReadPulse-b-hyvrpbxisu 800ms ease-out;
}

@keyframes notifReadPulse-b-hyvrpbxisu {
  0% { background: #ECFDF5; border-color: #A7F3D0; box-shadow: 0 6px 14px rgba(16, 185, 129, 0.15); }
  100% { background: #FFFFFF; border-color: #E5E7EB; box-shadow: none; }
}
/* _content/NexaCRM.UI/Pages/OrganizationStatsPage.razor.rz.scp.css */
.desktop-table-view .table-responsive[b-7cg9kzzpau] {
    border-radius: 0.75rem;
    overflow: hidden;
}

.desktop-table-view .table thead th[b-7cg9kzzpau],
.desktop-table-view .table tbody td[b-7cg9kzzpau] {
    padding: 0.85rem 1rem;
}

.desktop-table-view .table thead th[b-7cg9kzzpau] {
    background-color: #f7f9fc;
    font-weight: 600;
}

.mobile-card-view[b-7cg9kzzpau] {
    display: none;
}

.stat-card[b-7cg9kzzpau] {
    background-color: #fff;
    border: 1px solid #e7ecf3;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.card-info-row[b-7cg9kzzpau] {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.card-info-label[b-7cg9kzzpau] {
    color: #6c757d;
}

.card-info-value[b-7cg9kzzpau] {
    font-weight: 500;
}

@media (min-width: 768px) {
    .desktop-table-view .table[b-7cg9kzzpau] {
        font-size: 1.05rem;
    }

    .desktop-table-view .table thead th[b-7cg9kzzpau],
    .desktop-table-view .table tbody td[b-7cg9kzzpau] {
        padding: 1.1rem 1.25rem;
    }

    .desktop-table-view .table-responsive[b-7cg9kzzpau] {
        border-radius: 1rem;
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    }
}

@media (max-width: 767.98px) {
    .desktop-table-view[b-7cg9kzzpau] {
        display: none;
    }

    .mobile-card-view[b-7cg9kzzpau] {
        display: block;
    }
}
/* _content/NexaCRM.UI/Pages/OrganizationStructurePage.razor.rz.scp.css */
/* OrganizationStructurePage Responsive Styles */

.organization-tree[b-iwdgl30etp] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.organization-node > .node-content[b-iwdgl30etp] {
    background-color: #ffffff;
    border: 1px solid #e7ecf3;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.organization-node > .node-content:hover[b-iwdgl30etp] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.organization-node > ul[b-iwdgl30etp] {
    margin-left: 1.25rem;
    margin-top: 0.75rem;
}

.node-name[b-iwdgl30etp] {
    font-weight: 600;
}

.node-actions .btn[b-iwdgl30etp] {
    color: #4a5568;
    padding: 0.25rem 0.5rem;
}

@media (max-width: 576px) {
    .organization-node > .node-content[b-iwdgl30etp] {
        padding: 0.75rem;
        font-size: 0.95rem;
    }

    .organization-node > ul[b-iwdgl30etp] {
        margin-left: 1rem;
    }
}

@media (min-width: 768px) {
    .organization-tree[b-iwdgl30etp] {
        gap: 1rem;
    }

    .organization-node > .node-content[b-iwdgl30etp] {
        padding: 1.25rem 1.5rem;
        border-radius: 1rem;
        font-size: 1.05rem;
    }

    .node-actions .btn[b-iwdgl30etp] {
        font-size: 0.95rem;
        padding: 0.35rem 0.65rem;
    }

    .organization-node > ul[b-iwdgl30etp] {
        margin-left: 1.75rem;
    }
}
/* _content/NexaCRM.UI/Pages/ProfileSettingsPage.razor.rz.scp.css */
/* Mobile navigation styles for profile settings page */
.profile-mobile-menu-button[b-qgw69ahh3f] {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.profile-mobile-menu-button:hover[b-qgw69ahh3f] {
    background-color: #e7ecf3;
}

.profile-mobile-nav-overlay[b-qgw69ahh3f] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 50;
}

.profile-mobile-nav-overlay.active[b-qgw69ahh3f] {
    display: block;
}

.profile-mobile-nav-menu[b-qgw69ahh3f] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 280px;
    background: white;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 51;
    padding: 1rem;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

.profile-mobile-nav-menu.active[b-qgw69ahh3f] {
    transform: translateX(0);
}

.profile-mobile-nav-close[b-qgw69ahh3f] {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    margin-left: auto;
    display: block;
    margin-bottom: 1rem;
}

.profile-mobile-nav-links[b-qgw69ahh3f] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.profile-mobile-nav-link[b-qgw69ahh3f] {
    display: block;
    padding: 1rem 0;
    color: #0e131b;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid #e5e7eb;
}

.profile-mobile-nav-link:hover[b-qgw69ahh3f] {
    background: #f8faff;
    border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .profile-mobile-nav-menu[b-qgw69ahh3f] {
        transition: none;
    }
}
/* _content/NexaCRM.UI/Pages/ReportsPage.razor.rz.scp.css */
.reports-shell[b-08tc0qn5gj] {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 3vw, 1.75rem);
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.reports-shell__header[b-08tc0qn5gj] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.reports-shell__title[b-08tc0qn5gj] {
    margin: 0;
    font-size: clamp(1.65rem, 1.4rem + 0.8vw, 2rem);
    font-weight: 700;
    color: var(--text-ink, #0f172a);
}

.reports-shell__subtitle[b-08tc0qn5gj] {
    margin: 0;
    color: var(--text-secondary, #4b5563);
    font-size: 0.95rem;
}

.reports-form[b-08tc0qn5gj] {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2.5vw, 1.5rem);
}

.reports-validation[b-08tc0qn5gj] {
    margin: 0;
    padding: 0.25rem 0.5rem;
    border-left: 4px solid rgba(239, 68, 68, 0.65);
    background: rgba(254, 226, 226, 0.35);
    color: #b91c1c;
    border-radius: var(--radius-sm);
}

.reports-field[b-08tc0qn5gj] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.reports-field__label[b-08tc0qn5gj] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-ink, #111827);
}

.reports-field__help[b-08tc0qn5gj] {
    font-size: 0.8rem;
    color: var(--text-secondary, #6b7280);
}

.reports-input[b-08tc0qn5gj] {
    width: 100%;
    min-height: 2.75rem;
    border-radius: var(--radius-sm);
}

.reports-field__controls[b-08tc0qn5gj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.reports-field__controls > *[b-08tc0qn5gj] {
    flex: 1 1 10rem;
    min-width: 0;
}

.reports-field__group[b-08tc0qn5gj] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 12rem;
}

.reports-field--filters[b-08tc0qn5gj] {
    gap: clamp(0.75rem, 2vw, 1.25rem);
}

.reports-chip-button[b-08tc0qn5gj],
.reports-action[b-08tc0qn5gj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.75rem;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid color-mix(in srgb, var(--ui-surface-border) 80%, transparent);
    background: color-mix(in srgb, var(--surface-muted) 70%, #ffffff 30%);
    color: var(--text-ink, #0f172a);
    transition: transform var(--motion-duration-fast) var(--motion-ease-standard),
                background-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.reports-chip-button:hover[b-08tc0qn5gj],
.reports-chip-button:focus-visible[b-08tc0qn5gj],
.reports-action:hover[b-08tc0qn5gj],
.reports-action:focus-visible[b-08tc0qn5gj] {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--surface-muted) 60%, #ffffff 40%);
    outline: none;
}

.reports-action[b-08tc0qn5gj] {
    flex: 0 0 auto;
    min-width: 9rem;
}

.reports-action[disabled][b-08tc0qn5gj] {
    opacity: 0.6;
    cursor: not-allowed;
}

.reports-action--primary[b-08tc0qn5gj] {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.9), rgba(37, 99, 235, 0.9));
    color: #ffffff;
    border-color: transparent;
}

.reports-action--primary:hover[b-08tc0qn5gj],
.reports-action--primary:focus-visible[b-08tc0qn5gj] {
    background: linear-gradient(135deg, rgba(67, 56, 202, 0.95), rgba(29, 78, 216, 0.95));
}

.reports-token-list[b-08tc0qn5gj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.reports-token-item[b-08tc0qn5gj] {
    background: color-mix(in srgb, var(--surface-muted) 65%, #ffffff 35%);
    border-radius: var(--radius-pill);
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-ink, #1f2937);
}

.reports-inline-error[b-08tc0qn5gj] {
    margin: 0;
    font-size: 0.85rem;
    color: #b91c1c;
}

.reports-form__actions[b-08tc0qn5gj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-start;
}

.reports-status[b-08tc0qn5gj] {
    min-height: 1.5rem;
}

.reports-status__message[b-08tc0qn5gj] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
}

.reports-status__message[data-tone="success"][b-08tc0qn5gj] {
    background: rgba(34, 197, 94, 0.12);
    color: #166534;
}

.reports-status__message[data-tone="error"][b-08tc0qn5gj] {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

.reports-status__message[data-tone="info"][b-08tc0qn5gj] {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}

.reports-aside[b-08tc0qn5gj] {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 3vw, 1.75rem);
    padding: clamp(1.5rem, 3.5vw, 2.25rem);
}

.reports-summary[b-08tc0qn5gj] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.reports-summary__title[b-08tc0qn5gj] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-ink, #111827);
}

.reports-summary__list[b-08tc0qn5gj] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.reports-summary__link[b-08tc0qn5gj] {
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-ink, #1f2937);
    font-weight: 500;
}

.reports-summary__link:hover[b-08tc0qn5gj],
.reports-summary__link:focus-visible[b-08tc0qn5gj] {
    background: color-mix(in srgb, var(--surface-muted) 70%, #ffffff 30%);
    outline: none;
}

.reports-preview[b-08tc0qn5gj] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.reports-preview__header[b-08tc0qn5gj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reports-preview__title[b-08tc0qn5gj] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-ink, #111827);
}

.reports-preview__badge[b-08tc0qn5gj] {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    background: rgba(30, 64, 175, 0.12);
    color: #1e3a8a;
}

.reports-preview__badge[data-state="false"][b-08tc0qn5gj] {
    background: rgba(148, 163, 184, 0.2);
    color: #475569;
}

.reports-preview__content[b-08tc0qn5gj] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.reports-preview__heading[b-08tc0qn5gj] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.reports-preview__table[b-08tc0qn5gj] {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface-color, #ffffff);
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ui-surface-border) 70%, transparent);
}

.reports-preview__table th[b-08tc0qn5gj],
.reports-preview__table td[b-08tc0qn5gj] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ui-surface-border) 60%, transparent);
    text-align: left;
    font-size: 0.9rem;
}

.reports-preview__table tr:last-child td[b-08tc0qn5gj] {
    border-bottom: none;
}

.reports-preview__placeholder[b-08tc0qn5gj] {
    margin: 0;
    color: var(--text-secondary, #6b7280);
    font-size: 0.9rem;
}

@media (max-width: 1024px) {
    .reports-shell[b-08tc0qn5gj],
    .reports-aside[b-08tc0qn5gj] {
        padding: clamp(1.25rem, 4vw, 2rem);
    }
}

@media (max-width: 768px) {
    .reports-summary__list[b-08tc0qn5gj] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .reports-summary__link[b-08tc0qn5gj] {
        flex: 1 1 14rem;
    }
}
/* _content/NexaCRM.UI/Pages/SalesCalendar.razor.rz.scp.css */
.sales-calendar-container[b-cit78rjxkw] {
    padding: 20px;
    background: #f8f9fa;
    min-height: 100vh;
}

.calendar-header[b-cit78rjxkw] {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.header-controls[b-cit78rjxkw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.calendar-title[b-cit78rjxkw] {
    margin: 0;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

.view-controls[b-cit78rjxkw] {
    display: flex;
    gap: 8px; /* Ensure minimum 8px spacing between buttons */
}

.view-controls .btn[b-cit78rjxkw] {
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
}

.view-controls .btn.active[b-cit78rjxkw] {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.date-navigation[b-cit78rjxkw] {
    display: flex;
    align-items: center;
    gap: 12px; /* Increased for better touch spacing */
}

.current-date[b-cit78rjxkw] {
    font-weight: 600;
    min-width: 200px;
    text-align: center;
}

.calendar-content[b-cit78rjxkw] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* Month View Styles */
.month-view[b-cit78rjxkw] {
    padding: 20px;
}

.month-header[b-cit78rjxkw] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    margin-bottom: 10px;
}

.day-header[b-cit78rjxkw] {
    padding: 10px;
    text-align: center;
    font-weight: 600;
    background-color: #f8f9fa;
    color: #666;
}

.month-grid[b-cit78rjxkw] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background-color: #dee2e6;
}

.day-cell[b-cit78rjxkw] {
    background: white;
    min-height: 120px;
    padding: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
    border: 1px solid #e9ecef;
}

.day-cell:hover[b-cit78rjxkw] {
    background-color: #f8f9fa;
}

.day-cell.today[b-cit78rjxkw] {
    background-color: #e3f2fd;
}

.day-cell.other-month[b-cit78rjxkw] {
    color: #ccc;
    background-color: #f9f9f9;
}

.day-number[b-cit78rjxkw] {
    font-weight: 600;
    margin-bottom: 5px;
}

.day-appointments[b-cit78rjxkw] {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Increased gap to prevent overlapping */
    padding: 4px; /* Increased padding */
    max-height: 80px;
    overflow-y: auto;
}

.appointment-item[b-cit78rjxkw] {
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    position: relative;
    line-height: 1.2;
    min-height: 18px;
    display: flex;
    align-items: center;
}

.appointment-item:hover[b-cit78rjxkw] {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Conflict highlighting */
.appointment-item.has-conflict[b-cit78rjxkw] {
    border-left-color: #dc3545;
    background: linear-gradient(90deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.05) 100%);
}

.appointment-item.has-conflict[b-cit78rjxkw]::after {
    content: "⚠";
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    color: #dc3545;
    font-size: 10px;
}

/* Better visual separation for overlapping appointments */
.time-slot[b-cit78rjxkw] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.appointment-item + .appointment-item[b-cit78rjxkw] {
    margin-top: 1px;
}

/* Week View Styles */
.week-view[b-cit78rjxkw] {
    display: flex;
    flex-direction: column;
    height: 600px;
}

.week-header[b-cit78rjxkw] {
    display: grid;
    grid-template-columns: 80px repeat(7, 1fr);
    border-bottom: 1px solid #dee2e6;
    background-color: #f8f9fa;
}

.week-day-header[b-cit78rjxkw] {
    padding: 10px;
    text-align: center;
    border-right: 1px solid #dee2e6;
}

.week-day-header.today[b-cit78rjxkw] {
    background-color: #e3f2fd;
}

.day-name[b-cit78rjxkw] {
    font-size: 12px;
    color: #666;
}

.day-number[b-cit78rjxkw] {
    font-weight: 600;
    font-size: 18px;
}

.week-grid[b-cit78rjxkw] {
    flex: 1;
    overflow-y: auto;
}

.time-row[b-cit78rjxkw] {
    display: grid;
    grid-template-columns: 80px repeat(7, 1fr);
    border-bottom: 1px solid #f0f0f0;
    min-height: 50px;
}

.time-label[b-cit78rjxkw] {
    padding: 10px;
    font-size: 12px;
    color: #666;
    border-right: 1px solid #dee2e6;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
}

.time-slot[b-cit78rjxkw] {
    border-right: 1px solid #f0f0f0;
    cursor: pointer;
    position: relative;
    padding: 5px;
}

.time-slot:hover[b-cit78rjxkw] {
    background-color: #f8f9fa;
}

/* Day View Styles */
.day-view[b-cit78rjxkw] {
    display: flex;
    flex-direction: column;
    height: 600px;
}

.day-header[b-cit78rjxkw] {
    padding: 20px;
    border-bottom: 1px solid #dee2e6;
    background-color: #f8f9fa;
}

.day-grid[b-cit78rjxkw] {
    flex: 1;
    overflow-y: auto;
}

/* Appointment Type Colors */
.appointment-meeting[b-cit78rjxkw] {
    background-color: #007bff;
    color: white;
}

.appointment-phonecall[b-cit78rjxkw] {
    background-color: #28a745;
    color: white;
}

.appointment-videocall[b-cit78rjxkw] {
    background-color: #17a2b8;
    color: white;
}

.appointment-sitevisit[b-cit78rjxkw] {
    background-color: #fd7e14;
    color: white;
}

.appointment-followup[b-cit78rjxkw] {
    background-color: #6c757d;
    color: white;
}

.appointment-presentation[b-cit78rjxkw] {
    background-color: #6f42c1;
    color: white;
}

.appointment-negotiation[b-cit78rjxkw] {
    background-color: #e83e8c;
    color: white;
}

.appointment-closing[b-cit78rjxkw] {
    background-color: #20c997;
    color: white;
}

/* Modal Styles */
.modal-backdrop[b-cit78rjxkw] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content[b-cit78rjxkw] {
    background: white;
    border-radius: 8px;
    padding: 20px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.appointment-details .modal-header[b-cit78rjxkw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 15px;
}

.btn-close[b-cit78rjxkw] {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close:hover[b-cit78rjxkw] {
    color: #333;
}

.modal-body[b-cit78rjxkw] {
    margin-bottom: 20px;
}

.detail-row[b-cit78rjxkw] {
    margin-bottom: 15px;
}

.detail-row strong[b-cit78rjxkw] {
    display: inline-block;
    width: 120px;
    color: #666;
}

.status-badge[b-cit78rjxkw] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-scheduled[b-cit78rjxkw] {
    background-color: #e3f2fd;
    color: #1976d2;
}

.status-inprogress[b-cit78rjxkw] {
    background-color: #fff3e0;
    color: #f57c00;
}

.status-completed[b-cit78rjxkw] {
    background-color: #e8f5e8;
    color: #388e3c;
}

.status-cancelled[b-cit78rjxkw] {
    background-color: #ffebee;
    color: #d32f2f;
}

.status-postponed[b-cit78rjxkw] {
    background-color: #f3e5f5;
    color: #7b1fa2;
}

.status-noshow[b-cit78rjxkw] {
    background-color: #fafafa;
    color: #616161;
}

.modal-footer[b-cit78rjxkw] {
    display: flex;
    gap: 12px; /* Increased gap for better touch spacing */
    justify-content: flex-end;
    border-top: 1px solid #dee2e6;
    padding-top: 15px;
}

/* Detailed Appointment in Day View */
.day-view .appointment-item[b-cit78rjxkw] {
    margin-bottom: 5px;
}

.appointment-title[b-cit78rjxkw] {
    font-weight: 600;
    margin-bottom: 2px;
}

.appointment-time[b-cit78rjxkw] {
    font-size: 11px;
    opacity: 0.9;
    margin-bottom: 2px;
}

.appointment-contact[b-cit78rjxkw] {
    font-size: 11px;
    opacity: 0.8;
}

/* Responsive Design */
@media (max-width: 768px) {
    .sales-calendar-container[b-cit78rjxkw] {
        padding: 15px;
    }
    
    .calendar-header[b-cit78rjxkw] {
        padding: 15px;
    }
    
    .header-controls[b-cit78rjxkw] {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    .calendar-title[b-cit78rjxkw] {
        justify-content: center;
        font-size: 1.3rem;
    }
    
    .view-controls[b-cit78rjxkw] {
        justify-content: center;
        gap: 8px;
    }
    
    .view-controls .btn[b-cit78rjxkw] {
        flex: 1;
        min-height: 48px; /* Larger touch target */
        font-size: 16px;
        padding: 14px 18px; /* Increased padding */
        border-radius: 10px; /* More modern rounded corners */
        transition: all 0.2s ease;
        font-weight: 500; /* Better text visibility */
    }
    
    .view-controls .btn:active[b-cit78rjxkw] {
        transform: scale(0.98);
        transition-duration: 0.1s;
    }
    
    .date-navigation[b-cit78rjxkw] {
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
    }
    
    .date-navigation .btn[b-cit78rjxkw] {
        min-height: 48px; /* Larger touch target */
        min-width: 48px;
        padding: 14px; /* Increased padding */
        border-radius: 10px; /* Consistent rounded corners */
        font-size: 16px;
        font-weight: 500;
    }
    
    .current-date[b-cit78rjxkw] {
        min-width: auto;
        font-size: 17px; /* Slightly larger for better readability */
        font-weight: 600; /* Bolder for better visibility */
        padding: 10px 14px; /* Increased padding */
        order: -1; /* Show date first on mobile */
        width: 100%;
        text-align: center;
        margin-bottom: 10px; /* More breathing room */
        line-height: 1.3;
    }
    
    .btn[b-cit78rjxkw] {
        min-height: 48px; /* Consistent larger touch target */
        min-width: 48px;
        font-size: 16px;
        padding: 14px 22px; /* Increased padding */
        border-radius: 10px; /* Consistent rounded corners */
        transition: all 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        font-weight: 500; /* Better text visibility */
    }
    
    .btn:active[b-cit78rjxkw] {
        transform: scale(0.98);
        transition-duration: 0.1s;
    }
    
    /* Calendar view optimizations */
    .month-grid[b-cit78rjxkw],
    .week-header[b-cit78rjxkw] {
        grid-template-columns: repeat(7, 1fr);
    }
    
    .time-row[b-cit78rjxkw] {
        grid-template-columns: 60px repeat(7, 1fr); /* Keep smaller time column for better visibility */
    }
    
    .time-label[b-cit78rjxkw] {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 600;
        color: #666;
        background-color: #f8f9fa;
        border-right: 1px solid #dee2e6;
        padding: 4px 2px;
        writing-mode: horizontal-tb; /* Ensure horizontal text */
        text-align: center;
        min-height: 50px;
    }
    
    .week-header[b-cit78rjxkw] {
        grid-template-columns: 60px repeat(7, 1fr); /* Match time-row grid for consistency */
    }
    
    .time-row[b-cit78rjxkw] {
        grid-template-columns: 60px repeat(7, 1fr);
        min-height: 60px;
    }
    
    .day-cell[b-cit78rjxkw] {
        min-height: 90px; /* Larger cells for better touch targets */
        padding: 14px 10px; /* Increased padding */
        touch-action: manipulation;
    }
    
    .day-cell:active[b-cit78rjxkw] {
        background-color: #e3f2fd;
        transition-duration: 0.1s;
    }
    
    .day-number[b-cit78rjxkw] {
        font-size: 18px; /* Larger for better visibility */
        font-weight: 600;
        margin-bottom: 10px; /* More spacing */
        line-height: 1.2;
    }
    
    .appointment-item[b-cit78rjxkw] {
        font-size: 12px; /* Slightly larger for better readability */
        padding: 6px 8px; /* Increased padding */
        margin-bottom: 3px; /* More spacing */
        border-radius: 6px; /* More rounded corners */
        touch-action: manipulation;
        min-height: 28px; /* Larger touch target */
        display: flex;
        align-items: center;
        font-weight: 500; /* Bolder text for better visibility */
        line-height: 1.2;
        border-left: 4px solid transparent;
        position: relative;
    }

    .appointment-item:active[b-cit78rjxkw] {
        opacity: 0.7;
        transform: scale(0.98);
        transition-duration: 0.1s;
    }

    /* Enhanced conflict highlighting for mobile */
    .appointment-item.has-conflict[b-cit78rjxkw] {
        border-left-color: #dc3545;
        background: linear-gradient(90deg, rgba(220, 53, 69, 0.15) 0%, rgba(220, 53, 69, 0.08) 100%);
        animation: pulse-conflict-b-cit78rjxkw 2s infinite;
    }

    @keyframes pulse-conflict-b-cit78rjxkw {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.85; }
    }

    .appointment-item.has-conflict[b-cit78rjxkw]::after {
        content: "⚠";
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        color: #dc3545;
        font-size: 12px;
        font-weight: bold;
    }

    /* Better day appointments container for mobile */
    .day-appointments[b-cit78rjxkw] {
        gap: 4px;
        padding: 4px;
        max-height: 100px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .day-appointments[b-cit78rjxkw]::-webkit-scrollbar {
        width: 3px;
    }

    .day-appointments[b-cit78rjxkw]::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.2);
        border-radius: 3px;
    }
    
    /* Week view mobile optimization */
    .week-view[b-cit78rjxkw] {
        height: auto;
        max-height: 70vh;
    }
    
    .week-day-header[b-cit78rjxkw] {
        padding: 12px 4px;
        font-size: 14px;
    }
    
    /* Add empty header cell for time column on mobile */
    .week-header[b-cit78rjxkw]::before {
        content: "";
        grid-column: 1;
        background-color: #f8f9fa;
        border-right: 1px solid #dee2e6;
    }
    
    .day-name[b-cit78rjxkw] {
        font-size: 11px;
        margin-bottom: 2px;
    }
    
    .day-number[b-cit78rjxkw] {
        font-size: 16px;
    }
    
    .time-slot[b-cit78rjxkw] {
        min-height: 55px; /* Larger for better touch */
        padding: 10px 6px; /* Increased padding */
        position: relative;
        touch-action: manipulation;
        transition: background-color 0.2s ease;
    }
    
    .time-slot:hover[b-cit78rjxkw] {
        background-color: #f8f9fa;
    }
    
    .time-slot:active[b-cit78rjxkw] {
        background-color: #e9ecef;
        transition-duration: 0.1s;
    }
    
    /* Show time as overlay for better visibility on mobile */
    .time-slot[b-cit78rjxkw]::before {
        content: attr(data-time);
        position: absolute;
        top: 4px;
        left: 4px;
        font-size: 11px;
        color: #666;
        font-weight: 600;
        opacity: 0.8;
        pointer-events: none;
        z-index: 1;
        background: rgba(255, 255, 255, 0.8);
        padding: 2px 4px;
        border-radius: 4px;
        line-height: 1;
    }
    
    /* Day view mobile optimization */
    .day-view[b-cit78rjxkw] {
        height: auto;
        max-height: 70vh;
    }
    
    .day-header[b-cit78rjxkw] {
        padding: 15px;
    }
    
    .day-header h3[b-cit78rjxkw] {
        font-size: 1.2rem;
        margin: 0;
        font-weight: 600;
        line-height: 1.3;
    }
    
    /* Enhanced appointment details in day view */
    .day-view .appointment-item[b-cit78rjxkw] {
        padding: 8px 12px; /* More padding for day view */
        margin-bottom: 6px;
        border-radius: 8px;
        min-height: 60px; /* Larger for better touch and content display */
    }
    
    .appointment-title[b-cit78rjxkw] {
        font-size: 14px; /* Larger title */
        font-weight: 600;
        margin-bottom: 4px;
        line-height: 1.3;
    }
    
    .appointment-time[b-cit78rjxkw] {
        font-size: 12px; /* Larger time display */
        opacity: 0.9;
        margin-bottom: 3px;
        font-weight: 500;
    }
    
    .appointment-contact[b-cit78rjxkw] {
        font-size: 11px;
        opacity: 0.8;
        font-weight: 400;
    }
    
    /* Modal improvements */
    .modal-content[b-cit78rjxkw] {
        width: 95%;
        max-width: 95vw;
        padding: 20px;
        margin: 20px auto;
        border-radius: 12px;
        max-height: 90vh;
    }
    
    .modal-footer[b-cit78rjxkw] {
        flex-direction: column;
        gap: 12px;
    }
    
    .modal-footer .btn[b-cit78rjxkw] {
        width: 100%;
        justify-content: center;
        font-weight: 500;
    }
    
    .detail-row[b-cit78rjxkw] {
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .detail-row:last-child[b-cit78rjxkw] {
        border-bottom: none;
        margin-bottom: 0;
    }
    
    .detail-row strong[b-cit78rjxkw] {
        display: block;
        margin-bottom: 6px;
        font-size: 14px;
        color: #666;
    }
    
    .status-badge[b-cit78rjxkw] {
        display: inline-block;
        margin-top: 4px;
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* Tablet layout (768px to 1024px) - Optimized for landscape and portrait */
@media (min-width: 769px) and (max-width: 1024px) {
    .sales-calendar-container[b-cit78rjxkw] {
        padding: 18px;
    }
    
    .calendar-header[b-cit78rjxkw] {
        padding: 18px;
    }
    
    .header-controls[b-cit78rjxkw] {
        flex-direction: row; /* Side-by-side layout on tablet */
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
    }
    
    .calendar-title[b-cit78rjxkw] {
        font-size: 1.4rem;
        order: 1;
        flex: 0 0 auto;
    }
    
    .view-controls[b-cit78rjxkw] {
        order: 2;
        gap: 8px;
    }
    
    .view-controls .btn[b-cit78rjxkw] {
        min-height: 48px;
        font-size: 15px;
        padding: 12px 16px;
        border-radius: 8px;
        flex: 0 0 auto;
        min-width: 80px;
    }
    
    .date-navigation[b-cit78rjxkw] {
        order: 3;
        gap: 12px;
        flex: 1;
        justify-content: flex-end;
    }
    
    .date-navigation .btn[b-cit78rjxkw] {
        min-height: 48px;
        min-width: 48px;
        padding: 12px;
        border-radius: 8px;
        font-size: 15px;
    }
    
    .current-date[b-cit78rjxkw] {
        font-size: 16px;
        font-weight: 600;
        min-width: 160px;
        text-align: center;
    }
    
    /* Optimized calendar grid for tablet */
    .day-cell[b-cit78rjxkw] {
        min-height: 100px;
        padding: 12px 8px;
    }
    
    .day-number[b-cit78rjxkw] {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 8px;
    }
    
    .appointment-item[b-cit78rjxkw] {
        font-size: 12px;
        padding: 5px 8px;
        margin-bottom: 2px;
        min-height: 24px;
        border-radius: 5px;
    }
    
    /* Week view optimizations for tablet */
    .week-view[b-cit78rjxkw] {
        height: 500px;
    }
    
    .week-day-header[b-cit78rjxkw] {
        padding: 10px 6px;
        font-size: 13px;
    }
    
    .time-slot[b-cit78rjxkw] {
        min-height: 50px;
        padding: 8px 6px;
    }
    
    /* Modal optimizations for tablet */
    .modal-content[b-cit78rjxkw] {
        width: 85%;
        max-width: 600px;
        padding: 24px;
        border-radius: 10px;
    }
    
    .modal-footer[b-cit78rjxkw] {
        flex-direction: row;
        justify-content: flex-end;
        gap: 12px;
    }
    
    .modal-footer .btn[b-cit78rjxkw] {
        width: auto;
        min-width: 120px;
        font-size: 15px;
        padding: 12px 18px;
    }
}

/* Very small screens (phones in portrait) */
@media (max-width: 480px) {
    .sales-calendar-container[b-cit78rjxkw] {
        padding: 10px;
    }
    
    .calendar-header[b-cit78rjxkw] {
        padding: 12px;
    }
    
    .calendar-title[b-cit78rjxkw] {
        font-size: 1.2rem;
    }
    
    .view-controls .btn[b-cit78rjxkw] {
        font-size: 14px;
        padding: 10px 12px;
    }
    
    .current-date[b-cit78rjxkw] {
        font-size: 14px;
    }
    
    .day-cell[b-cit78rjxkw] {
        min-height: 70px;
        padding: 8px 4px;
    }
    
    .day-number[b-cit78rjxkw] {
        font-size: 14px;
    }
    
    .appointment-item[b-cit78rjxkw] {
        font-size: 11px;
        padding: 4px 6px;
        min-height: 22px; /* Slightly larger for very small screens */
        border-radius: 5px;
        font-weight: 500;
    }
    
    .modal-content[b-cit78rjxkw] {
        width: 98%;
        padding: 16px;
        margin: 10px auto;
        border-radius: 12px; /* More modern rounded corners */
    }
    
    .btn[b-cit78rjxkw] {
        font-size: 16px; /* Consistent with form improvements */
        padding: 16px 20px; /* Better touch targets */
        min-height: 52px;
        border-radius: 10px;
    }
    
    .week-day-header[b-cit78rjxkw] {
        padding: 8px 2px;
    }
    
    .day-name[b-cit78rjxkw] {
        font-size: 10px;
    }
    
    .day-number[b-cit78rjxkw] {
        font-size: 14px;
    }
}
/* _content/NexaCRM.UI/Pages/SalesForecastingTool.razor.rz.scp.css */
.table-fe3baa63-70a6-4fa9-a5b3-b6eeab1ba4e9-column-120[b-l75hgb14n2] {
  width: 400px;
}
.table-fe3baa63-70a6-4fa9-a5b3-b6eeab1ba4e9-column-240[b-l75hgb14n2] {
  width: 400px;
}
.table-fe3baa63-70a6-4fa9-a5b3-b6eeab1ba4e9-column-360[b-l75hgb14n2] {
  width: 400px;
}
.table-fe3baa63-70a6-4fa9-a5b3-b6eeab1ba4e9-column-480[b-l75hgb14n2] {
  width: 400px;
}
.table-fe3baa63-70a6-4fa9-a5b3-b6eeab1ba4e9-column-600[b-l75hgb14n2] {
  width: 400px;
}
@container (min-width: 720px) {
  .table-fe3baa63-70a6-4fa9-a5b3-b6eeab1ba4e9-column-120[b-l75hgb14n2] {
    width: 120px;
  }
  .table-fe3baa63-70a6-4fa9-a5b3-b6eeab1ba4e9-column-240[b-l75hgb14n2] {
    width: 240px;
  }
  .table-fe3baa63-70a6-4fa9-a5b3-b6eeab1ba4e9-column-360[b-l75hgb14n2] {
    width: 360px;
  }
  .table-fe3baa63-70a6-4fa9-a5b3-b6eeab1ba4e9-column-480[b-l75hgb14n2] {
    width: 480px;
  }
  .table-fe3baa63-70a6-4fa9-a5b3-b6eeab1ba4e9-column-600[b-l75hgb14n2] {
    width: 600px;
  }
}
/* _content/NexaCRM.UI/Pages/SalesPipelinePage.razor.rz.scp.css */
@container(max-width:120px){.table-95fef262-a922-4bfe-a4c4-b7dc2d92c3ad-column-120[b-dnzy0kxelm]{display: none;}}
@container(max-width:240px){.table-95fef262-a922-4bfe-a4c4-b7dc2d92c3ad-column-240[b-dnzy0kxelm]{display: none;}}
@container(max-width:360px){.table-95fef262-a922-4bfe-a4c4-b7dc2d92c3ad-column-360[b-dnzy0kxelm]{display: none;}}

.pipeline-filter-row[b-dnzy0kxelm] {
    align-items: flex-end;
}

.pipeline-filter-control[b-dnzy0kxelm] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 180px;
}

.pipeline-filter-label[b-dnzy0kxelm] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4d6a99;
}

.pipeline-filter-select-wrapper[b-dnzy0kxelm] {
    position: relative;
}

.pipeline-filter-select-wrapper[b-dnzy0kxelm]::after {
    content: "";
    position: absolute;
    pointer-events: none;
    top: 50%;
    right: 1rem;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid #0e131b;
    border-bottom: 2px solid #0e131b;
    transform: translateY(-25%) rotate(45deg);
}

.pipeline-filter-select[b-dnzy0kxelm] {
    width: 100%;
    appearance: none;
    border: 1px solid #d0d9e7;
    border-radius: 0.75rem;
    background-color: #e7ecf3;
    color: #0e131b;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 2.75rem 0.5rem 0.75rem;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pipeline-filter-select:focus[b-dnzy0kxelm] {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.filter-summary[b-dnzy0kxelm] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 1.5rem 1rem 1.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid #d0d9e7;
    border-radius: 0.75rem;
    background-color: #f8fafc;
}

.filter-summary--active[b-dnzy0kxelm] {
    border-color: #6366f1;
    background-color: #eef2ff;
}

.filter-summary--muted[b-dnzy0kxelm] {
    color: #4d6a99;
    font-size: 0.875rem;
}

.filter-summary__meta[b-dnzy0kxelm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
}

.filter-summary__count[b-dnzy0kxelm] {
    font-weight: 600;
    color: #0e131b;
}

.clear-filters-button[b-dnzy0kxelm] {
    border: none;
    background: #ffffff;
    color: #4d6a99;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.clear-filters-button:hover[b-dnzy0kxelm] {
    background: #4d6a99;
    color: #ffffff;
}

.filter-summary__badges[b-dnzy0kxelm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.active-filter-badge[b-dnzy0kxelm] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background: #e7ecf3;
    color: #0e131b;
    font-size: 0.75rem;
    font-weight: 600;
}

.filter-summary--loading[b-dnzy0kxelm] {
    gap: 0.75rem;
    color: transparent;
}

.filter-summary--loading .skeleton[b-dnzy0kxelm] {
    display: block;
    height: 0.875rem;
    max-width: 220px;
}

.filter-summary--loading .skeleton--short[b-dnzy0kxelm] {
    max-width: 140px;
}

.filter-summary--loading .skeleton--wide[b-dnzy0kxelm] {
    max-width: 260px;
}

.pipeline-table[b-dnzy0kxelm] {
    width: 100%;
    border-collapse: collapse;
}

.pipeline-table__body[b-dnzy0kxelm] {
    background-color: #ffffff;
}

.pipeline-table__header[b-dnzy0kxelm] {
    position: relative;
    transition: color 0.2s ease;
}

.pipeline-table__header:hover[b-dnzy0kxelm] {
    color: #111827;
}

.pipeline-row[b-dnzy0kxelm] {
    transition: background-color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
}

.pipeline-row--data[b-dnzy0kxelm] {
    background-color: #ffffff;
    animation: pipeline-row-enter-b-dnzy0kxelm 0.32s ease both;
}

.pipeline-row--data:hover[b-dnzy0kxelm],
.pipeline-row--data:focus-within[b-dnzy0kxelm] {
    background-color: rgba(99, 102, 241, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 18px 30px -22px rgba(15, 23, 42, 0.55);
}

.pipeline-table__cell[b-dnzy0kxelm] {
    position: relative;
    vertical-align: middle;
}

.pipeline-row--skeleton .pipeline-table__cell[b-dnzy0kxelm] {
    padding-block: 1.35rem;
}

.pipeline-row--skeleton .skeleton[b-dnzy0kxelm] {
    display: block;
}

.pipeline-row--skeleton .skeleton + .skeleton[b-dnzy0kxelm] {
    margin-top: 0.25rem;
}

.skeleton--text[b-dnzy0kxelm] {
    height: 0.875rem;
    border-radius: 999px;
}

.skeleton--short[b-dnzy0kxelm],
.skeleton--wide[b-dnzy0kxelm],
.skeleton--stage[b-dnzy0kxelm],
.skeleton--count[b-dnzy0kxelm],
.skeleton--amount[b-dnzy0kxelm] {
    display: block;
}

.skeleton--short[b-dnzy0kxelm] {
    width: 36%;
}

.skeleton--wide[b-dnzy0kxelm] {
    width: 72%;
}

.skeleton--stage[b-dnzy0kxelm] {
    width: 68%;
}

.skeleton--count[b-dnzy0kxelm] {
    width: 48%;
}

.skeleton--amount[b-dnzy0kxelm] {
    width: 58%;
}

@keyframes pipeline-row-enter-b-dnzy0kxelm {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pipeline-row[b-dnzy0kxelm],
    .pipeline-row--data[b-dnzy0kxelm] {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

@media (max-width: 768px) {
    .pipeline-filter-control[b-dnzy0kxelm] {
        min-width: 100%;
    }

    .filter-summary[b-dnzy0kxelm] {
        margin-inline: 1rem;
    }
}
/* _content/NexaCRM.UI/Pages/SalesTeamGoalSettingAndTrackingInterface.razor.rz.scp.css */
@container(max-width:120px){.table-c5f21fe6-73ff-4a5e-9196-1afba15ada0e-column-120[b-xpnoal6c4k]{display: none;}}
@container(max-width:240px){.table-c5f21fe6-73ff-4a5e-9196-1afba15ada0e-column-240[b-xpnoal6c4k]{display: none;}}
@container(max-width:360px){.table-c5f21fe6-73ff-4a5e-9196-1afba15ada0e-column-360[b-xpnoal6c4k]{display: none;}}
@container(max-width:480px){.table-c5f21fe6-73ff-4a5e-9196-1afba15ada0e-column-480[b-xpnoal6c4k]{display: none;}}
@container(max-width:600px){.table-c5f21fe6-73ff-4a5e-9196-1afba15ada0e-column-600[b-xpnoal6c4k]{display: none;}}
@container(max-width:720px){.table-c5f21fe6-73ff-4a5e-9196-1afba15ada0e-column-720[b-xpnoal6c4k]{display: none;}}
/* _content/NexaCRM.UI/Pages/SecuritySettingsPage.razor.rz.scp.css */
/* SecuritySettingsPage Mobile Responsive Styles */

.security-settings-form[b-aaxqiqly6p] {
    max-width: 600px;
}

@media (max-width: 768px) {
    .security-settings-form[b-aaxqiqly6p] {
        padding: 0.5rem;
    }

    .security-settings-form button[b-aaxqiqly6p] {
        width: 100%;
    }
}
/* _content/NexaCRM.UI/Pages/SenderNumberManagementPage.razor.rz.scp.css */
@media (max-width: 576px) {
    .add-btn[b-3q2151dmqo] {
        width: 100%;
    }
}
/* _content/NexaCRM.UI/Pages/SettingsPage.razor.rz.scp.css */
@container(max-width:120px){.table-ea08c9dc-38a0-443e-b93b-5bc9be11998c-column-120[b-4qnfrvfb3a]{display: none;}}
@container(max-width:240px){.table-ea08c9dc-38a0-443e-b93b-5bc9be11998c-column-240[b-4qnfrvfb3a]{display: none;}}
@container(max-width:360px){.table-ea08c9dc-38a0-443e-b93b-5bc9be11998c-column-360[b-4qnfrvfb3a]{display: none;}}
@container(max-width:480px){.table-ea08c9dc-38a0-443e-b93b-5bc9be11998c-column-480[b-4qnfrvfb3a]{display: none;}}
@container(max-width:600px){.table-ea08c9dc-38a0-443e-b93b-5bc9be11998c-column-600[b-4qnfrvfb3a]{display: none;}}

.user-table table[b-4qnfrvfb3a] {
    width: 100%;
}

@media (max-width: 640px) {
    .user-table thead[b-4qnfrvfb3a] {
        display: none;
    }

    .user-table tr[b-4qnfrvfb3a] {
        display: block;
        border-bottom: 1px solid #d0d9e7;
        margin-bottom: 0.75rem;
    }

    .user-table td[b-4qnfrvfb3a] {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem;
    }

    .user-table td[b-4qnfrvfb3a]::before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: 1rem;
    }
}

.modal-backdrop[b-4qnfrvfb3a] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content[b-4qnfrvfb3a] {
    background: white;
    border-radius: 8px;
    padding: 20px;
    max-width: 500px;
    width: 90%;
}
/* _content/NexaCRM.UI/Pages/SmsHistoryPage.razor.rz.scp.css */
/* SmsHistoryPage Mobile Responsive Styles */

.sms-history-table td:nth-child(2)[b-ozc37f4aaq] {
    word-break: break-word;
}

.sms-history-card[b-ozc37f4aaq] {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

@media (max-width: 576px) {
    .sms-filters .col-12:not(:last-child)[b-ozc37f4aaq] {
        margin-bottom: 0.5rem;
    }

    .pagination-controls button[b-ozc37f4aaq] {
        min-height: 44px;
    }
}
/* _content/NexaCRM.UI/Pages/SmsSchedulePage.razor.rz.scp.css */
.schedule-form .date-time-group[b-9qupy0grb8] {
    gap: 0.5rem;
}

@media (max-width: 576px) {
    .schedule-form button[type="submit"][b-9qupy0grb8] {
        width: 100%;
    }
}

.schedule-table td[b-9qupy0grb8] {
    vertical-align: middle;
}

@media (max-width: 576px) {
    .schedule-table td[b-9qupy0grb8] {
        white-space: nowrap;
    }
}
/* _content/NexaCRM.UI/Pages/SmsSentHistoryPage.razor.rz.scp.css */
.sms-sent-history[b-0u4wm1p5gj] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    color: var(--bs-body-color);
}

.sent-history-header[b-0u4wm1p5gj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.header-titles h3[b-0u4wm1p5gj] {
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.header-titles p[b-0u4wm1p5gj] {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: 0.95rem;
}

.refresh-button[b-0u4wm1p5gj] {
    align-self: center;
    white-space: nowrap;
}

.summary-grid[b-0u4wm1p5gj] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.summary-card[b-0u4wm1p5gj] {
    padding: 1rem 1.25rem;
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-box-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.summary-label[b-0u4wm1p5gj] {
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.summary-value[b-0u4wm1p5gj] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--bs-body-color);
}

.summary-meta[b-0u4wm1p5gj] {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}

.filter-card[b-0u4wm1p5gj] {
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-box-shadow-sm);
}

.filter-grid[b-0u4wm1p5gj] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.filter-group[b-0u4wm1p5gj] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-dates[b-0u4wm1p5gj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-separator[b-0u4wm1p5gj] {
    color: var(--bs-secondary-color);
    font-weight: 500;
}

.quick-buttons[b-0u4wm1p5gj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.quick-buttons .btn-link[b-0u4wm1p5gj] {
    font-size: 0.9rem;
}

.loading-state[b-0u4wm1p5gj],
.empty-state[b-0u4wm1p5gj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    color: var(--bs-secondary-color);
    background: var(--bs-body-bg);
}

.empty-state i[b-0u4wm1p5gj] {
    font-size: 2rem;
    color: var(--bs-secondary-color);
}

.sent-history-table-wrapper[b-0u4wm1p5gj] {
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--bs-border-color);
    overflow: hidden;
    box-shadow: var(--bs-box-shadow-sm);
}

.sent-history-table thead th[b-0u4wm1p5gj] {
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-weight: 600;
    font-size: 0.9rem;
}

.message-column[b-0u4wm1p5gj] {
    max-width: 320px;
    width: 30%;
}

.message-preview[b-0u4wm1p5gj] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    line-height: 1.4;
}

.attachment-details summary[b-0u4wm1p5gj] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--bs-primary);
    font-weight: 500;
    list-style: none;
}

.attachment-details summary[b-0u4wm1p5gj]::-webkit-details-marker {
    display: none;
}

.attachment-details[open] summary[b-0u4wm1p5gj] {
    margin-bottom: 0.5rem;
}

.attachment-list[b-0u4wm1p5gj] {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.attachment-list li[b-0u4wm1p5gj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
}

.attachment-name[b-0u4wm1p5gj] {
    font-weight: 500;
    color: var(--bs-body-color);
}

.attachment-size[b-0u4wm1p5gj] {
    font-size: 0.8rem;
}

.status-pill[b-0u4wm1p5gj] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-sent[b-0u4wm1p5gj] {
    background-color: rgba(var(--bs-success-rgb), 0.15);
    color: var(--bs-success);
}

.status-failed[b-0u4wm1p5gj] {
    background-color: rgba(var(--bs-danger-rgb), 0.15);
    color: var(--bs-danger);
}

.status-scheduled[b-0u4wm1p5gj] {
    background-color: rgba(var(--bs-warning-rgb), 0.2);
    color: var(--bs-warning-text-emphasis);
}

.sent-history-pagination[b-0u4wm1p5gj] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.pagination-info[b-0u4wm1p5gj] {
    font-size: 0.95rem;
    color: var(--bs-secondary-color);
}

@media (max-width: 768px) {
    .sent-history-header[b-0u4wm1p5gj] {
        flex-direction: column;
        align-items: stretch;
    }

    .refresh-button[b-0u4wm1p5gj] {
        align-self: flex-start;
    }

    .message-column[b-0u4wm1p5gj] {
        max-width: none;
        width: auto;
    }

    .summary-grid[b-0u4wm1p5gj] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}
/* _content/NexaCRM.UI/Pages/SmsSettingsPage.razor.rz.scp.css */
/* SmsSettingsPage responsive styles */

.sms-settings-form[b-5cb2nkxnen] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 28rem;
}

.form-field[b-5cb2nkxnen] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.input[b-5cb2nkxnen] {
    padding: 0.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
}

.save-button[b-5cb2nkxnen] {
    align-self: flex-start;
    padding: 0.5rem 1rem;
    background-color: #2a74ea;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.save-button:hover[b-5cb2nkxnen] {
    background-color: #1e5bb8;
}

@media (max-width: 640px) {
    .sms-settings-form[b-5cb2nkxnen] {
        padding: 0 1rem;
        width: 100%;
    }

    .save-button[b-5cb2nkxnen] {
        width: 100%;
    }
}
/* _content/NexaCRM.UI/Pages/StarredDbListPage.razor.rz.scp.css */
.table-hover tbody tr:hover[b-vaejt268e6] {
    cursor: pointer;
}

.table-responsive[b-vaejt268e6] {
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    background-color: #ffffff;
}
/* _content/NexaCRM.UI/Pages/StatisticsDashboardPage.razor.rz.scp.css */
/* StatisticsDashboardPage styles */

.dashboard-header[b-ntpoj32zt7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(1.25rem, 4vw, 3rem);
    margin-bottom: clamp(1.5rem, 4vw, 2.75rem);
}

.dashboard-header__copy h3[b-ntpoj32zt7] {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    color: #0f172a;
}

.dashboard-header__eyebrow[b-ntpoj32zt7] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(15, 23, 42, 0.55);
    margin-bottom: 0.35rem;
}

.dashboard-header__subtitle[b-ntpoj32zt7] {
    margin-top: 0.5rem;
    margin-bottom: 0;
    max-width: 46ch;
    color: #475569;
    line-height: 1.55;
}

.dashboard-header__meta[b-ntpoj32zt7] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-end;
    font-weight: 600;
    color: #1e293b;
}

.dashboard-header__range[b-ntpoj32zt7] {
    font-size: 0.95rem;
}

.dashboard-header__window[b-ntpoj32zt7] {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.08);
    color: #2563eb;
}

.dashboard-toolbar[b-ntpoj32zt7] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(1rem, 3vw, 1.75rem);
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.quick-ranges[b-ntpoj32zt7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.quick-range-button[b-ntpoj32zt7] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.65rem 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 18px 36px -28px rgba(15, 23, 42, 0.45);
    color: #0f172a;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    min-width: 110px;
}

.quick-range-button:hover:not(:disabled)[b-ntpoj32zt7],
.quick-range-button:focus-visible:not(:disabled)[b-ntpoj32zt7] {
    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 22px 44px -28px rgba(59, 130, 246, 0.45);
}

.quick-range-button:disabled[b-ntpoj32zt7] {
    cursor: not-allowed;
    opacity: 0.6;
}

.quick-range-button.active[b-ntpoj32zt7] {
    border-color: rgba(37, 99, 235, 0.65);
    background: linear-gradient(150deg, rgba(37, 99, 235, 0.16) 0%, rgba(14, 165, 233, 0.12) 100%);
    box-shadow: 0 24px 48px -26px rgba(37, 99, 235, 0.55);
}

.quick-range-button__label[b-ntpoj32zt7] {
    font-weight: 700;
    font-size: 0.95rem;
}

.quick-range-button__caption[b-ntpoj32zt7] {
    font-size: 0.75rem;
    color: #64748b;
}

.date-range[b-ntpoj32zt7] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.85rem;
}

.date-field[b-ntpoj32zt7] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
}

.date-field input[type="date"][b-ntpoj32zt7] {
    padding: 0.55rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.55);
    background: #f8fafc;
    color: #0f172a;
    font-size: 0.85rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.date-field input[type="date"]:focus[b-ntpoj32zt7] {
    outline: none;
    border-color: rgba(37, 99, 235, 0.7);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    background: #ffffff;
}

.btn-refresh[b-ntpoj32zt7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.35rem;
    border-radius: 0.85rem;
    border: none;
    background: linear-gradient(135deg, #2563eb 0%, #4338ca 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    min-width: 120px;
}

.btn-refresh:hover:not(:disabled)[b-ntpoj32zt7],
.btn-refresh:focus-visible:not(:disabled)[b-ntpoj32zt7] {
    transform: translateY(-1px);
    box-shadow: 0 18px 38px -20px rgba(37, 99, 235, 0.6);
}

.btn-refresh:disabled[b-ntpoj32zt7] {
    cursor: not-allowed;
    filter: grayscale(0.25);
    opacity: 0.8;
}

.summary-tiles[b-ntpoj32zt7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(1.25rem, 3vw, 1.75rem);
    margin: var(--spacing-md, 1rem) 0 clamp(1.5rem, 3vw, 2.25rem);
}

.summary-tiles .tile[b-ntpoj32zt7] {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    align-items: center;
    padding: clamp(1.2rem, 3vw, 1.65rem);
    border-radius: 1.25rem;
    border: 1px solid rgba(var(--tile-accent-rgb, 59, 130, 246), 0.25);
    background: linear-gradient(150deg, rgba(var(--tile-accent-rgb, 59, 130, 246), 0.18) 0%, rgba(255, 255, 255, 0.95) 78%);
    box-shadow: 0 24px 48px -28px rgba(15, 23, 42, 0.45);
    color: #0f172a;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.summary-tiles .tile[b-ntpoj32zt7]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 120% at 0% 0%, rgba(var(--tile-accent-rgb, 59, 130, 246), 0.25) 0%, rgba(var(--tile-accent-rgb, 59, 130, 246), 0) 68%);
    opacity: 0.9;
    pointer-events: none;
}

.summary-tiles .tile:hover[b-ntpoj32zt7],
.summary-tiles .tile:focus-within[b-ntpoj32zt7] {
    transform: translateY(-4px);
    box-shadow: 0 28px 56px -28px rgba(15, 23, 42, 0.55);
}

.tile__icon[b-ntpoj32zt7] {
    position: relative;
    z-index: 1;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.7);
    color: var(--tile-accent, #2563eb);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 10px 24px -16px rgba(15, 23, 42, 0.45);
}

.tile__icon svg[b-ntpoj32zt7] {
    width: 1.6rem;
    height: 1.6rem;
}

.tile__content[b-ntpoj32zt7] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.tile__label[b-ntpoj32zt7] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(15, 23, 42, 0.6);
}

.tile__value[b-ntpoj32zt7] {
    font-size: clamp(1.7rem, 3.5vw, 2.1rem);
    font-weight: 700;
    color: #0f172a;
}

.tile__meta[b-ntpoj32zt7] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.1rem;
}

.tile__delta[b-ntpoj32zt7] {
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

.tile__delta.positive[b-ntpoj32zt7] {
    background: rgba(34, 197, 94, 0.18);
    color: #16a34a;
}

.tile__delta.negative[b-ntpoj32zt7] {
    background: rgba(248, 113, 113, 0.2);
    color: #f43f5e;
}

.tile__delta.neutral[b-ntpoj32zt7] {
    background: rgba(148, 163, 184, 0.18);
    color: #64748b;
}

.tile__caption[b-ntpoj32zt7] {
    font-size: 0.75rem;
    color: #64748b;
}

.tile__hint[b-ntpoj32zt7] {
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: rgba(71, 85, 105, 0.85);
}

.trend-charts[b-ntpoj32zt7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(1.5rem, 3vw, 2rem);
    align-items: stretch;
    margin-top: clamp(1.75rem, 3vw, 2.25rem);
}

.chart-card[b-ntpoj32zt7] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(1.35rem, 3vw, 1.85rem);
    padding: clamp(1.45rem, 3vw, 2rem);
    border-radius: 1.25rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 24px 48px -28px rgba(15, 23, 42, 0.4);
    overflow: hidden;
    --chart-accent: #4c6ef5;
    --chart-accent-rgb: 76, 110, 245;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chart-card[b-ntpoj32zt7]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(135% 135% at 0% 0%, rgba(var(--chart-accent-rgb), 0.2) 0%, rgba(var(--chart-accent-rgb), 0) 68%);
    opacity: 0.75;
    pointer-events: none;
}

.chart-card:hover[b-ntpoj32zt7],
.chart-card:focus-within[b-ntpoj32zt7] {
    transform: translateY(-4px);
    box-shadow: 0 32px 64px -30px rgba(15, 23, 42, 0.55);
}

.chart-card__header[b-ntpoj32zt7],
.chart-card__chart[b-ntpoj32zt7],
.chart-card__axis[b-ntpoj32zt7],
.chart-card__empty[b-ntpoj32zt7] {
    position: relative;
    z-index: 1;
}

.chart-card__header[b-ntpoj32zt7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.chart-card__titles[b-ntpoj32zt7] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.chart-card__eyebrow[b-ntpoj32zt7] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(15, 23, 42, 0.58);
}

.chart-card__titles h4[b-ntpoj32zt7] {
    margin: 0;
    font-size: clamp(1.05rem, 2.6vw, 1.25rem);
    color: #0f172a;
}

.chart-card__subtitle[b-ntpoj32zt7] {
    font-size: 0.85rem;
    color: #64748b;
}

.chart-card__value[b-ntpoj32zt7] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    text-align: right;
}

.chart-card__number[b-ntpoj32zt7] {
    font-size: clamp(1.6rem, 3vw, 1.95rem);
    font-weight: 700;
    color: #0f172a;
}

.chart-card__badge[b-ntpoj32zt7] {
    align-self: center;
    padding: 0.3rem 0.85rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.75rem;
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}

.chart-card__badge.positive[b-ntpoj32zt7] {
    background: rgba(34, 197, 94, 0.18);
    color: #16a34a;
}

.chart-card__badge.negative[b-ntpoj32zt7] {
    background: rgba(248, 113, 113, 0.2);
    color: #f43f5e;
}

.chart-card__badge.neutral[b-ntpoj32zt7] {
    background: rgba(148, 163, 184, 0.18);
    color: #64748b;
}

.chart-card__chart[b-ntpoj32zt7] {
    position: relative;
    height: clamp(180px, 32vw, 220px);
}

.chart-card__chart svg[b-ntpoj32zt7] {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.chart-grid line[b-ntpoj32zt7] {
    stroke: rgba(148, 163, 184, 0.22);
    stroke-width: 0.6;
    stroke-dasharray: 2 6;
}

.chart-line[b-ntpoj32zt7] {
    fill: none;
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
    animation: chartLineDraw-b-ntpoj32zt7 1.3s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.chart-dot[b-ntpoj32zt7] {
    stroke: #ffffff;
    stroke-width: 0.6;
    opacity: 0;
    animation: chartDotPop-b-ntpoj32zt7 0.65s ease forwards 0.85s;
}

.chart-area[b-ntpoj32zt7] {
    transform-box: fill-box;
    transform-origin: bottom center;
    transform: scaleY(0.05);
    opacity: 0;
    animation: chartAreaReveal-b-ntpoj32zt7 1.1s ease forwards;
}

.chart-card__axis[b-ntpoj32zt7] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.chart-card__axis span[b-ntpoj32zt7] {
    white-space: nowrap;
}

.chart-card__insights[b-ntpoj32zt7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    padding-top: 0.25rem;
}

.chart-insight[b-ntpoj32zt7] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem;
    border-radius: 0.85rem;
    background: rgba(var(--chart-accent-rgb, 148, 163, 184), 0.12);
    border: 1px solid rgba(var(--chart-accent-rgb, 148, 163, 184), 0.18);
    color: #1e293b;
}

.chart-insight__label[b-ntpoj32zt7] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(71, 85, 105, 0.85);
}

.chart-insight__value[b-ntpoj32zt7] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
}

.chart-card__empty[b-ntpoj32zt7] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    font-size: 0.95rem;
    color: #64748b;
    background: rgba(148, 163, 184, 0.08);
    border-radius: 1rem;
}

@keyframes chartLineDraw-b-ntpoj32zt7 {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes chartAreaReveal-b-ntpoj32zt7 {
    from {
        transform: scaleY(0.05);
        opacity: 0;
    }

    to {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes chartDotPop-b-ntpoj32zt7 {
    from {
        opacity: 0;
        transform: scale(0.65);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .quick-range-button[b-ntpoj32zt7],
    .summary-tiles .tile[b-ntpoj32zt7],
    .chart-card[b-ntpoj32zt7],
    .chart-line[b-ntpoj32zt7],
    .chart-area[b-ntpoj32zt7],
    .chart-dot[b-ntpoj32zt7] {
        transition-duration: 0s !important;
        animation: none !important;
        transform: none !important;
        stroke-dashoffset: 0 !important;
        opacity: 1 !important;
    }
}

@media (max-width: 1024px) {
    .dashboard-header[b-ntpoj32zt7] {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-header__meta[b-ntpoj32zt7] {
        align-items: flex-start;
    }
}

@media (max-width: 900px) {
    .dashboard-toolbar[b-ntpoj32zt7] {
        gap: 1.25rem;
    }

    .quick-range-button[b-ntpoj32zt7] {
        min-width: 100px;
    }

    .chart-card__header[b-ntpoj32zt7] {
        flex-direction: column;
        align-items: flex-start;
    }

    .chart-card__value[b-ntpoj32zt7] {
        align-items: center;
        text-align: left;
    }

    .chart-card__insights[b-ntpoj32zt7] {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

@media (max-width: 768px) {
    .dashboard-toolbar[b-ntpoj32zt7] {
        flex-direction: column;
        align-items: stretch;
    }

    .quick-ranges[b-ntpoj32zt7] {
        width: 100%;
    }

    .quick-range-button[b-ntpoj32zt7] {
        flex: 1 1 130px;
        width: 100%;
    }

    .date-range[b-ntpoj32zt7] {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 600px) {
    .summary-tiles[b-ntpoj32zt7] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .summary-tiles .tile[b-ntpoj32zt7] {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .tile__icon[b-ntpoj32zt7] {
        width: 2.75rem;
        height: 2.75rem;
    }

    .dashboard-header__meta[b-ntpoj32zt7] {
        width: 100%;
        align-items: flex-start;
    }

    .chart-card[b-ntpoj32zt7] {
        padding: 1.3rem;
    }

    .chart-card__insights[b-ntpoj32zt7] {
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
    }

    .date-range[b-ntpoj32zt7] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _content/NexaCRM.UI/Pages/SystemAdminSettingsPage.razor.rz.scp.css */
/* SystemAdminSettingsPage Mobile Responsive Styles */

.admin-form[b-k9mzbnghu2] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.admin-table-container[b-k9mzbnghu2] {
    overflow-x: auto;
}

.admins-mobile-view[b-k9mzbnghu2] {
    display: none;
}

.admin-card[b-k9mzbnghu2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}

.admin-info[b-k9mzbnghu2] {
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .admin-form[b-k9mzbnghu2] {
        flex-direction: column;
    }

    .admin-form input[b-k9mzbnghu2],
    .admin-form button[b-k9mzbnghu2] {
        width: 100%;
    }

    .admin-table-container[b-k9mzbnghu2] {
        display: none;
    }

    .admins-mobile-view[b-k9mzbnghu2] {
        display: block;
    }
}
/* _content/NexaCRM.UI/Pages/SystemInfoPage.razor.rz.scp.css */
/* SystemInfoPage responsive styles */

.system-info-section[b-9cbhu6ejoe] {
    background-color: var(--surface-color);
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.section-title[b-9cbhu6ejoe] {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.section-content[b-9cbhu6ejoe] {
    margin-bottom: 0.5rem;
}

.section-list[b-9cbhu6ejoe] {
    margin-left: 1.25rem;
    margin-bottom: 0.5rem;
}

.download-link[b-9cbhu6ejoe] {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 0.75rem;
}

@media (min-width: 640px) {
    .system-info-section[b-9cbhu6ejoe] {
        padding: 1.5rem;
    }

    .download-link[b-9cbhu6ejoe] {
        width: auto;
        display: inline-block;
    }
}

/* _content/NexaCRM.UI/Pages/TeamManagementPage.razor.rz.scp.css */
.team-management-page[b-nhqzamydoi] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.page-header[b-nhqzamydoi],
.filter-card[b-nhqzamydoi],
.table-card[b-nhqzamydoi],
.new-team-card[b-nhqzamydoi] {
    border: none;
    border-radius: 1rem;
}

.page-header[b-nhqzamydoi] {
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, #f9fbff 0%, #f0f4ff 100%);
    align-items: center;
}

.page-header h2[b-nhqzamydoi] {
    font-weight: 700;
}

.summary-box[b-nhqzamydoi] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    color: #1f3c88;
}

.summary-label[b-nhqzamydoi] {
    font-size: 0.85rem;
    letter-spacing: 0.1em;
}

.summary-value[b-nhqzamydoi] {
    font-size: 2rem;
    font-weight: 700;
}

.filter-card[b-nhqzamydoi],
.new-team-card[b-nhqzamydoi],
.table-card[b-nhqzamydoi] {
    padding: 1.5rem;
    background-color: #ffffff;
}

.filter-card label[b-nhqzamydoi],
.new-team-card label[b-nhqzamydoi] {
    font-weight: 600;
    color: #4a5568;
}

.filter-card .btn[b-nhqzamydoi],
.action-bar .btn[b-nhqzamydoi] {
    min-width: 6.5rem;
}

.action-bar[b-nhqzamydoi] {
    display: flex;
    justify-content: flex-end;
}

.new-team-card .card-header[b-nhqzamydoi] {
    border-bottom: none;
    background: transparent;
}

.new-team-card .card-body[b-nhqzamydoi] {
    padding-top: 0;
}

.table-card table[b-nhqzamydoi] {
    margin-bottom: 0;
}

.table-card thead th[b-nhqzamydoi] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #4a5568;
    background-color: #f7f9fc;
}

.table-card tbody td[b-nhqzamydoi] {
    vertical-align: middle;
}

.table-card tbody tr:hover[b-nhqzamydoi] {
    background-color: #f5f7fb;
}

@media (min-width: 768px) {
    .page-header[b-nhqzamydoi],
    .filter-card[b-nhqzamydoi],
    .table-card[b-nhqzamydoi],
    .new-team-card[b-nhqzamydoi] {
        padding: 2rem 2.5rem;
        border-radius: 1.25rem;
    }

    .summary-value[b-nhqzamydoi] {
        font-size: 2.4rem;
    }

    .table-card .table[b-nhqzamydoi] {
        font-size: 1rem;
    }

    .table-card thead th[b-nhqzamydoi],
    .table-card tbody td[b-nhqzamydoi] {
        padding: 1.1rem 1.25rem;
    }
}

@media (max-width: 767.98px) {
    .page-header[b-nhqzamydoi] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .summary-box[b-nhqzamydoi] {
        align-items: flex-start;
    }

    .filter-card .row > div:last-child[b-nhqzamydoi] {
        justify-content: flex-start !important;
    }
}
/* _content/NexaCRM.UI/Pages/TeamMemberManagementPage.razor.rz.scp.css */
.team-member-page[b-9cnp7615z8] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.page-header[b-9cnp7615z8],
.filter-card[b-9cnp7615z8],
.table-card[b-9cnp7615z8],
.new-member-card[b-9cnp7615z8] {
    border: none;
    border-radius: 1rem;
}

.page-header[b-9cnp7615z8] {
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, #fef6ff 0%, #f0f2ff 100%);
    align-items: center;
}

.page-header h2[b-9cnp7615z8] {
    font-weight: 700;
}

.summary-box[b-9cnp7615z8] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    color: #5a189a;
}

.summary-label[b-9cnp7615z8] {
    font-size: 0.85rem;
    letter-spacing: 0.1em;
}

.summary-value[b-9cnp7615z8] {
    font-size: 2rem;
    font-weight: 700;
}

.filter-card[b-9cnp7615z8],
.new-member-card[b-9cnp7615z8],
.table-card[b-9cnp7615z8] {
    padding: 1.5rem;
    background-color: #ffffff;
}

.filter-card label[b-9cnp7615z8],
.new-member-card label[b-9cnp7615z8] {
    font-weight: 600;
    color: #4a5568;
}

.filter-card .btn[b-9cnp7615z8],
.action-bar .btn[b-9cnp7615z8] {
    min-width: 6rem;
}

.filter-card .btn.active[b-9cnp7615z8],
.filter-card .btn:active[b-9cnp7615z8] {
    color: #ffffff;
    background-color: #5a189a;
    border-color: #5a189a;
}

.action-bar[b-9cnp7615z8] {
    display: flex;
    justify-content: flex-end;
}

.new-member-card .card-header[b-9cnp7615z8] {
    border-bottom: none;
    background: transparent;
}

.new-member-card .card-body[b-9cnp7615z8] {
    padding-top: 0;
}

.table-card table[b-9cnp7615z8] {
    margin-bottom: 0;
}

.table-card thead th[b-9cnp7615z8] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #4a5568;
    background-color: #f7f9fc;
}

.table-card tbody td[b-9cnp7615z8] {
    vertical-align: middle;
}

.table-card tbody tr:hover[b-9cnp7615z8] {
    background-color: #f6f0ff;
}

@media (min-width: 768px) {
    .page-header[b-9cnp7615z8],
    .filter-card[b-9cnp7615z8],
    .table-card[b-9cnp7615z8],
    .new-member-card[b-9cnp7615z8] {
        padding: 2rem 2.5rem;
        border-radius: 1.25rem;
    }

    .summary-value[b-9cnp7615z8] {
        font-size: 2.4rem;
    }

    .filter-card .btn[b-9cnp7615z8],
    .action-bar .btn[b-9cnp7615z8] {
        min-width: 7rem;
    }

    .table-card .table[b-9cnp7615z8] {
        font-size: 1rem;
    }

    .table-card thead th[b-9cnp7615z8],
    .table-card tbody td[b-9cnp7615z8] {
        padding: 1.1rem 1.25rem;
    }
}

@media (max-width: 767.98px) {
    .page-header[b-9cnp7615z8] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .summary-box[b-9cnp7615z8] {
        align-items: flex-start;
    }

    .filter-card .row > div:last-child[b-9cnp7615z8] {
        margin-top: 0.5rem;
    }
}
/* _content/NexaCRM.UI/Pages/TestDashboard.razor.rz.scp.css */
/* Mobile Header Styles */
[data-mobile-header][b-k9865xrx0d] {
    display: none;
    background: #ffffff;
    border-bottom: 1px solid #e7ecf3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.mobile-header-content[b-k9865xrx0d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    min-height: 60px;
}

.mobile-menu-toggle[b-k9865xrx0d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    border-radius: 8px;
    color: #0e131b;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.mobile-menu-toggle:hover[b-k9865xrx0d] {
    background-color: #f3f4f6;
}

.mobile-menu-toggle:active[b-k9865xrx0d] {
    transform: scale(0.95);
}

.mobile-header-title[b-k9865xrx0d] {
    flex: 1;
    text-align: center;
}

.mobile-title[b-k9865xrx0d] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #0e131b;
    margin: 0;
}

.mobile-header-actions[b-k9865xrx0d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mobile-action-btn[b-k9865xrx0d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    border-radius: 8px;
    color: #0e131b;
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;
}

.mobile-action-btn:hover[b-k9865xrx0d] {
    background-color: #f3f4f6;
}

.mobile-action-btn:active[b-k9865xrx0d] {
    transform: scale(0.95);
}

.notification-badge[b-k9865xrx0d] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #ef4444;
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 0.75rem;
    font-weight: 500;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
}

/* Mobile Search Bar */
.mobile-search-bar[b-k9865xrx0d] {
    background: #ffffff;
    border-top: 1px solid #e7ecf3;
    padding: 0;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease, padding 0.3s ease;
}

.mobile-search-bar.expanded[b-k9865xrx0d] {
    height: 60px;
    padding: 0.75rem 1rem;
}

.mobile-search-input[b-k9865xrx0d] {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    gap: 0.75rem;
    width: 100%;
}

.mobile-search-input svg[b-k9865xrx0d] {
    color: #6b7280;
    flex-shrink: 0;
}

.mobile-search-input input[b-k9865xrx0d] {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 1rem;
    color: #0e131b;
}

.mobile-search-input input[b-k9865xrx0d]::placeholder {
    color: #9ca3af;
}

.mobile-search-close[b-k9865xrx0d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.mobile-search-close:hover[b-k9865xrx0d] {
    background-color: #e5e7eb;
}

/* Mobile Quick Actions */
.mobile-quick-actions[b-k9865xrx0d] {
    display: none;
    background: #ffffff;
    border-bottom: 1px solid #e7ecf3;
    padding: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.quick-action-btn[b-k9865xrx0d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    height: 80px;
    background: #f8f9fa;
    border: 1px solid #e7ecf3;
    border-radius: 12px;
    color: #0e131b;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    padding: 0.75rem;
    gap: 0.5rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.quick-action-btn:hover[b-k9865xrx0d] {
    background: #f3f4f6;
    border-color: #d1d5db;
    transform: translateY(-2px);
}

.quick-action-btn:active[b-k9865xrx0d] {
    transform: translateY(0) scale(0.95);
}

.quick-action-btn span[b-k9865xrx0d] {
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
    color: inherit;
}

/* Mobile Notifications Panel */
.mobile-notifications-panel[b-k9865xrx0d] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-notifications-panel.expanded[b-k9865xrx0d] {
    opacity: 1;
    visibility: visible;
}

.mobile-notifications-panel[b-k9865xrx0d]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: transparent;
}

.mobile-notifications-panel[b-k9865xrx0d]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: #ffffff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.mobile-notifications-panel.expanded[b-k9865xrx0d]::after {
    transform: translateY(0);
}

.mobile-notifications-header[b-k9865xrx0d] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    z-index: 1;
    padding: 1.5rem 1rem 1rem;
    background: transparent;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.mobile-notifications-header h3[b-k9865xrx0d] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #0e131b;
    margin: 0;
}

.mobile-notifications-close[b-k9865xrx0d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #f3f4f6;
    border: none;
    border-radius: 8px;
    color: #6b7280;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.mobile-notifications-close:hover[b-k9865xrx0d] {
    background-color: #e5e7eb;
}

.mobile-notifications-content[b-k9865xrx0d] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(60% - 80px);
    overflow-y: auto;
    padding: 0 1rem 1rem;
    z-index: 1;
}

.notification-item[b-k9865xrx0d] {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 12px;
    background: #f8f9fa;
    margin-bottom: 0.75rem;
    gap: 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.notification-item:hover[b-k9865xrx0d] {
    background: #f3f4f6;
}

.notification-item:last-child[b-k9865xrx0d] {
    margin-bottom: 0;
}

.notification-icon[b-k9865xrx0d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #e7ecf3;
    border-radius: 8px;
    color: #4d6a99;
    flex-shrink: 0;
}

.notification-content[b-k9865xrx0d] {
    flex: 1;
}

.notification-title[b-k9865xrx0d] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #0e131b;
    margin-bottom: 0.25rem;
}

.notification-time[b-k9865xrx0d] {
    font-size: 0.75rem;
    color: #6b7280;
}

/* Dashboard Grid Styles */
.dashboard-grid[b-k9865xrx0d] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 0.75rem;
    padding: 1rem;
}

.dashboard-card[b-k9865xrx0d] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #f8f9fa;
    border: 1px solid #e7ecf3;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.dashboard-card:hover[b-k9865xrx0d] {
    background: #f3f4f6;
    border-color: #d1d5db;
    transform: translateY(-2px);
}

.dashboard-card:active[b-k9865xrx0d] {
    transform: translateY(0) scale(0.98);
}

.dashboard-welcome[b-k9865xrx0d] {
    font-size: 2rem;
    font-weight: 700;
    color: #0e131b;
    line-height: 1.25;
    margin: 0;
}

/* Mobile Responsive Styles */
@media (max-width: 767.98px) {
    /* Show mobile header components */
    [data-mobile-header][data-active="true"][b-k9865xrx0d] {
        display: block;
    }
    
    .mobile-quick-actions[b-k9865xrx0d] {
        display: flex;
    }
    
    .dashboard-grid[b-k9865xrx0d] {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        padding: 0.75rem !important;
    }
    
    .dashboard-card[b-k9865xrx0d] {
        padding: 1rem !important;
        min-height: 60px;
    }
    
    .dashboard-welcome[b-k9865xrx0d] {
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
    }
}

/* Small mobile devices (479px and below) */
@media (max-width: 479.98px) {
    .mobile-header-content[b-k9865xrx0d] {
        padding: 0.75rem;
    }
    
    .mobile-quick-actions[b-k9865xrx0d] {
        padding: 0.75rem;
    }
    
    .quick-action-btn[b-k9865xrx0d] {
        min-width: 70px;
        height: 70px;
        margin-right: 0.5rem;
    }
    
    .quick-action-btn span[b-k9865xrx0d] {
        font-size: 0.7rem;
    }
    
    .dashboard-card[b-k9865xrx0d] {
        padding: 0.75rem !important;
    }
    
    .dashboard-welcome[b-k9865xrx0d] {
        font-size: 1.125rem !important;
        line-height: 1.5rem !important;
    }
}

/* Animations for mobile panels */
@keyframes slideIn-b-k9865xrx0d {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideUp-b-k9865xrx0d {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.mobile-search-bar.expanded[b-k9865xrx0d] {
    animation: slideIn-b-k9865xrx0d 0.3s ease;
}

.mobile-notifications-panel.expanded .mobile-notifications-header[b-k9865xrx0d],
.mobile-notifications-panel.expanded .mobile-notifications-content[b-k9865xrx0d] {
    animation: slideUp-b-k9865xrx0d 0.3s ease;
}
/* _content/NexaCRM.UI/Pages/UnassignedDbListPage.razor.rz.scp.css */
.table-responsive[b-hp0eutzppq] {
    animation: fadeIn-b-hp0eutzppq 0.3s ease-in;
}

.table-hover tbody tr[b-hp0eutzppq] {
    transition: background-color 0.2s ease;
}

.table-hover tbody tr:hover[b-hp0eutzppq] {
    background-color: #f8f9fa;
    cursor: pointer;
}

.btn-assign[b-hp0eutzppq] {
    transition: transform 0.2s ease;
}

.btn-assign:hover[b-hp0eutzppq] {
    transform: scale(1.05);
}

/* Align text and buttons neatly in action column */
.action-cell[b-hp0eutzppq] { white-space: nowrap; }
.table td[b-hp0eutzppq], .table th[b-hp0eutzppq] { vertical-align: middle; }

/* Standardize small action button sizing across DB tables */
.table .action-btn[b-hp0eutzppq] {
    font-size: 0.78rem;
    padding: 0.25rem 0.5rem; /* slightly smaller, consistent size */
    line-height: 1.2;
    border-radius: 0.35rem;
}

@keyframes fadeIn-b-hp0eutzppq {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* _content/NexaCRM.UI/Pages/UserManagementPage.razor.rz.scp.css */
.user-management-page[b-ltkvndzw6w] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.page-header[b-ltkvndzw6w] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.75rem 2rem;
    border: none;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, #eef2ff 0%, #f8f9ff 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.page-header h2[b-ltkvndzw6w] {
    font-weight: 700;
}

.summary-grid[b-ltkvndzw6w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.summary-card[b-ltkvndzw6w] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 12px 30px rgba(99, 102, 241, 0.15);
}

.summary-card .summary-label[b-ltkvndzw6w] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
}

.summary-card .summary-value[b-ltkvndzw6w] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1f2a5c;
}

.summary-card.accent[b-ltkvndzw6w] {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #ffffff;
    box-shadow: 0 16px 35px rgba(99, 102, 241, 0.35);
}

.summary-card.accent .summary-label[b-ltkvndzw6w] {
    color: rgba(255, 255, 255, 0.85);
}

.summary-card.accent .summary-value[b-ltkvndzw6w] {
    color: #ffffff;
}

.filter-card[b-ltkvndzw6w],
.pending-card[b-ltkvndzw6w],
.table-card[b-ltkvndzw6w] {
    border: none;
    border-radius: 1.5rem;
    padding: 1.5rem;
    background-color: #ffffff;
    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.08);
}

.filter-card label[b-ltkvndzw6w] {
    font-weight: 600;
    color: #334155;
}

.filter-card .btn[b-ltkvndzw6w] {
    min-width: 6rem;
}

.pending-card .card-header[b-ltkvndzw6w] {
    border: none;
    background: transparent;
    padding: 0 0 1rem 0;
}

.pending-list[b-ltkvndzw6w] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pending-item[b-ltkvndzw6w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    border-radius: 1rem;
    background-color: #f8fafc;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pending-item:hover[b-ltkvndzw6w] {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.12);
    background-color: #f1f5ff;
}

.pending-user[b-ltkvndzw6w] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pending-name[b-ltkvndzw6w] {
    font-weight: 600;
    color: #1f2937;
}

.pending-actions[b-ltkvndzw6w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.avatar[b-ltkvndzw6w] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5, #9333ea);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.05em;
    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.25);
}

.user-cell[b-ltkvndzw6w] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.table-card table[b-ltkvndzw6w] {
    margin-bottom: 0;
}

.table-card thead th[b-ltkvndzw6w] {
    font-weight: 600;
    color: #475569;
    background-color: #f8fafc;
    border-bottom: none;
}

.table-card tbody td[b-ltkvndzw6w] {
    vertical-align: middle;
    border-top: 1px solid rgba(226, 232, 240, 0.75);
}

.table-card tbody tr:hover[b-ltkvndzw6w] {
    background-color: #f4f7ff;
}

.table-placeholder[b-ltkvndzw6w] {
    padding: 2.5rem 1rem;
    font-size: 1rem;
}

.status-chip[b-ltkvndzw6w] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.status-chip[b-ltkvndzw6w]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
}

.status-active[b-ltkvndzw6w] {
    color: #166534;
    background-color: rgba(22, 101, 52, 0.12);
}

.status-pending[b-ltkvndzw6w] {
    color: #b45309;
    background-color: rgba(180, 83, 9, 0.15);
}

.status-inactive[b-ltkvndzw6w] {
    color: #1d4ed8;
    background-color: rgba(59, 130, 246, 0.16);
}

.status-rejected[b-ltkvndzw6w] {
    color: #b91c1c;
    background-color: rgba(185, 28, 28, 0.16);
}

.action-buttons[b-ltkvndzw6w] {
    gap: 0.5rem;
}

.modal-body .form-label[b-ltkvndzw6w] {
    font-weight: 600;
    color: #1f2937;
}

.modal-body .form-control[b-ltkvndzw6w],
.modal-body .form-select[b-ltkvndzw6w] {
    border-radius: 0.75rem;
}

@media (min-width: 768px) {
    .page-header[b-ltkvndzw6w] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 2rem 2.5rem;
    }

    .summary-card .summary-value[b-ltkvndzw6w] {
        font-size: 2.1rem;
    }

    .filter-card[b-ltkvndzw6w],
    .pending-card[b-ltkvndzw6w],
    .table-card[b-ltkvndzw6w] {
        padding: 2rem;
    }

    .filter-card .btn[b-ltkvndzw6w] {
        min-width: 7rem;
    }

    .avatar[b-ltkvndzw6w] {
        width: 48px;
        height: 48px;
    }

    .action-buttons[b-ltkvndzw6w] {
        gap: 0.75rem;
    }
}

@media (max-width: 767.98px) {
    .page-header[b-ltkvndzw6w] {
        padding: 1.25rem 1.5rem;
    }

    .pending-item[b-ltkvndzw6w] {
        flex-direction: column;
        align-items: flex-start;
    }

    .pending-actions[b-ltkvndzw6w] {
        width: 100%;
        justify-content: flex-start;
    }

    .action-buttons[b-ltkvndzw6w] {
        justify-content: flex-start;
    }
}
/* _content/NexaCRM.UI/Pages/UserRegistrationPage.razor.rz.scp.css */
.register-card[b-ewqlsprbd7] {
    background-color: var(--surface-color);
    border-color: var(--border-color);
    box-shadow: 0 25px 50px var(--shadow-strong);
    transition: all var(--transition-normal);
}

.register-header[b-ewqlsprbd7] {
    color: var(--text-primary);
}

.register-form-label[b-ewqlsprbd7] {
    color: var(--text-primary);
}

.register-form-input[b-ewqlsprbd7] {
    background-color: var(--surface-color);
    border-color: var(--border-color);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.register-form-input:focus[b-ewqlsprbd7] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.register-form-input[b-ewqlsprbd7]::placeholder {
    color: var(--text-secondary);
}

.register-button[b-ewqlsprbd7] {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transition: all var(--transition-fast);
}

.register-button:hover[b-ewqlsprbd7] {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--shadow-medium);
}

.register-link[b-ewqlsprbd7] {
    color: var(--secondary-color);
    transition: color var(--transition-fast);
}

.register-link:hover[b-ewqlsprbd7] {
    color: var(--primary-hover);
}

.error-message[b-ewqlsprbd7] {
    background-color: var(--error-bg, #fef2f2);
    border-color: var(--error-border, #fecaca);
    color: var(--error-text, #dc2626);
    transition: all var(--transition-fast);
}

[data-theme="dark"] .error-message[b-ewqlsprbd7] {
    --error-bg: #7f1d1d;
    --error-border: #dc2626;
    --error-text: #fca5a5;
}

.success-message[b-ewqlsprbd7] {
    background-color: var(--success-bg, #dcfce7);
    border-color: var(--success-border, #86efac);
    color: var(--success-text, #166534);
    transition: all var(--transition-fast);
}

[data-theme="dark"] .success-message[b-ewqlsprbd7] {
    --success-bg: #064e3b;
    --success-border: #16a34a;
    --success-text: #bbf7d0;
}
/* _content/NexaCRM.UI/Shared/ConsultationNoteForm.razor.rz.scp.css */
.consultation-note-form[b-4nauvjnn8x] {
    width: 100%;
    max-width: 700px;
}

.form-header[b-4nauvjnn8x] {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #dee2e6;
}

.form-header h4[b-4nauvjnn8x] {
    margin: 0;
    color: #333;
}

.form-content[b-4nauvjnn8x] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-row[b-4nauvjnn8x] {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.form-group[b-4nauvjnn8x] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.form-group.flex-half[b-4nauvjnn8x] {
    flex: 0 0 calc(50% - 7.5px);
}

.form-group label[b-4nauvjnn8x] {
    margin-bottom: 5px;
    font-weight: 600;
    color: #555;
}

.form-control[b-4nauvjnn8x] {
    padding: 12px 16px; /* Increased padding for better touch targets */
    border: 1px solid #ced4da;
    border-radius: 8px; /* Slightly more rounded for modern look */
    font-size: 16px; /* Prevent zoom on iOS */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    min-height: 44px; /* Ensure minimum touch target size */
}

.form-control:focus[b-4nauvjnn8x] {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-control:invalid[b-4nauvjnn8x] {
    border-color: #dc3545;
}

textarea.form-control[b-4nauvjnn8x] {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}

.form-check[b-4nauvjnn8x] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
}

.form-check-input[b-4nauvjnn8x] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.form-check-label[b-4nauvjnn8x] {
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.follow-up-section[b-4nauvjnn8x] {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 15px;
    margin-top: 10px;
}

.form-text[b-4nauvjnn8x] {
    font-size: 12px;
    color: #6c757d;
    margin-top: 4px;
}

.validation-summary[b-4nauvjnn8x] {
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
}

.validation-summary ul[b-4nauvjnn8x] {
    margin: 0;
    padding-left: 20px;
}

.validation-message[b-4nauvjnn8x] {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
}

.form-actions[b-4nauvjnn8x] {
    display: flex;
    gap: 12px; /* Increased gap for better touch spacing */
    justify-content: flex-end;
    padding-top: 20px;
    border-top: 1px solid #dee2e6;
    margin-top: 20px;
}

.btn[b-4nauvjnn8x] {
    padding: 12px 20px; /* Increased padding for better touch targets */
    border: 1px solid transparent;
    border-radius: 8px; /* More rounded for modern look */
    font-size: 16px; /* Larger font for mobile */
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Slightly larger gap */
    min-height: 44px; /* Ensure minimum touch target size */
    min-width: 44px;
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight */
    touch-action: manipulation; /* Optimize for touch */
}

.btn:hover[b-4nauvjnn8x] {
    text-decoration: none;
}

.btn-success[b-4nauvjnn8x] {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
}

.btn-success:hover[b-4nauvjnn8x] {
    background-color: #218838;
    border-color: #1e7e34;
}

.btn-secondary[b-4nauvjnn8x] {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

.btn-secondary:hover[b-4nauvjnn8x] {
    background-color: #5a6268;
    border-color: #545b62;
}

/* Responsive Design */
@media (max-width: 768px) {
    .consultation-note-form[b-4nauvjnn8x] {
        width: 100%;
        max-width: 100%;
    }
    
    .form-header[b-4nauvjnn8x] {
        margin-bottom: 20px;
        padding-bottom: 15px;
    }
    
    .form-header h4[b-4nauvjnn8x] {
        font-size: 1.25rem;
        text-align: center;
    }
    
    .form-row[b-4nauvjnn8x] {
        flex-direction: column;
        gap: 15px;
    }
    
    .form-group.flex-half[b-4nauvjnn8x] {
        flex: 1;
    }
    
    .form-group label[b-4nauvjnn8x] {
        font-size: 16px;
        margin-bottom: 8px;
    }
    
    .form-control[b-4nauvjnn8x] {
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 14px 16px;
        border-radius: 8px;
        min-height: 48px; /* Standardize to 48px minimum */
    }
    
    textarea.form-control[b-4nauvjnn8x] {
        min-height: 120px;
        resize: vertical;
    }
    
    .form-check[b-4nauvjnn8x] {
        padding: 15px 0;
        gap: 8px; /* Standardize gap between checkbox and label */
    }
    
    .form-check-input[b-4nauvjnn8x] {
        width: 16px; /* Standardize checkbox size */
        height: 16px;
        margin: 0;
    }
    
    .form-check-label[b-4nauvjnn8x] {
        font-size: 16px;
        line-height: 1.4;
    }
    
    .follow-up-section[b-4nauvjnn8x] {
        padding: 20px 16px;
        border-radius: 8px;
        margin-top: 15px;
    }
    
    .form-actions[b-4nauvjnn8x] {
        flex-direction: column;
        gap: 15px;
        padding-top: 25px;
        margin-top: 25px;
    }
    
    .btn[b-4nauvjnn8x] {
        width: 100%;
        justify-content: center;
        font-size: 16px;
        padding: 16px 20px;
        border-radius: 8px;
        font-weight: 500;
    }
    
    .btn:active[b-4nauvjnn8x] {
        transform: scale(0.98);
        transition-duration: 0.1s;
    }
    
    .validation-summary[b-4nauvjnn8x] {
        margin-bottom: 20px;
        padding: 15px;
        border-radius: 8px;
        font-size: 14px;
    }
    
    .validation-message[b-4nauvjnn8x] {
        font-size: 14px;
        margin-top: 6px;
    }
    
    .form-text[b-4nauvjnn8x] {
        font-size: 14px;
        margin-top: 6px;
    }
}

/* Tablet layout (768px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .consultation-note-form[b-4nauvjnn8x] {
        max-width: 600px;
    }
    
    .form-row[b-4nauvjnn8x] {
        flex-direction: row; /* Keep side-by-side layout on tablet */
        gap: 20px;
    }
    
    .form-group.flex-half[b-4nauvjnn8x] {
        flex: 0 0 calc(50% - 10px); /* Restore two-column layout */
    }
    
    .form-control[b-4nauvjnn8x] {
        font-size: 16px;
        padding: 12px 16px;
        min-height: 48px;
    }
    
    .btn[b-4nauvjnn8x] {
        font-size: 16px;
        padding: 14px 20px;
        min-height: 48px;
    }
    
    .form-actions[b-4nauvjnn8x] {
        flex-direction: row;
        justify-content: flex-end;
        gap: 12px;
    }
    
    .btn[b-4nauvjnn8x] {
        width: auto; /* Don't force full width on tablet */
        min-width: 120px;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .form-header h4[b-4nauvjnn8x] {
        font-size: 1.15rem;
    }
    
    .form-control[b-4nauvjnn8x] {
        padding: 16px;
    }
    
    .btn[b-4nauvjnn8x] {
        padding: 18px 20px;
        font-size: 16px;
    }
    
    .follow-up-section[b-4nauvjnn8x] {
        padding: 16px 12px;
    }
    
    .form-check-input[b-4nauvjnn8x] {
        width: 16px; /* Maintain consistent 16px checkbox size */
        height: 16px;
    }
    
    .form-check-label[b-4nauvjnn8x] {
        font-size: 15px;
    }
}
/* _content/NexaCRM.UI/Shared/GlobalActionHost.razor.rz.scp.css */
.global-action-overlay[b-u0xfk1tgkl] {
    position: fixed;
    inset: 0;
    background-color: rgba(12, 18, 28, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 1.5rem;
}

.global-action-dialog[b-u0xfk1tgkl] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(11, 27, 51, 0.25);
    max-width: min(720px, 100%);
    width: 100%;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.global-action-dialog__header[b-u0xfk1tgkl],
.global-action-dialog__footer[b-u0xfk1tgkl] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e1e8f5;
}

.global-action-dialog__footer[b-u0xfk1tgkl] {
    border-top: 1px solid #e1e8f5;
    border-bottom: none;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.global-action-dialog__header h2[b-u0xfk1tgkl] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0e131b;
}

.global-action-dialog__close[b-u0xfk1tgkl] {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #4d6a99;
}

.global-action-dialog__body[b-u0xfk1tgkl] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.global-action-alert[b-u0xfk1tgkl] {
    padding: 0.875rem 1rem;
    border-radius: 12px;
    font-size: 0.95rem;
}

.global-action-alert--error[b-u0xfk1tgkl] {
    background: #ffe1e1;
    color: #a11a1a;
}

.global-action-alert--success[b-u0xfk1tgkl] {
    background: #e6f6ed;
    color: #176437;
}

.global-action-section[b-u0xfk1tgkl] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.global-action-field[b-u0xfk1tgkl] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.95rem;
    color: #0e131b;
}

.global-action-input[b-u0xfk1tgkl],
.global-action-textarea[b-u0xfk1tgkl],
.global-action-field input[b-u0xfk1tgkl],
.global-action-field select[b-u0xfk1tgkl] {
    border: 1px solid #cdd6e6;
    border-radius: 12px;
    padding: 0.6rem 0.8rem;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.global-action-input:focus[b-u0xfk1tgkl],
.global-action-textarea:focus[b-u0xfk1tgkl],
.global-action-field input:focus[b-u0xfk1tgkl],
.global-action-field select:focus[b-u0xfk1tgkl] {
    outline: none;
    border-color: #4072ee;
    box-shadow: 0 0 0 3px rgba(64, 114, 238, 0.18);
}

.global-action-textarea[b-u0xfk1tgkl] {
    resize: vertical;
}

.global-action-contact-list[b-u0xfk1tgkl] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.6rem;
}

.global-action-contact-item[b-u0xfk1tgkl] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
    border: 1px solid #dde5f5;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.global-action-contact-item:hover[b-u0xfk1tgkl],
.global-action-contact-item.is-active[b-u0xfk1tgkl] {
    border-color: #4072ee;
    background: #f1f5ff;
}

.global-action-contact-name[b-u0xfk1tgkl] {
    font-weight: 600;
    color: #0e131b;
}

.global-action-contact-meta[b-u0xfk1tgkl] {
    font-size: 0.85rem;
    color: #4d6a99;
}

.global-action-actions[b-u0xfk1tgkl] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.global-action-primary[b-u0xfk1tgkl],
.global-action-secondary[b-u0xfk1tgkl] {
    border-radius: 999px;
    padding: 0.6rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.global-action-primary[b-u0xfk1tgkl] {
    background: linear-gradient(135deg, #4072ee, #324ad2);
    color: #fff;
    box-shadow: 0 12px 20px rgba(64, 114, 238, 0.24);
}

.global-action-secondary[b-u0xfk1tgkl] {
    background: #f2f6ff;
    color: #234073;
}

.global-action-primary:hover[b-u0xfk1tgkl],
.global-action-secondary:hover[b-u0xfk1tgkl] {
    transform: translateY(-1px);
}

.global-action-context[b-u0xfk1tgkl] {
    margin: 0;
    font-size: 0.9rem;
    color: #4d6a99;
}

.global-action-date-grid[b-u0xfk1tgkl] {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

@media (max-width: 720px) {
    .global-action-dialog[b-u0xfk1tgkl] {
        border-radius: 0;
        height: 100vh;
        max-height: 100vh;
    }

    .global-action-dialog__body[b-u0xfk1tgkl] {
        padding: 1.25rem;
    }

    .global-action-actions[b-u0xfk1tgkl] {
        flex-direction: column;
        align-items: stretch;
    }

    .global-action-primary[b-u0xfk1tgkl],
    .global-action-secondary[b-u0xfk1tgkl] {
        width: 100%;
    }
}
/* _content/NexaCRM.UI/Shared/LoginLayout.razor.rz.scp.css */
.login-page[b-sq1rqjv87y], .desktop-shell[b-sq1rqjv87y] {
    min-height: 100vh;
    width: 100%;
    margin-left: 0;
    /* allow shadows and image overflow to be visible on login routes */
    overflow: visible;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* If a page-level wrapper (.page) is present (eg. login/anonymous routes),
   ensure any desktop-shell left padding (reserved for NavigationTail) is
   overridden so the page takes the full viewport width.
   This avoids a persistent empty left column when the rail isn't rendered. */


.login-page > main[b-sq1rqjv87y] {
    height: 100vh;
    height: 100dvh; 
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
}

.content[b-sq1rqjv87y] {
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    max-width: 100% !important;
    min-height: 100%;
    height: 100%;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    /* allow children (cards, image backdrops) to overflow so shadows aren't clipped */
    overflow: visible;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

/* Prevent page-level vertical scrolling on the login page so the UI
   appears as a fixed, centered panel without top/bottom scrollbars. This
   keeps the brand-section and card fully visible and avoids body-scroll
   jumps on mobile browsers. */
.login-page[b-sq1rqjv87y],
.login-page > main[b-sq1rqjv87y],
.content[b-sq1rqjv87y] {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: hidden !important;
}

/* Hide any floating menu toggle on login page */
.floating-menu-toggle[b-sq1rqjv87y] {
    display: none !important;
}

/* Hide sidebar completely */
.sidebar[b-sq1rqjv87y] {
    display: none !important;
}

/* Responsive rules for mobile-specific login card utility class
   Usage: add `mobile-login-card` to the login card wrapper to enable these
   responsive behaviors that make the form more comfortable on phones. */
.content :global(.mobile-login-card)[b-sq1rqjv87y] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.5rem !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .content :global(.mobile-login-card)[b-sq1rqjv87y] {
        padding: 0.75rem !important;
        margin: 0.5rem !important;
        border-radius: 12px !important;
        /* Fixed mobile form width requested by user */
        width: 382px !important;
        max-width: 92vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Ensure the brand section inside the mobile card remains visible
       even when the card content scrolls: make it non-shrinking and sticky
       at the top of the card. Also make sure the card can show overflow. */
    .content :global(.mobile-login-card)[b-sq1rqjv87y] {
        overflow: visible !important;
    }

    .content :global(.mobile-login-card .brand-section)[b-sq1rqjv87y] {
        flex: 0 0 auto !important;
        position: sticky !important;
          /* ensure brand-section is pushed down enough to be visible on mobile
              (user requested a large top offset) */
          top: 100px !important;
          margin-top: 100px !important;
        z-index: 60 !important;
        background: transparent !important;
        margin-bottom: 0.25rem !important;
        padding-top: 0 !important;
    }

    /* Reduce logo size and vertical gap on small screens so the brand
       section occupies less vertical space. */
    .content :global(.mobile-login-card .brand-section) .brand-logo[b-sq1rqjv87y] {
        font-size: 28px !important;
        letter-spacing: 0.14em !important;
    }

    .content :global(.mobile-login-card .brand-section)[b-sq1rqjv87y] {
        gap: 6px !important;
    }

    /* Make primary buttons fill the available width on mobile */
    .content :global(.mobile-login-card .login-button)[b-sq1rqjv87y],
    .content :global(.mobile-login-card .social-login-btn)[b-sq1rqjv87y] {
        width: 100% !important;
        display: block !important;
    }
}

@media (max-width: 480px) {
    .content :global(.mobile-login-card)[b-sq1rqjv87y] {
        padding: 0.5rem !important;
        margin: 0.5rem auto !important;
        border-radius: 10px !important;
        /* Fixed mobile form width requested by user (382px). Keep a safe
           max-width fallback so very narrow devices won't overflow. */
        width: 382px !important;
        max-width: 92vw !important;
    }

    .content :global(.mobile-login-card .login-button)[b-sq1rqjv87y] {
        padding: 0.9rem 1rem !important;
        font-size: 1rem !important;
    }
}

/* Make sure brand-section inside the mobile card is visible on small
   viewports: allow the card to show overflow (for visual elements) while
   keeping the page itself non-scrollable. */
@media (max-width: 768px) {
    .content :global(.mobile-login-card)[b-sq1rqjv87y] {
        overflow: visible !important;
        /* constrain card height so it fits within the viewport without
           creating a body scroll; content inside can flow naturally. */
        max-height: calc(100dvh - 1.5rem) !important;
    }
}

/* Keep social login labels on one line so phrases like "네이버로 시작하기" don't
   break across lines; prefer keeping words together in Korean. */
.content :global(.social-login-btn)[b-sq1rqjv87y] {
    white-space: nowrap !important;
    word-break: keep-all !important;
}

/* Login-specific theme toggle positioning */
.login-theme-toggle[b-sq1rqjv87y] {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 1.5rem);
    right: 1.5rem;
    width: var(--touch-target-min, 44px);
    height: var(--touch-target-min, 44px);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px; /* 더 둥근 모서리 */
    background-color: var(--surface-color, #f9fafb);
    color: var(--text-primary, #111827);
    cursor: pointer;
    z-index: 10001; /* 높은 z-index로 항상 위에 표시 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem; /* 조금 더 큰 아이콘 */
    transition: all var(--transition-fast, 0.15s ease);
    box-shadow: 0 4px 12px var(--shadow-light, rgba(0, 0, 0, 0.12));
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-backdrop-filter: blur(10px); /* Safari 지원 */
    backdrop-filter: blur(10px); /* 블러 효과 추가 */
    overflow: hidden; /* Ripple 효과가 버튼 밖으로 나가지 않도록 설정 */
    padding: 0; /* Ensure only the defined width/height are used */
    margin: 0;
    box-sizing: border-box; /* prevent visual overflow */
    pointer-events: auto; /* only this element and its children accept pointer events */
}

.login-theme-toggle:hover[b-sq1rqjv87y] {
    background-color: var(--hover-overlay, rgba(59, 130, 246, 0.15));
    transform: scale(1.05);
    box-shadow: 0 4px 12px var(--shadow-medium, rgba(0, 0, 0, 0.12));
}

.login-theme-toggle:active[b-sq1rqjv87y] {
    transform: scale(0.98);
}

.login-theme-toggle:focus[b-sq1rqjv87y] {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring, rgba(59, 130, 246, 0.25));
}

.login-theme-toggle .theme-light-icon[b-sq1rqjv87y],
.login-theme-toggle .theme-dark-icon[b-sq1rqjv87y] {
    transition: all var(--transition-fast, 0.15s ease);
}

/* Prevent any pseudo elements or accidental global selectors from creating
   a larger clickable/visual area around the toggle. */
.login-theme-toggle[b-sq1rqjv87y]::before,
.login-theme-toggle[b-sq1rqjv87y]::after {
    content: none !important;
    display: none !important;
}

/* Disable any ripple/ink effects from various UI libraries inside the theme toggle.
   This covers material/vuetify/other class names and also stops any CSS animation. */
.login-theme-toggle .ripple[b-sq1rqjv87y],
.login-theme-toggle .ripple-effect[b-sq1rqjv87y],
.login-theme-toggle .ripple-ink[b-sq1rqjv87y],
.login-theme-toggle .ink[b-sq1rqjv87y],
.login-theme-toggle .v-ripple__container[b-sq1rqjv87y],
.login-theme-toggle .v-ripple__animate[b-sq1rqjv87y],
.login-theme-toggle .ripple-container[b-sq1rqjv87y],
.login-theme-toggle .mat-ripple-element[b-sq1rqjv87y] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    animation: none !important;
    transition: none !important;
    background: transparent !important;
}

/* Ensure children remain interactive while anything outside the button
   can still receive pointer events (no invisible overlay). */
.login-theme-toggle *[b-sq1rqjv87y] {
    pointer-events: auto;
}

/* User-request: hide the login theme toggle entirely (no visual, no interaction) */
.login-theme-toggle[b-sq1rqjv87y] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Theme icon visibility - default to light theme (show dark icon) */
.login-theme-toggle .theme-light-icon[b-sq1rqjv87y] {
    display: none;
}

.login-theme-toggle .theme-dark-icon[b-sq1rqjv87y] {
    display: inline;
}

/* Hide appropriate icon based on theme */
[data-theme="dark"] .login-theme-toggle .theme-dark-icon[b-sq1rqjv87y] {
    display: none;
}

[data-theme="dark"] .login-theme-toggle .theme-light-icon[b-sq1rqjv87y] {
    display: inline;
}

/* For elements that don't have data-theme attribute but body/html does */
:root[data-theme="dark"] .login-theme-toggle .theme-dark-icon[b-sq1rqjv87y],
html[data-theme="dark"] .login-theme-toggle .theme-dark-icon[b-sq1rqjv87y],
body[data-theme="dark"] .login-theme-toggle .theme-dark-icon[b-sq1rqjv87y] {
    display: none;
}

:root[data-theme="dark"] .login-theme-toggle .theme-light-icon[b-sq1rqjv87y],
html[data-theme="dark"] .login-theme-toggle .theme-light-icon[b-sq1rqjv87y],
body[data-theme="dark"] .login-theme-toggle .theme-light-icon[b-sq1rqjv87y] {
    display: inline;
}

@media (max-width: 768px) {
    .login-theme-toggle[b-sq1rqjv87y] {
        top: 1rem;
        right: 1rem;
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
        border-radius: 10px;
    }
}

@media (max-width: 480px) {
    .login-theme-toggle[b-sq1rqjv87y] {
        top: 0.75rem;
        right: 0.75rem;
        width: 38px;
        height: 38px;
        font-size: 1rem;
        border-radius: 8px;
    }
}

/* Ensure toggle does not overlap the login card header on small phones
   (handles cases like widths <= 574px where the card is near the top). */
@media (max-width: 574px) {
    .login-theme-toggle[b-sq1rqjv87y] {
        /* move slightly inward and lower z-index so the card header stays visible */
        top: calc(env(safe-area-inset-top) + 0.6rem);
        right: auto;
        left: 0.5rem; /* move to left side on small screens to avoid overlapping centered card */
        width: 36px;
        height: 36px;
        z-index: 1001 !important; /* below the card visually */
        box-shadow: none !important;
        transform: none !important;
        /* Let most pointer events pass through to underlying elements (the login card).
           Only icon elements inside the toggle will accept pointer events (see below). */
        pointer-events: none !important;
    }

    /* ensure the login card sits above the toggle so its top border is not hidden */
    .content :global(.login-card)[b-sq1rqjv87y] {
        position: relative;
        z-index: 1002 !important;
    }

    /* Make only the visible icon inside the toggle interactive so clicks on the
       rest of the toggle pass through to the login form beneath. */
    /* Disable pointer events for all descendants, then re-enable only the
       actual icon elements so we don't alter their layout/size. This avoids
       visual distortion on different icon implementations (SVG, font-icons). */
    .login-theme-toggle *[b-sq1rqjv87y] {
        pointer-events: none !important;
    }

    .login-theme-toggle .theme-light-icon[b-sq1rqjv87y],
    .login-theme-toggle .theme-dark-icon[b-sq1rqjv87y] {
        pointer-events: auto !important; /* only the icon accepts clicks */
        /* don't override display/size here to preserve original visuals */
    }
}

/* Extra small screens: avoid hover/scale effects and lower stacking context so toggle
   doesn't block other controls (phones in compact UI). */
@media (max-width: 360px) {
    .login-theme-toggle[b-sq1rqjv87y] {
        width: 36px;
        height: 36px;
        top: 0.5rem;
        right: 0.5rem;
        font-size: 0.95rem;
        border-radius: 8px;
        box-shadow: none !important;
        z-index: 1001 !important; /* lower than overlays but above normal content */
        transition: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        touch-action: manipulation;
        transform-origin: center center;
    }

    .login-theme-toggle:hover[b-sq1rqjv87y],
    .login-theme-toggle:active[b-sq1rqjv87y] {
        transform: none !important;
        background-color: var(--surface-color) !important;
        box-shadow: none !important;
    }

    /* Prevent the toggle from intercepting pointer-events outside its bounds */
    .login-theme-toggle[b-sq1rqjv87y] {
        padding: 0 !important;
        /* Same pointer-event passthrough strategy on very small screens */
        pointer-events: none !important;
    }

    .login-theme-toggle .theme-light-icon[b-sq1rqjv87y],
    .login-theme-toggle .theme-dark-icon[b-sq1rqjv87y] {
        pointer-events: auto !important;
        /* keep native icon shape/size; only pointer-events is required */
    }
}

/* Login page uses the same CSS variables as the main app for consistency */
.login-page[b-sq1rqjv87y] {
    background-color: var(--background-color);
    color: var(--text-primary);
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* iOS-like button styling for primary and social buttons */
.content :global(.login-button)[b-sq1rqjv87y],
.content :global(.social-login-btn)[b-sq1rqjv87y] {
    -webkit-font-smoothing: antialiased;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    display: inline-block;
    width: auto;
    min-width: 140px;
    padding: 0.9rem 1.25rem;
    border-radius: 14px;
    border: none !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0)) , linear-gradient(180deg, var(--button-start, #ffffff), var(--button-end, #f2f2f2));
    color: var(--button-text, #1c1c1e) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.25);
    transition: transform 160ms cubic-bezier(.3,.8,.25,1), box-shadow 160ms ease, opacity 160ms ease;
    text-align: center;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.content :global(.login-button:active)[b-sq1rqjv87y],
.content :global(.social-login-btn:active)[b-sq1rqjv87y] {
    transform: translateY(1px) scale(0.998);
    box-shadow: 0 4px 10px rgba(0,0,0,0.12) ;
    opacity: 0.98;
}

/* Primary look variant for .login-button */
.content :global(.login-button.primary)[b-sq1rqjv87y] {
    background: linear-gradient(180deg, #ffffff, #e9eef6);
    color: #0b1220 !important;
}

/* Social buttons: light background with subtle border and icon spacing */
.content :global(.social-login-btn)[b-sq1rqjv87y] {
    background: var(--surface-color, #ffffff) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    color: var(--text-secondary, #6b7280) !important;
    min-width: 120px;
}

@media (max-width: 768px) {
    .content :global(.login-button)[b-sq1rqjv87y],
    .content :global(.social-login-btn)[b-sq1rqjv87y] {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Dark mode button styling - uses main app variables */
[data-theme="dark"] .login-theme-toggle[b-sq1rqjv87y] {
    background-color: var(--surface-color);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* 로그인 폼 크기 조정 - 웹사이트 모드에서 더 컴팩트하게 */
@media (min-width: 768px) {
    /* 태블릿 이상에서 폼 크기 조정 */
    .content :global(.login-card)[b-sq1rqjv87y] {
        max-width: 400px !important;
        margin: 0 auto;
    }
    
    /* 이미지 섹션 높이 조정 */
    .content :global(.image-div-login-page)[b-sq1rqjv87y] {
        min-height: 120px !important;
    }
    
    /* 폼 내부 패딩 조정 */
    .content :global(.login-card > div:last-child)[b-sq1rqjv87y] {
        padding: 1.5rem 2rem 2rem 2rem !important;
    }
    
    /* 헤더 텍스트 크기 조정 */
    .content :global(.login-header)[b-sq1rqjv87y] {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* 서브헤더 텍스트 크기 조정 */
    .content :global(.login-subheader)[b-sq1rqjv87y] {
        font-size: 0.875rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* 폼 필드 간격 조정 */
    .content :global(.login-card .mb-4)[b-sq1rqjv87y] {
        margin-bottom: 1rem !important;
    }
    
    .content :global(.login-card .mb-6)[b-sq1rqjv87y] {
        margin-bottom: 1.25rem !important;
    }
    
    .content :global(.login-card .mb-8)[b-sq1rqjv87y] {
        margin-bottom: 1.5rem !important;
    }
    
    /* 입력 필드 높이 조정 */
    .content :global(.login-form-input)[b-sq1rqjv87y] {
        height: 2.75rem !important;
        font-size: 0.875rem !important;
    }
    
    /* 버튼 높이 조정 */
    .content :global(.login-button)[b-sq1rqjv87y] {
        height: 2.75rem !important;
        font-size: 0.875rem !important;
    }
    
    /* 소셜 로그인 버튼 높이 조정 */
    .content :global(.social-login-btn)[b-sq1rqjv87y] {
        height: 2.5rem !important;
        font-size: 0.75rem !important;
    }
    
    /* 전체 컨테이너 최대 높이 제한 */
    .content :global(.login-container)[b-sq1rqjv87y] {
        max-height: 90vh;
        overflow-y: auto;
    }
}

@media (min-width: 1024px) {
    /* 데스크톱에서 더 컴팩트하게 */
    .content :global(.login-card)[b-sq1rqjv87y] {
        max-width: 380px !important;
    }
    
    /* 전체 레이아웃을 더 컴팩트하게 */
    .content :global(.flex-1)[b-sq1rqjv87y] {
        padding: 2rem 1rem !important;
    }
    
    /* 이미지 섹션을 더 작게 */
    .content :global(.image-div-login-page)[b-sq1rqjv87y] {
        min-height: 100px !important;
    }
    
    /* 폼 패딩을 더 줄임 */
    .content :global(.login-card > div:last-child)[b-sq1rqjv87y] {
        padding: 1.25rem 1.75rem 1.75rem 1.75rem !important;
    }
}

@media (min-width: 1280px) {
    /* 큰 데스크톱에서도 폼 크기 유지 */
    .content :global(.login-card)[b-sq1rqjv87y] {
        max-width: 400px !important;
    }
    
    /* 세로 중앙 정렬을 위한 조정 */
    .content :global(.flex-1)[b-sq1rqjv87y] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 1rem !important;
    }
}
/* _content/NexaCRM.UI/Shared/MainLayout.razor.rz.scp.css */
:host[b-rp0drbo704] {
    display: contents;
}
.desktop-shell[b-rp0drbo704] {
    /* Default navigation width tokens for the fixed sidebar. Kept here so
       layout can adapt when the sidebar is collapsed without editing many
       rules. */
    --nav-rail-width: 80px;
    --nav-width: 320px;
    --nav-collapsed-width: 72px;
    --navigation-tail-width: calc(var(--nav-rail-width) + var(--nav-width));
}
.desktop-shell[b-rp0drbo704] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    height: 100vh;
    background: var(--surface-muted);
    color: var(--text-primary);
    /* Don't reserve space here unconditionally. The left offset will be
       applied to the main area only when a navigation rail is present. This
       prevents anonymous/login pages from showing an empty left column. */
    --desktop-shell-padding: clamp(1.5rem, 3vw, 2.5rem);
    padding: var(--desktop-shell-padding);
    box-sizing: border-box;
    width: min(100%, 100vw);
    overflow: hidden;
    border-radius: 1.5rem;
}

.desktop-shell__main[b-rp0drbo704] {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 0;
    /* Let flexbox handle the width and position. Default to no margin; the
       sibling selectors below will set the correct left offset depending on
       whether a sidebar (or panel) is present. */
    padding: var(--shell-content-padding);
    --desktop-shell-offset: 0px;
    margin-left: var(--desktop-shell-offset);
    width: max(0px, calc(100% - var(--desktop-shell-offset)));
    box-sizing: border-box;
    gap: clamp(1.25rem, 2vw, 1.75rem);
}

/* When the sidebar exists and is not in overlay (panel-open) mode, reserve
   space for the rail plus configured nav width. This uses a sibling selector
   so the rule is applied only when the sidebar node is present in the DOM
   before the main content (which matches how the layout renders the nav
   component). */
.sidebar:not(.panel-open):not(.collapsed) ~ .desktop-shell__main[b-rp0drbo704] {
    --desktop-shell-offset: var(--navigation-tail-width);
}

/* When the sidebar is an overlaying panel (panel-open), do not offset the
   main content — the panel floats above content. */
.sidebar.panel-open ~ .desktop-shell__main[b-rp0drbo704] {
    --desktop-shell-offset: 0px;
}

/* When the sidebar is present but collapsed, reduce the left offset so the
   main area aligns with the smaller sidebar width. */
.sidebar.collapsed ~ .desktop-shell__main[b-rp0drbo704] {
    --desktop-shell-offset: var(--nav-collapsed-width);
}

.desktop-shell__header[b-rp0drbo704] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Reduce spacing further to minimize header height */
    gap: clamp(0.25rem, 0.6vw, 0.5rem);
    row-gap: clamp(0.15rem, 0.4vw, 0.3rem);
    /* Very small vertical padding to shrink header height while keeping title readable */
    padding: 0.15rem 0.5rem;
    /* Make header visually borderless and flush with the shell background */
    background: transparent;
    border-radius: 0;
    border: none;
    box-shadow: none;
    overflow: visible;
    width: 100%;
    max-width: none;
    align-self: stretch;
    /* subtle divider between header and content */
    border-bottom: 1px solid var(--divider-color, rgba(15,23,42,0.06));
}

.desktop-shell__meta[b-rp0drbo704] {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    min-width: 0;
    flex: 1 1 18rem;
}

.desktop-shell__page-icon[b-rp0drbo704] {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.4rem;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
    font-size: 0.95rem;
    box-shadow: none;
    margin-top: 0.05rem; /* tiny nudge to vertically center with larger title */
}

.desktop-shell__page-icon i[b-rp0drbo704] {
    line-height: 1;
}

.desktop-shell__titles[b-rp0drbo704] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.desktop-shell__parent[b-rp0drbo704] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.85rem;
    padding: 0;
    cursor: pointer;
    transition: color 180ms ease;
}

.desktop-shell__parent:hover[b-rp0drbo704],
.desktop-shell__parent:focus-visible[b-rp0drbo704] {
    color: var(--text-primary);
}

.desktop-shell__title[b-rp0drbo704] {
    margin: 0;
    /* Restore original title size per request while keeping compact header */
    font-size: clamp(1.65rem, 2vw, 2.25rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateY(-0.05rem); /* slight lift to visually centre with reduced icon */
}

.desktop-shell__search[b-rp0drbo704] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 20rem;
    min-width: min(100%, 18rem);
    width: 100%;
    max-width: 100%;
}

.desktop-shell__search .global-search[b-rp0drbo704] {
    width: 100%;
    max-width: 460px;
}

.desktop-shell__actions[b-rp0drbo704] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 12rem;
    min-width: min(100%, 12rem);
    flex-wrap: wrap;
    gap: clamp(0.65rem, 1.5vw, 1rem);
}

.desktop-shell__actions > *[b-rp0drbo704] {
    flex-shrink: 0;
}

.desktop-shell__actions .theme-toggle-button[b-rp0drbo704] {
    position: static;
    top: auto;
    right: auto;
    width: 1.7rem;
    height: 1.7rem;
    border: 1px solid rgba(173, 186, 210, 0.3);
    box-shadow: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 251, 0.98));
    display: inline-grid;
    place-items: center;
}

.desktop-shell__action[b-rp0drbo704] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    border: 1px solid rgba(173, 186, 210, 0.3);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 251, 0.98));
    color: #5d6474;
    box-shadow: none;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.desktop-shell__actions .theme-toggle-button:hover[b-rp0drbo704],
.desktop-shell__actions .theme-toggle-button:focus-visible[b-rp0drbo704],
.desktop-shell__action:hover[b-rp0drbo704],
.desktop-shell__action:focus-visible[b-rp0drbo704] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(219, 227, 242, 0.95));
    color: #1f2230;
    transform: translateY(-1px);
    border-color: rgba(124, 146, 189, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 14px 28px rgba(15, 23, 42, 0.14);
}

.desktop-shell__badge[b-rp0drbo704] {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.desktop-shell__content[b-rp0drbo704] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Make content area appear borderless and flush with shell background */
    background: transparent;
    border-radius: 0;
    border: none;
    box-shadow: none;
    padding: 0;
    overflow: hidden;
    width: 100%;
    max-width: none;
    align-self: stretch;
}

.desktop-shell__content > *:first-child[b-rp0drbo704] {
    margin-top: 0;
}

.desktop-shell__content > *:last-child[b-rp0drbo704] {
    margin-bottom: 0;
}
/* _content/NexaCRM.UI/Shared/NavigationQuickSearch.razor.rz.scp.css */
.global-search[b-dqal0sznrh] {
    position: relative;
    flex: 1 1 280px;
    max-width: 420px;
}

.global-search__input-wrapper[b-dqal0sznrh] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: 0.6rem 1rem;
    background: var(--muted-300, #E8EEF3);
    border-radius: var(--radius-md, 16px);
    border: 1px solid transparent;
    transition: all var(--transition-fast);
}

.global-search__icon[b-dqal0sznrh] {
    color: var(--text-secondary);
}

.global-search__input[b-dqal0sznrh] {
    flex: 1;
    border: none;
    background: transparent;
    padding-block: 0.6rem;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.global-search__input:focus[b-dqal0sznrh] {
    outline: none;
}

/* 포커스 효과 제거 - 기본 상태 유지 */

.global-search__results[b-dqal0sznrh] {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 0.5rem);
    display: grid;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    margin: 0;
    list-style: none;
    background: var(--surface-color);
    border-radius: 1rem;
    box-shadow: 0 20px 40px var(--shadow-medium);
    border: 1px solid var(--divider-color);
    z-index: 12;
}

.global-search__result-item[b-dqal0sznrh] {
    border-radius: 0.75rem;
}

.global-search__result-button[b-dqal0sznrh] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.65rem var(--spacing-sm);
    border: none;
    background: transparent;
    color: var(--text-primary);
    border-radius: inherit;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    text-align: left;
}

.global-search__result-item.is-active .global-search__result-button[b-dqal0sznrh],
.global-search__result-button:hover[b-dqal0sznrh] {
    background: var(--hover-overlay);
    transform: translateY(-1px);
}

.global-search__result-icon[b-dqal0sznrh] {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background: var(--surface-muted);
    color: var(--primary-color);
}

.global-search__result-title[b-dqal0sznrh] {
    display: block;
    font-weight: 600;
}

.global-search__result-meta[b-dqal0sznrh] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .global-search[b-dqal0sznrh] {
        flex: 1 1 100%;
        max-width: none;
    }

    .global-search__results[b-dqal0sznrh] {
        top: calc(100% + 0.25rem);
    }
}
/* _content/NexaCRM.UI/Shared/NavigationTail.razor.rz.scp.css */
.sidebar[b-xgx60pio9t] {
    height: 100vh;
    background-color: transparent; /* allow rail + panel visuals */
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    align-items: stretch;
    --sidebar-total-width: var(--navigation-tail-width, calc(var(--nav-rail-width, 80px) + var(--nav-width, 320px)));
    width: var(--sidebar-total-width);
    min-width: var(--sidebar-total-width);
}

.sidebar.collapsed[b-xgx60pio9t] {
    --sidebar-total-width: var(--nav-collapsed-width, 72px);
    width: var(--sidebar-total-width);
    min-width: var(--sidebar-total-width);
}

.sidebar-mobile-header[b-xgx60pio9t] {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--surface-color, #ffffff);
    border-bottom: 1px solid var(--ui-surface-border);
    box-shadow: var(--shadow-soft-layer);
    position: sticky;
    top: 0;
    z-index: 1001;
}

.sidebar-mobile-toggle[b-xgx60pio9t] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--ui-surface-border);
    background: var(--surface-color, #ffffff);
    font-weight: 600;
    color: #0f172a;
}

.sidebar-mobile-toggle:focus-visible[b-xgx60pio9t] {
    outline: 3px solid var(--dashboard-focus-ring, #6366f1);
    outline-offset: 2px;
}

.sidebar-mobile-toggle__icon[b-xgx60pio9t] {
    font-size: 1.1rem;
    line-height: 1;
}

.sidebar-mobile-quick-action[b-xgx60pio9t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid transparent;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.18), rgba(59, 130, 246, 0.24));
    color: #0f172a;
}

.sidebar-mobile-quick-action:focus-visible[b-xgx60pio9t] {
    outline: 3px solid var(--dashboard-focus-ring, #6366f1);
    outline-offset: 2px;
}

.sidebar.collapsed .sidebar-rail[b-xgx60pio9t] {
    width: 72px;
    min-width: 72px;
    flex: 0 0 72px;
}

/* Prevent the navigation rail from shrinking when the desktop viewport narrows. */
.sidebar-rail[b-xgx60pio9t] {
    width: 80px;
    min-width: 80px;
    flex: 0 0 80px;
    flex-shrink: 0;
    background-color: #f8fafb;
    border-right: 1px solid #eaecf0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 16px;
    transition: width 0.25s ease, flex-basis 0.25s ease;
}

.rail-logo[b-xgx60pio9t] {
    display: block;
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
}

.rail-logo-img[b-xgx60pio9t] {
    width: 100%;
    height: auto;
}

.rail-list[b-xgx60pio9t] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    flex: 1 1 auto;
}

.rail-btn[b-xgx60pio9t] {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 44px;
    border-radius: 10px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667085;
    cursor: pointer;
}

.rail-btn:hover[b-xgx60pio9t],
.rail-btn.active[b-xgx60pio9t] {
    background-color: #101828;
    color: #ffffff;
}

.rail-footer[b-xgx60pio9t] {
    padding: 12px 0 20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure footer is pinned to bottom of the rail regardless of rail content */
.sidebar-rail .rail-footer[b-xgx60pio9t] {
    margin-top: auto;
}

/* SVG sizing inside rail buttons to avoid visual clipping */
.rail-btn svg[b-xgx60pio9t] {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.rail-btn .nav-icon[b-xgx60pio9t] {
    flex-shrink: 0;
}
.rail-btn .nav-icon svg[b-xgx60pio9t] {
    width: 20px;
    height: 20px;
    fill: currentColor;
    stroke: currentColor;
    flex-shrink: 0;
}

/* normalize icon rendering: ensure consistent stroke width and crisp geometry */
.nav-icon[b-xgx60pio9t] {
    flex-shrink: 0;
}
.nav-icon svg[b-xgx60pio9t] {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.nav-icon svg path[b-xgx60pio9t],
.nav-icon svg line[b-xgx60pio9t],
.nav-icon svg rect[b-xgx60pio9t],
.nav-icon svg circle[b-xgx60pio9t],
.nav-icon svg ellipse[b-xgx60pio9t] {
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.nav-icon svg path[b-xgx60pio9t],
.nav-icon svg line[b-xgx60pio9t] {
    stroke-width: 1.6;
}
/* shapes that rely on fill should still show; we intentionally don't override fill globally */

/* ensure link icons inherit color and scale nicely */
.link-icon[b-xgx60pio9t] {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Prevent accidental fills from global CSS - prefer stroke-based icons by default */

/* NOTE:
   Removed an aggressive global rule that cleared fills on all child SVG shapes.
   That rule could unintentionally strip fills from purposely filled icons (eg. the
   right-side check circle) when the scoped CSS selectors don't reach raw SVG markup
   inserted as markup. We prefer controlling fills at the group/icon level below.
*/

/* Prefer controlling icon appearance at the group level. .svg-group is added inside each SVG
   so themes/states can adjust stroke/fill/width centrally without touching individual shapes. */
.nav-icon .svg-group[b-xgx60pio9t] {
    fill: none !important;           /* default: no fill (stroke icons)
                                        can be overridden per-icon when needed */
    stroke: currentColor !important;  /* inherit color from element */
    stroke-width: 1.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* If an icon intentionally relies on a filled shape (eg. the active "check" circle),
   make the explicit exception after the group rules. Using !important here ensures
   it wins over the `.nav-icon .svg-group` defaults. */
.check-icon svg circle[b-xgx60pio9t],
.check-icon svg .svg-group circle[b-xgx60pio9t] {
    fill: #fff !important;
    stroke: none !important;
}

/* The check icon needs a filled circle - allow it explicitly */
.check-icon svg circle[b-xgx60pio9t] {
    fill: #fff !important;
}

.rail-avatar[b-xgx60pio9t] {
    background: transparent;
    border: none;
    padding: 4px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.rail-avatar img[b-xgx60pio9t] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: block;
}

.rail-avatar:focus[b-xgx60pio9t] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(16,24,40,0.06);
}

.sidebar.collapsed .rail-avatar[b-xgx60pio9t] {
    width: 40px;
    height: 40px;
}

.sidebar.collapsed .rail-avatar img[b-xgx60pio9t] {
    width: 32px;
    height: 32px;
}

.sidebar-panel[b-xgx60pio9t] {
    width: var(--nav-width, 320px);
    min-width: var(--nav-width, 320px);
    flex: 0 0 var(--nav-width, 320px);
    flex-shrink: 0;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(16,24,40,0.08);
    border-left: 1px solid #eef2f6;
    transition: transform 0.25s ease, opacity 0.25s ease;
    transform: translateX(0);
    opacity: 1;
    display: flex;
    flex-direction: column;
}

.sidebar-panel:not(.open)[b-xgx60pio9t] {
    transform: translateX(-8px);
    opacity: 0;
    pointer-events: none;
}

/* Global overrides to control the main content offset depending on the
   sidebar state. Scoped CSS cannot reliably target sibling elements in other
   components, so we emit global selectors here. Use !important to ensure
   these layout rules win over other scoped styles. */
:global(.sidebar.panel-open) ~ .desktop-shell__main[b-xgx60pio9t] {
    --desktop-shell-offset: 0px !important; /* panel overlays — main should not be pushed */
    position: relative;
    z-index: 0 !important;
}

:global(.sidebar:not(.panel-open)) ~ .desktop-shell__main[b-xgx60pio9t] {
    --desktop-shell-offset: var(--sidebar-total-width, calc(var(--nav-rail-width, 80px) + var(--nav-width, 320px))) !important;
    position: relative;
    z-index: 0 !important;
}

:global(.sidebar.collapsed) ~ .desktop-shell__main[b-xgx60pio9t] {
    --desktop-shell-offset: var(--sidebar-total-width, var(--nav-collapsed-width, 72px)) !important; /* keep collapsed behavior consistent */
    position: relative;
    z-index: 0 !important;
}

@media (max-width: 1023.98px) {
    :global(.sidebar) ~ .desktop-shell__main[b-xgx60pio9t] {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

@media (min-width: 1024px) {
    :global(.sidebar) ~ .desktop-shell__main[b-xgx60pio9t] {
        margin-left: var(--desktop-shell-offset) !important;
        width: max(0px, calc(100% - var(--desktop-shell-offset))) !important;
    }
}

.panel-header[b-xgx60pio9t] {
    padding: 20px 20px 8px;
    border-bottom: 1px solid #f1f5f9;
}

.panel-title[b-xgx60pio9t] {
    font-weight: 700;
    font-size: 16px;
}
/* Group title: show a small icon to the left of the title text */
.panel-subgroup-title[b-xgx60pio9t] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: #0f1724;
    margin: 8px 0 6px 0;
}
.panel-subgroup-title .group-title-icon[b-xgx60pio9t] { display: inline-flex; align-items: center; justify-content: center; }
.panel-subgroup-title .group-title-icon svg[b-xgx60pio9t] { width: 18px; height: 18px; }
.panel-subgroup-title .group-title-text[b-xgx60pio9t] { display: inline-block; }

/* Toggler button on subgroup titles to expand/collapse the inner list */
.subgroup-toggler[b-xgx60pio9t] {
    margin-left: auto;
    background: transparent;
    border: none;
    width: 34px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #667085;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    border-radius: 6px;
}
.subgroup-toggler:hover[b-xgx60pio9t] { background: rgba(16,24,40,0.04); color: #0f1724; }
.subgroup-toggler:focus[b-xgx60pio9t] { outline: none; box-shadow: 0 0 0 3px rgba(16,24,40,0.06); }

/* When collapsed, hide the list entirely to match the compact design */
.panel-list.collapsed[b-xgx60pio9t] { display: none; }

.panel-subtitle[b-xgx60pio9t] { color: #98a2b3; font-size: 12px; margin-top: 4px; }

.panel-body[b-xgx60pio9t] { padding: 16px 20px; flex: 1 1 auto; overflow-y: auto; }

/* Vertical guide line running along the subgroup items (subtle gray) */
.panel-body[b-xgx60pio9t] { position: relative; }
.panel-body[b-xgx60pio9t]::before {
    content: "";
    position: absolute;
    left: 18px; /* aligns with the circular marker position */
    top: 12px;
    bottom: 12px;
    width: 4px;
    background: #eef2f6; /* subtle gray guide */
    border-radius: 4px;
    z-index: 1;
}

.panel-list[b-xgx60pio9t] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

.panel-list a[b-xgx60pio9t] {
    text-decoration: none;
    color: #0f1724;
    /* left icon removed for compact listing; reduce left padding accordingly */
    padding: 10px 12px 10px 28px;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.panel-list a i[b-xgx60pio9t] { width: 20px; text-align: center; color: #667085; }

.panel-list a span[b-xgx60pio9t] { flex: 1 1 auto; }

.panel-list a:hover[b-xgx60pio9t] { background: transparent; }

/* Active state: subtle background + small left dot indicator */

/* Active state: no full-row background; show a small circular marker positioned over
   the vertical guide line. Links remain above the guide (z-index) so marker sits
   visually as a badge on the guide. */
.panel-list a.active[b-xgx60pio9t] {
    background: transparent;
    color: #0f1724;
    box-shadow: none !important;
}

.panel-list a.active i[b-xgx60pio9t] { color: #0f1724; }

.panel-list a.active[b-xgx60pio9t]::before {
    content: "";
    position: absolute;
    left: 12px; /* place the small dot slightly left of the guide center */
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: var(--nav-active-color, #0f1724);
    border-radius: 50%;
    z-index: 3; /* above guide but below link content to appear attached */
}

/* Hide the right-side check icon when active to match compact design */
.panel-list a.active .check-icon[b-xgx60pio9t] { display: none; }

/* Make sure link icons (radio circles) sit left of text and the check icon aligns right */
.panel-list li.item-active .link-icon[b-xgx60pio9t] { display: none; margin-right: 0; }
.panel-list li.item-active .check-icon[b-xgx60pio9t] { display: none !important; margin-left: 0; }

.panel-footer[b-xgx60pio9t] { padding: 16px 20px; border-top: 1px solid #f1f5f9; }

.profile-card[b-xgx60pio9t] { display: flex; gap: 12px; align-items: center; }

.profile-card img[b-xgx60pio9t] { width: 44px; height: 44px; border-radius: 50%; }

.profile-info .profile-name[b-xgx60pio9t] { font-weight: 600; }

.profile-info .profile-email[b-xgx60pio9t] { color: #667085; font-size: 13px; }

.btn-toggle-collapse[b-xgx60pio9t] { position: absolute; left: 84px; top: 50%; transform: translateY(-50%); background-color: white; border: 1px solid #eaecf0; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; z-index: 1002; transition: left 0.25s ease; }

/* When panel open, place toggle near collapsed rail (so it visually sits between rail and panel) */
.sidebar.panel-open .btn-toggle-collapse[b-xgx60pio9t] { left: 68px; }

/* When sidebar fully collapsed, move toggle slightly inward */
.sidebar.collapsed .btn-toggle-collapse[b-xgx60pio9t] { left: 56px; }

.sidebar-overlay[b-xgx60pio9t] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.38);
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 1000;
}

@media (max-width: 1200px) {
    :global(.desktop-shell.mobile-layout) .sidebar[b-xgx60pio9t] {
        position: relative;
        height: auto;
        flex-direction: column;
        width: calc(var(--nav-rail-width, 80px) + var(--nav-width, 320px));
        min-width: calc(var(--nav-rail-width, 80px) + var(--nav-width, 320px));
    }

    :global(.desktop-shell.mobile-layout) .sidebar-rail[b-xgx60pio9t] {
        display: none;
    }

    :global(.desktop-shell.mobile-layout) .sidebar-mobile-header[b-xgx60pio9t] {
        display: flex;
    }

    :global(.desktop-shell.mobile-layout) .sidebar-panel[b-xgx60pio9t] {
        position: fixed;
        inset: 0 auto 0 0;
        width: var(--nav-width, 320px);
        max-width: var(--nav-width, 320px);
        height: 100vh;
        transform: translateX(-100%);
        opacity: 0;
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
        z-index: 1002;
        transition: transform var(--motion-duration-standard) var(--motion-ease-entrance),
                    opacity var(--motion-duration-standard) var(--motion-ease-standard);
    }

    :global(.desktop-shell.mobile-layout) .sidebar[data-panel-state="expanded"] .sidebar-panel[b-xgx60pio9t] {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    :global(.desktop-shell.mobile-layout) .sidebar-mobile-toggle__label[b-xgx60pio9t] {
        display: none;
    }
}
/* _content/NexaCRM.UI/Shared/NavMenu.razor.rz.scp.css */
.shell-nav[b-8a4g1cdb5l] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--spacing-lg);
    gap: var(--spacing-lg);
    background: var(--surface-gradient, var(--surface-color));
}

.shell-nav__header[b-8a4g1cdb5l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.shell-nav__brand[b-8a4g1cdb5l] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.shell-nav__logo[b-8a4g1cdb5l] {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: var(--favorite-surface);
    color: var(--primary-color);
}

.shell-nav__titles[b-8a4g1cdb5l] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.shell-nav__title[b-8a4g1cdb5l] {
    font-size: 1.1rem;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.shell-nav__subtitle[b-8a4g1cdb5l] {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.shell-nav__close[b-8a4g1cdb5l] {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.shell-nav__close:hover[b-8a4g1cdb5l] {
    background-color: var(--hover-overlay);
    transform: translateY(-1px);
}

.shell-nav__content[b-8a4g1cdb5l] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    overflow-y: auto;
    padding-right: 0.2rem;
}

.shell-nav__section[b-8a4g1cdb5l] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.shell-nav__section-heading[b-8a4g1cdb5l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

.shell-nav__section-heading--compact[b-8a4g1cdb5l] {
    align-items: baseline;
}

.shell-nav__section-title[b-8a4g1cdb5l] {
    font-weight: 600;
    color: var(--text-secondary);
}

.shell-nav__clear[b-8a4g1cdb5l] {
    border: none;
    background: transparent;
    color: var(--secondary-color);
    font-size: 0.75rem;
    text-decoration: underline;
    padding: 0;
}

.shell-nav__clear:hover[b-8a4g1cdb5l] {
    color: var(--primary-hover);
}

.shell-nav__quick-links[b-8a4g1cdb5l],
.shell-nav__recent[b-8a4g1cdb5l],
.shell-nav__group-links[b-8a4g1cdb5l] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-xs);
}

.shell-nav__quick-link[b-8a4g1cdb5l],
.shell-nav__recent-link[b-8a4g1cdb5l] {
    width: 100%;
    border: none;
    background: var(--surface-muted);
    border-radius: 0.75rem;
    padding: 0.6rem var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-primary);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.shell-nav__quick-link:hover[b-8a4g1cdb5l],
.shell-nav__recent-link:hover[b-8a4g1cdb5l] {
    transform: translateY(-1px);
    box-shadow: 0 18px 32px var(--shadow-light);
}

.shell-nav__quick-icon[b-8a4g1cdb5l],
.shell-nav__recent-icon[b-8a4g1cdb5l] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    background: var(--surface-color);
    color: var(--primary-color);
}

.shell-nav__groups[b-8a4g1cdb5l] {
    display: grid;
    gap: var(--spacing-sm);
}

.shell-nav__group[b-8a4g1cdb5l] {
    border-radius: 1rem;
    background: var(--surface-color);
    border: 1px solid var(--divider-color);
    box-shadow: 0 12px 32px var(--shadow-light);
    overflow: hidden;
}

.shell-nav__group-summary[b-8a4g1cdb5l] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.75rem var(--spacing-md);
    cursor: pointer;
}

.shell-nav__group-icon[b-8a4g1cdb5l] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    background: var(--surface-muted);
    color: var(--primary-color);
}

.shell-nav__group-links[b-8a4g1cdb5l] {
    padding: 0 var(--spacing-md) var(--spacing-md);
}

.shell-nav__link[b-8a4g1cdb5l] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.55rem 0;
    border-radius: 0.75rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.shell-nav__link:hover[b-8a4g1cdb5l],
.shell-nav__link.active[b-8a4g1cdb5l] {
    background: var(--hover-overlay);
    color: var(--text-primary);
    transform: translateX(2px);
}

.shell-nav__link.active[b-8a4g1cdb5l] {
    background: linear-gradient(135deg, rgba(33, 83, 200, 0.18), rgba(33, 83, 200, 0.1));
    color: #fff;
}

.shell-nav__link-icon[b-8a4g1cdb5l] {
    display: grid;
    place-items: center;
    width: 1.75rem;
    color: currentColor;
}

.shell-nav__footer[b-8a4g1cdb5l] {
    margin-top: auto;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--divider-color);
}

.shell-nav__logout[b-8a4g1cdb5l] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    padding: 0.6rem 0;
    border-radius: 0.75rem;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.shell-nav__logout:hover[b-8a4g1cdb5l] {
    background: var(--hover-overlay);
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .shell-nav[b-8a4g1cdb5l] {
        padding: var(--spacing-md);
    }

    .shell-nav__content[b-8a4g1cdb5l] {
        gap: var(--spacing-md);
    }
}
/* _content/NexaCRM.UI/Shared/ResponsivePage.razor.rz.scp.css */
:root[b-d69art8948] {
    --responsive-page-max-width-constrained: clamp(64rem, 78vw, 90rem);
    --responsive-page-max-width-expanded: 100%;
}

.responsive-page[b-d69art8948] {
    position: relative;
    display: block;
    width: 100%;
    min-height: 100%;
    background: var(--ui-page-background);
}

.responsive-page__inner[b-d69art8948] {
    display: flex;
    flex-direction: column;
    gap: var(--ui-grid-gap);
    margin-inline: auto;
    padding-inline: var(--ui-shell-padding-inline);
    padding-block: var(--ui-shell-padding-block);
    width: min(100%, var(--responsive-page-max-width, var(--responsive-page-max-width-constrained)));
}

.responsive-page[data-layout="constrained"][b-d69art8948] {
    --responsive-page-max-width: var(--responsive-page-max-width-constrained);
}

.responsive-page[data-layout="expanded"][b-d69art8948] {
    --responsive-page-max-width: var(--responsive-page-max-width-expanded);
}

.responsive-page[data-layout="expanded"] .responsive-page__inner[b-d69art8948] {
    padding-inline: clamp(1rem, 3vw, 3rem);
}

.responsive-page[data-responsive-grid] .responsive-page__inner[b-d69art8948] {
    display: grid;
    grid-template-columns: repeat(var(--ui-grid-active-columns, var(--ui-grid-columns-desktop)), minmax(0, 1fr));
    column-gap: var(--ui-grid-column-gap, var(--ui-grid-gap));
    row-gap: var(--ui-grid-row-gap, var(--ui-grid-gap));
}

.responsive-page[data-responsive-grid] .responsive-page__inner > *[b-d69art8948] {
    grid-column: span var(--responsive-page-col-span, var(--ui-grid-active-columns, var(--ui-grid-columns-desktop)));
}

.responsive-page[data-responsive-grid] .responsive-page__inner > [data-col-span][b-d69art8948] {
    --responsive-page-col-span: var(--ui-grid-active-columns, var(--ui-grid-columns-desktop));
}

.responsive-page[data-responsive-grid] .responsive-page__inner > [data-col-span="6"][b-d69art8948] { --responsive-page-col-span: 6; }
.responsive-page[data-responsive-grid] .responsive-page__inner > [data-col-span="7"][b-d69art8948] { --responsive-page-col-span: 7; }
.responsive-page[data-responsive-grid] .responsive-page__inner > [data-col-span="8"][b-d69art8948] { --responsive-page-col-span: 8; }
.responsive-page[data-responsive-grid] .responsive-page__inner > [data-col-span="5"][b-d69art8948] { --responsive-page-col-span: 5; }
.responsive-page[data-responsive-grid] .responsive-page__inner > [data-col-span="4"][b-d69art8948] { --responsive-page-col-span: 4; }

@media (max-width: 1200px) {
    .responsive-page[data-responsive-grid] .responsive-page__inner > *[b-d69art8948] {
        --responsive-page-col-span: var(--ui-grid-columns-large-tablet);
    }
}

@media (max-width: 1000px) {
    .responsive-page[data-responsive-grid] .responsive-page__inner > *[b-d69art8948] {
        --responsive-page-col-span: var(--ui-grid-columns-tablet);
    }
}

@media (max-width: 768px) {
    .responsive-page__inner[b-d69art8948] {
        padding-inline: clamp(1rem, 6vw, 1.75rem);
    }

    .responsive-page[data-responsive-grid] .responsive-page__inner > *[b-d69art8948] {
        --responsive-page-col-span: var(--ui-grid-columns-compact);
    }
}

@media (max-width: 576px) {
    .responsive-page__inner[b-d69art8948] {
        padding-inline: clamp(0.75rem, 7vw, 1.25rem);
        padding-block: clamp(1rem, 8vw, 1.75rem);
    }
}
/* _content/NexaCRM.UI/Shared/SalesAppointmentForm.razor.rz.scp.css */
.appointment-form[b-cxb7hkwaku] {
    width: 100%;
    max-width: 600px;
}

.form-header[b-cxb7hkwaku] {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #dee2e6;
}

.form-header h4[b-cxb7hkwaku] {
    margin: 0;
    color: #333;
}

.form-content[b-cxb7hkwaku] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-row[b-cxb7hkwaku] {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.form-group[b-cxb7hkwaku] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.form-group.flex-half[b-cxb7hkwaku] {
    flex: 0 0 calc(50% - 7.5px);
}

.form-group label[b-cxb7hkwaku] {
    margin-bottom: 8px; /* Increased spacing */
    font-weight: 600;
    color: #555;
    font-size: 16px; /* Better readability on mobile - prevent zoom */
    line-height: 1.3;
}

.form-control[b-cxb7hkwaku] {
    padding: 14px 18px; /* Increased padding for better touch targets */
    border: 1px solid #ced4da;
    border-radius: 10px; /* More rounded for modern mobile look */
    font-size: 16px; /* Prevent zoom on iOS */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    min-height: 48px; /* Increased minimum touch target size */
    line-height: 1.4;
}

.form-control:focus[b-cxb7hkwaku] {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-control:invalid[b-cxb7hkwaku] {
    border-color: #dc3545;
}

textarea.form-control[b-cxb7hkwaku] {
    resize: vertical;
    min-height: 90px; /* Better default height for mobile */
    font-family: inherit; /* Use same font as other controls */
    line-height: 1.5;
}

.validation-summary[b-cxb7hkwaku] {
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
}

.validation-summary ul[b-cxb7hkwaku] {
    margin: 0;
    padding-left: 20px;
}

.validation-message[b-cxb7hkwaku] {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
}

.form-actions[b-cxb7hkwaku] {
    display: flex;
    gap: 12px; /* Increased gap for better touch spacing */
    justify-content: flex-end;
    padding-top: 20px;
    border-top: 1px solid #dee2e6;
    margin-top: 20px;
}

.btn[b-cxb7hkwaku] {
    padding: 14px 22px; /* Increased padding for better touch targets */
    border: 1px solid transparent;
    border-radius: 10px; /* More rounded for modern mobile look */
    font-size: 16px; /* Larger font for mobile */
    font-weight: 500; /* Slightly bolder for better visibility */
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Larger gap between icon and text */
    min-height: 48px; /* Increased minimum touch target size */
    min-width: 48px;
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight */
    touch-action: manipulation; /* Optimize for touch */
}

.btn:hover[b-cxb7hkwaku] {
    text-decoration: none;
}

.btn-success[b-cxb7hkwaku] {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
}

.btn-success:hover[b-cxb7hkwaku] {
    background-color: #218838;
    border-color: #1e7e34;
}

.btn-secondary[b-cxb7hkwaku] {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

.btn-secondary:hover[b-cxb7hkwaku] {
    background-color: #5a6268;
    border-color: #545b62;
}

/* Responsive Design */
@media (max-width: 768px) {
    .appointment-form[b-cxb7hkwaku] {
        width: 100%;
        max-width: 100%;
    }
    
    .form-header[b-cxb7hkwaku] {
        margin-bottom: 20px;
        padding-bottom: 15px;
    }
    
    .form-header h4[b-cxb7hkwaku] {
        font-size: 1.25rem;
        text-align: center;
    }
    
    .form-row[b-cxb7hkwaku] {
        flex-direction: column;
        gap: 18px; /* Increased spacing between form elements */
    }
    
    .form-group.flex-half[b-cxb7hkwaku] {
        flex: 1;
    }
    
    .form-group label[b-cxb7hkwaku] {
        font-size: 16px;
        margin-bottom: 10px; /* Increased spacing */
        font-weight: 600;
    }
    
    .form-control[b-cxb7hkwaku] {
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 16px 18px; /* Increased padding */
        border-radius: 10px;
        line-height: 1.4;
        min-height: 52px; /* Larger touch targets on mobile */
    }
    
    textarea.form-control[b-cxb7hkwaku] {
        min-height: 110px; /* Larger textarea on mobile */
        resize: vertical;
        font-size: 16px;
        line-height: 1.5;
    }
    
    .form-actions[b-cxb7hkwaku] {
        flex-direction: column;
        gap: 18px; /* Increased spacing between buttons */
        padding-top: 30px; /* More breathing room */
        margin-top: 25px;
    }
    
    .btn[b-cxb7hkwaku] {
        width: 100%;
        justify-content: center;
        font-size: 17px; /* Slightly larger for better readability */
        padding: 18px 20px; /* Larger padding */
        border-radius: 12px; /* More rounded corners */
        font-weight: 600; /* Bolder text */
        min-height: 56px; /* Larger touch targets */
    }
    
    .btn:active[b-cxb7hkwaku] {
        transform: scale(0.98);
        transition-duration: 0.1s;
    }
    
    .validation-summary[b-cxb7hkwaku] {
        margin-bottom: 20px;
        padding: 15px;
        border-radius: 8px;
        font-size: 14px;
    }
    
    .validation-message[b-cxb7hkwaku] {
        font-size: 14px;
        margin-top: 6px;
    }
}

/* Tablet layout (768px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .appointment-form[b-cxb7hkwaku] {
        max-width: 550px;
    }
    
    .form-row[b-cxb7hkwaku] {
        flex-direction: row; /* Keep side-by-side layout on tablet */
        gap: 18px;
    }
    
    .form-group.flex-half[b-cxb7hkwaku] {
        flex: 0 0 calc(50% - 9px); /* Restore two-column layout */
    }
    
    .form-control[b-cxb7hkwaku] {
        font-size: 16px;
        padding: 14px 18px;
        min-height: 48px; /* Ensure consistent touch target */
        border-radius: 8px;
    }
    
    textarea.form-control[b-cxb7hkwaku] {
        min-height: 90px;
    }
    
    .btn[b-cxb7hkwaku] {
        font-size: 16px;
        padding: 14px 20px;
        min-height: 48px;
        border-radius: 8px;
    }
    
    .form-actions[b-cxb7hkwaku] {
        flex-direction: row;
        justify-content: flex-end;
        gap: 12px;
    }
    
    .btn[b-cxb7hkwaku] {
        width: auto; /* Don't force full width on tablet */
        min-width: 120px;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .form-header h4[b-cxb7hkwaku] {
        font-size: 1.15rem;
        line-height: 1.3;
    }
    
    .form-control[b-cxb7hkwaku] {
        padding: 18px 16px; /* Larger padding for very small screens */
        font-size: 16px;
        min-height: 54px; /* Even larger touch targets */
    }
    
    .btn[b-cxb7hkwaku] {
        padding: 20px 20px; /* Larger touch area */
        font-size: 17px;
        min-height: 58px;
        border-radius: 14px; /* More rounded for modern look */
    }
    
    .form-group label[b-cxb7hkwaku] {
        font-size: 16px; /* Consistent with input size */
        margin-bottom: 12px; /* More breathing room */
        line-height: 1.4;
    }
    
    .form-row[b-cxb7hkwaku] {
        gap: 20px; /* More spacing between sections */
    }
    
    textarea.form-control[b-cxb7hkwaku] {
        min-height: 120px; /* Larger textarea for better usability */
    }
}