/* --- Custom Nav Sidebar Gradient for RadzenPanelMenu --- */
.sidebar {
 background: linear-gradient(180deg, #1e3c720%, #2a529850%, #38b2ac100%) !important;
 color: #fff !important;
 min-height:100vh !important;
 border-right:1px solid #1e3c72 !important;
}

.rz-panel-menu {
 --rz-panel-menu-item-background-color: transparent !important;
 background: linear-gradient(180deg, #1e3c720%, #2a529850%, #38b2ac100%) !important;
 background-color: transparent !important;
 color: #fff !important;
 min-height:100vh !important;
 border-right: none !important;
}

.rz-panel-menu .rz-navigation-item-wrapper {
 background: transparent;
 color: #fff;
}

.rz-panel-menu .rz-navigation-item-link {
 color: #fff;
}

    .rz-panel-menu .rz-navigation-item-link.active,
    .rz-panel-menu .rz-navigation-item-link:hover {
        background: rgba(255,255,255,0.08);
        color: #e0f7fa !important;
    }

.rz-panel-menu .rz-navigation-item-icon {
 color: #e0f7fa;
}

:root .top-row.ps-3.navbar {
 background: linear-gradient(90deg, #1e3c720%, #2a5298100%);
 color: #fff;
}

:root .navbar-brand {
 color: #fff !important;
}

/* --- End Custom Nav Sidebar Gradient --- */

/* Existing app styles below */
html, body {
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
 color: #006bb7;
}

.btn-primary {
 color: #fff;
 background-color: #1b6ec2;
 border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
 box-shadow:0000.1rem white,0000.25rem #258cfb;
}

.content {
 padding-top:1.1rem;
}

h1:focus {
 outline: none;
}

.valid.modified:not([type=checkbox]) {
 outline:1px solid #26b050;
}

.invalid {
 outline:1px solid #e50000;
}

.validation-message {
 color: #e50000;
}

.blazor-error-boundary {
 background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1zbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat1rem/1.8rem, #b32121;
 padding:1rem1rem1rem3.7rem;
 color: white;
}

 .blazor-error-boundary::after {
 content: "An error has occurred."
 }

.darker-border-checkbox.form-check-input {
 border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
 color: var(--bs-secondary-color);
 text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
 text-align: start;
}

/* ===== MOBILE & TABLET RESPONSIVE STYLES ===== */

/* Mobile Phone Styles (up to 640px) */
@media (max-width: 640.98px) {
    /* Typography adjustments for mobile */
    h1 {
        font-size: 1.75rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    h3 {
        font-size: 1.25rem !important;
    }

    h4 {
        font-size: 1.1rem !important;
    }

    h5, h6 {
        font-size: 1rem !important;
    }

    /* Touch-friendly buttons and inputs */
    .btn, button {
        min-height: 44px;
        padding: 0.625rem 1rem;
        font-size: 1rem;
    }

    .form-control, .form-select {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Radzen component adjustments */
    .rz-button {
        min-height: 44px !important;
        padding: 0.625rem 1rem !important;
    }

    /* Table responsiveness */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        font-size: 0.875rem;
    }

    /* Card spacing for mobile */
    .card {
        margin-bottom: 1rem;
    }

    .card-body {
        padding: 1rem;
    }

    /* Radzen DataGrid mobile optimization */
    .rz-datatable {
        font-size: 0.875rem;
    }

    .rz-datatable-data td {
        padding: 0.5rem 0.25rem;
    }

    /* Stack columns on mobile */
    .row > [class*="col-"] {
        margin-bottom: 0.75rem;
    }

    /* Modal dialogs for mobile */
    .rz-dialog {
        max-width: 95% !important;
        margin: 0.5rem !important;
    }

    /* Reduce padding globally on mobile */
    .px-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Navigation panel menu adjustments */
    .rz-panel-menu {
        font-size: 0.95rem;
    }
}

/* Tablet Styles (641px to 1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
    /* Typography adjustments for tablets */
    h1 {
        font-size: 2rem !important;
    }

    h2 {
        font-size: 1.75rem !important;
    }

    /* Touch-friendly buttons on tablets */
    .btn, button {
        min-height: 42px;
    }

    .form-control, .form-select {
        min-height: 42px;
    }

    /* Card adjustments */
    .card-body {
        padding: 1.25rem;
    }

    /* Table adjustments */
    table {
        font-size: 0.9rem;
    }
}

/* Landscape Phone Styles (landscape orientation) */
@media (max-width: 896px) and (orientation: landscape) {
    /* Reduce header sizes in landscape */
    h1 {
        font-size: 1.5rem !important;
    }

    h2 {
        font-size: 1.35rem !important;
    }

    /* Compact layout for landscape */
    .content {
        padding-top: 0.5rem !important;
    }
}

/* Large Desktop Optimizations (above 1440px) */
@media (min-width: 1440px) {
    .container, .container-fluid {
        max-width: 1400px;
    }
}

/* ===== DATA TABLES & GRIDS MOBILE OPTIMIZATION ===== */

/* Mobile DataGrid Optimizations */
@media (max-width: 640.98px) {
    /* Make DataGrid scrollable horizontally */
    .rz-datatable-scrollable-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Compact DataGrid cells */
    .rz-datatable th,
    .rz-datatable td {
        padding: 0.5rem 0.35rem !important;
        font-size: 0.8rem !important;
    }

    /* DataGrid headers */
    .rz-datatable th {
        white-space: nowrap;
        font-size: 0.75rem !important;
    }

    /* Pager adjustments for mobile */
    .rz-paginator {
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding: 0.5rem !important;
    }

    .rz-paginator .rz-paginator-pages,
    .rz-paginator .rz-paginator-page {
        font-size: 0.85rem !important;
        min-width: 36px !important;
    }

    /* Hide "rows per page" text on very small screens */
    .rz-paginator-rpp-label {
        display: none;
    }

    /* Filter row adjustments */
    .rz-datatable-filter-row input,
    .rz-datatable-filter-row select {
        font-size: 0.85rem !important;
        padding: 0.25rem !important;
    }

    /* Column chooser and other toolbar buttons */
    .rz-datatable-toolbar {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* Make action buttons stack on mobile if in a row */
    .rz-button-group {
        flex-direction: column !important;
    }

    .rz-button-group .rz-button {
        width: 100%;
        margin-bottom: 0.25rem;
    }
}

/* Tablet DataGrid Optimizations */
@media (min-width: 641px) and (max-width: 1024px) {
    .rz-datatable th,
    .rz-datatable td {
        padding: 0.6rem 0.5rem !important;
        font-size: 0.9rem !important;
    }

    .rz-paginator {
        padding: 0.75rem !important;
    }
}

/* ===== FORM MOBILE OPTIMIZATION ===== */

/* Mobile form optimizations */
@media (max-width: 640.98px) {
    /* Stack form groups vertically */
    .form-row,
    .rz-stack[orientation="Horizontal"] {
        flex-direction: column !important;
    }

    /* Full-width form controls */
    .form-control,
    .form-select,
    .rz-textbox,
    .rz-dropdown,
    .rz-numeric {
        width: 100% !important;
    }

    /* Form labels */
    label {
        font-size: 0.95rem;
        margin-bottom: 0.375rem;
    }

    /* Radzen form fields */
    .rz-formfield {
        width: 100% !important;
        margin-bottom: 1rem;
    }

    /* Checkbox and radio groups */
    .form-check,
    .rz-chkbox,
    .rz-radiobutton {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Date picker adjustments */
    .rz-datepicker {
        width: 100% !important;
    }

    .rz-calendar {
        max-width: 100% !important;
    }

    /* Dropdown menus */
    .rz-dropdown-panel {
        max-width: 95vw !important;
    }

    /* Form action buttons */
    .form-actions,
    .button-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .form-actions .btn,
    .form-actions .rz-button,
    .button-group .btn,
    .button-group .rz-button {
        width: 100%;
    }
}

/* Tablet form optimizations */
@media (min-width: 641px) and (max-width: 1024px) {
    .form-control,
    .form-select,
    .rz-textbox,
    .rz-dropdown {
        font-size: 0.95rem;
    }
}

/* ===== RADZEN COMPONENT SPECIFIC MOBILE FIXES ===== */

@media (max-width: 640.98px) {
    /* Card grids - ensure proper stacking */
    .rz-card-grid {
        grid-template-columns: 1fr !important;
    }

    /* Splitter - make vertical on mobile */
    .rz-splitter {
        flex-direction: column !important;
    }

    /* TabStrip - scrollable tabs on mobile */
    .rz-tabview-nav {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
    }

    .rz-tabview-nav li {
        flex-shrink: 0;
    }

    /* Panel - reduce padding */
    .rz-panel .rz-panel-content {
        padding: 0.75rem !important;
    }

    /* Fieldset - reduce padding */
    .rz-fieldset .rz-fieldset-content {
        padding: 0.75rem !important;
    }

    /* Chart - make responsive */
    .rz-chart {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Tree - reduce indentation on mobile */
    .rz-tree .rz-tree-node-content {
        padding-left: 0.5rem !important;
    }

    /* Menu - full width on mobile */
    .rz-menu {
        width: 100% !important;
    }

    .rz-menu-item {
        width: 100%;
    }
}

/* Print Styles */
@media print {
    .sidebar, .hamburger-menu, .top-row {
        display: none !important;
    }

    .content {
        padding: 0 !important;
        margin: 0 !important;
    }

    .page {
        display: block !important;
    }

    main {
        width: 100% !important;
    }

    /* Hide interactive elements when printing */
    .rz-button,
    .rz-paginator,
    .rz-datatable-filter-row {
        display: none !important;
    }

    /* Expand all content for printing */
    .rz-datatable {
        overflow: visible !important;
    }

    table {
        page-break-inside: auto;
    }

    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }
}

/* ===== GLOBAL HEADER TEXT CONTRAST OVERRIDE ===== */
/* Ensures all page headers render readable text on dark backgrounds */
:root {
    --app-header-text-color: #ffffff;
}

/* Common page header containers */
.journal-entries-header,
.contract-plans-header,
.crm-report-header,
.doc-viewer-header,
.activations-header {
    color: var(--app-header-text-color) !important;
}

/* Explicit heading targets inside header blocks */
.journal-entries-header h1,
.journal-entries-header h2,
.journal-entries-header h3,
.contract-plans-header h1,
.contract-plans-header h2,
.contract-plans-header h3,
.crm-report-header h1,
.crm-report-header h2,
.crm-report-header h3,
.doc-viewer-header h1,
.doc-viewer-header h2,
.doc-viewer-header h3,
.activations-header h1,
.activations-header h2,
.activations-header h3 {
    color: var(--app-header-text-color) !important;
}

/* Subtitles and supporting text within headers */
.journal-entries-header .subtitle,
.contract-plans-header .subtitle,
.crm-report-header .subtitle,
.doc-viewer-header .subtitle,
.activations-header .subtitle,
.header-stat .stat-value,
.header-stat .stat-label {
    color: var(--app-header-text-color) !important;
}