/* Debug Overlay - Blazor WebAssembly Edition */
/* Scoped styles for debug telemetry system */

.debug-overlay {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10000;
    pointer-events: none;
}

.debug-toggle,
.debug-panel {
    pointer-events: auto;
}

/* Toggle Button - Bottom Right Corner */
.debug-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.debug-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.debug-toggle i {
    color: white;
}

.debug-error-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ef4444;
    color: white;
    border-radius: 12px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
}

/* Debug Panel - Opens from Bottom Right */
.debug-panel {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 900px;
    max-height: calc(100vh - 100px);
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10000;
}

/* Header */
.debug-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.debug-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.debug-actions {
    display: flex;
    gap: 8px;
}

.debug-actions button {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.2s;
    color: #6b7280;
}

.debug-actions button:hover {
    background: #f3f4f6;
    color: #111827;
}

/* Tabs */
.debug-tabs {
    display: flex;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    overflow-x: auto;
}

.debug-tab {
    flex: 1;
    min-width: fit-content;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.debug-tab:hover {
    background: #f3f4f6;
    color: #111827;
}

.debug-tab-active {
    color: #667eea;
    border-bottom-color: #667eea;
    background: white;
}

/* Subtabs */
.debug-subtabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.debug-subtab {
    padding: 6px 12px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #6b7280;
    transition: all 0.2s;
}

.debug-subtab:hover {
    background: #e5e7eb;
}

.debug-subtab-active {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

/* Content */
.debug-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: white;
}

.debug-tab-content h3 {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Tables */
.debug-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 12px;
}

.debug-table thead tr {
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
}

.debug-table th {
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    color: #6b7280;
    font-size: 11px;
    text-transform: uppercase;
}

.debug-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
}

.debug-table tbody tr:hover {
    background: #f9fafb;
}

.debug-row-warning {
    background: #fef3c7 !important;
}

.debug-text-warning {
    color: #d97706;
    font-weight: 600;
}

.debug-truncate {
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Badges */
.debug-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 4px;
}

.debug-badge-success {
    background: #d1fae5;
    color: #065f46;
}

.debug-badge-danger {
    background: #fee2e2;
    color: #991b1b;
}

.debug-badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.debug-badge-info {
    background: #dbeafe;
    color: #1e40af;
}

.debug-badge-secondary {
    background: #f3f4f6;
    color: #6b7280;
}

/* Stats Cards */
.debug-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.debug-stat-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.debug-stat-label {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 600;
}

.debug-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    text-align: center;
}

/* Error Cards */
.debug-error-card {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.debug-error-header {
    padding: 12px;
    border-bottom: 1px solid #fecaca;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.debug-error-body {
    padding: 12px;
    font-size: 12px;
}

.debug-error-body strong {
    color: #991b1b;
}

.debug-error-body p {
    margin: 4px 0 12px 0;
    color: #374151;
}

.debug-stacktrace {
    margin-top: 8px;
}

.debug-stacktrace summary {
    cursor: pointer;
    color: #991b1b;
    font-weight: 600;
    padding: 8px;
    background: white;
    border: 1px solid #fecaca;
    border-radius: 6px;
}

.debug-stacktrace pre {
    margin: 8px 0 0 0;
    padding: 12px;
    background: white;
    border: 1px solid #fecaca;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 11px;
    color: #374151;
}

.debug-error-msg {
    margin-top: 4px;
    font-size: 11px;
    color: #991b1b;
}

.debug-timestamp {
    font-size: 11px;
    color: #6b7280;
    margin-left: 8px;
}

/* Empty States */
.debug-empty {
    text-align: center;
    padding: 40px 20px;
    color: #9ca3af;
    font-size: 13px;
}

.debug-empty code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    color: #667eea;
}

.debug-success-message {
    text-align: center;
    padding: 40px 20px;
    color: #059669;
}

.debug-success-message i {
    font-size: 48px;
    margin-bottom: 12px;
    display: block;
}

.debug-info {
    text-align: center;
    padding: 12px;
    background: #f9fafb;
    border-radius: 6px;
    font-size: 11px;
    color: #6b7280;
    margin-top: 12px;
}

/* Loading */
.debug-loading {
    text-align: center;
    padding: 20px;
    color: #6b7280;
    font-size: 13px;
}

.debug-loading i {
    margin-right: 8px;
}

/* Buttons */
.debug-btn-small {
    padding: 4px 8px;
    font-size: 11px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.debug-btn-small:hover {
    background: #f3f4f6;
}

.debug-error-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .debug-panel {
        background: #1e293b;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    }

    .debug-header {
        background: #0f172a;
        border-bottom-color: #334155;
    }

    .debug-header h4 {
        color: #f1f5f9;
    }

    .debug-tabs {
        background: #0f172a;
        border-bottom-color: #334155;
    }

    .debug-tab {
        color: #94a3b8;
    }

    .debug-tab:hover {
        background: #1e293b;
        color: #f1f5f9;
    }

    .debug-tab-active {
        background: #1e293b;
        color: #818cf8;
        border-bottom-color: #818cf8;
    }

    .debug-content {
        background: #1e293b;
    }

    .debug-tab-content h3 {
        color: #f1f5f9;
    }

    .debug-table thead tr {
        background: #0f172a;
        border-bottom-color: #334155;
    }

    .debug-table th {
        color: #94a3b8;
    }

    .debug-table td {
        color: #e2e8f0;
        border-bottom-color: #334155;
    }

    .debug-table tbody tr:hover {
        background: #0f172a;
    }

    .debug-actions button {
        background: #0f172a;
        border-color: #334155;
        color: #94a3b8;
    }

    .debug-actions button:hover {
        background: #334155;
        color: #f1f5f9;
    }
}

/* Performance observations collapsible (shown in Errors tab, all breakpoints) */
.debug-perf-notes {
    border: 1px solid #fcd34d;
    border-radius: 8px;
    overflow: hidden;
}

.debug-perf-notes-summary {
    padding: 10px 16px;
    background: #fffbeb;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #92400e;
    list-style: none;
}

.debug-perf-notes-summary::-webkit-details-marker { display: none; }

.debug-perf-notes-body {
    padding: 8px 16px;
    max-height: 240px;
    overflow-y: auto;
}

.debug-perf-note-item {
    padding: 6px 0;
    border-bottom: 1px solid #fef3c7;
    font-size: 12px;
}

.debug-perf-note-item:last-child {
    border-bottom: none;
}

@media (prefers-color-scheme: dark) {
    .debug-perf-notes {
        border-color: #92400e;
    }

    .debug-perf-notes-summary {
        background: #422006;
        color: #fbbf24;
    }

    .debug-perf-notes-body {
        background: #1e293b;
    }

    .debug-perf-note-item {
        border-bottom-color: #422006;
    }
}

/* Responsive � tablet (? 768px) */
@media (max-width: 768px) {
    .debug-panel {
        width: calc(100vw - 40px);
        right: 20px;
    }

    .debug-tabs {
        overflow-x: auto;
    }

    /* min-width was 100px, so 6 tabs needed 600px just to avoid scrolling -- wider than
       most narrow-desktop windows (dev tools open, a side-by-side editor). Errors ended up
       scrolled out of view with no scrollbar affordance, looking like a missing tab.
       Shrinking the floor and tightening padding/font fits all 6 without scroll down to
       roughly 460px of panel width (~500px viewport). */
    .debug-tab {
        flex: 1 1 70px;
        min-width: 70px;
        padding: 10px 8px;
        font-size: 12px;
        gap: 4px;
    }

    .debug-stats {
        grid-template-columns: 1fr;
    }
}

/* Responsive � iPhone 14 Pro Max (? 480px): full-screen bottom sheet */
@media (max-width: 480px) {

    /* Toggle button: clear the mobile quick bar plus the home-indicator safe area. */
    .debug-toggle {
        bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 16px);
        right: 16px;
        width: 44px;
        height: 44px;
        font-size: 17px;
    }

    /* Panel: full-width bottom sheet anchored to the viewport bottom  */
    .debug-panel {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-height: 85dvh;
        border-radius: 16px 16px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Header: tighter padding, smaller title */
    .debug-header {
        padding: 12px 14px;
    }

    .debug-header h4 {
        font-size: 14px;
    }

    .debug-actions button {
        padding: 5px 8px;
        font-size: 13px;
    }

    /* Tabs: single scrollable row, no wrapping, no label text overflow */
    .debug-tabs {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .debug-tabs::-webkit-scrollbar {
        display: none;
    }

    .debug-tab {
        flex-shrink: 0;
        flex: none;
        padding: 10px 12px;
        font-size: 12px;
        white-space: nowrap;
        min-width: 0;
        gap: 4px;
    }

    /* Content area: tighter padding, scrollable */
    .debug-content {
        padding: 12px;
    }

    /* Tables: horizontal scroll so columns don't crush */
    .debug-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .debug-table thead,
    .debug-table tbody,
    .debug-table tr {
        display: table;
        width: 100%;
        table-layout: auto;
    }

    .debug-table td,
    .debug-table th {
        padding: 6px 8px;
        font-size: 11px;
    }

    /* Truncate long routes/codes in table cells */
    .debug-table .debug-code,
    .debug-table .debug-truncate {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }

    /* Stat cards: 2-col grid instead of single column */
    .debug-stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .debug-stat-card {
        padding: 10px;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    /* .debug-stat-card:has(...) further down (unconditional, desktop icon-row layout) has
       higher specificity than the plain .debug-stat-card rule just above, so it would win
       here too and undo this breakpoint's column stacking. Doubling the class name matches
       that specificity so this mobile override wins regardless of source order. */
    .debug-stat-card.debug-stat-card:has(.debug-stat-icon) {
        flex-direction: column;
        align-items: flex-start;
    }

    .debug-stat-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .debug-stat-value {
        font-size: 16px;
    }

    .debug-stats-4col {
        grid-template-columns: 1fr 1fr;
    }

    /* Pagination: stack vertically */
    .debug-pagination {
        flex-direction: column;
        gap: 8px;
        padding: 8px;
    }

    .debug-pagination-controls {
        width: 100%;
        justify-content: space-between;
    }

    /* Error cards: full width, no horizontal overflow */
    .debug-error-card {
        overflow: hidden;
    }

    .debug-stacktrace pre {
        font-size: 10px;
        max-height: 120px;
        overflow-y: auto;
    }
}

/* ============================================
   PERFORMANCE TAB ENHANCEMENTS
   ============================================ */

/* 4-Column Stats Grid */
.debug-stats-4col {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Stat Card with Icon — scoped to cards that actually contain an icon (PerformanceTab).
   .debug-stat-card is also used bare by other tabs (e.g. NetworkTab) for a simple stacked
   label/value layout; without this :has() scope, this rule's properties (and the missing
   flex-direction override) leaked into those cards' shared base rule above and squeezed
   PerformanceTab's icon+content pairs into a cramped column instead of a row. */
.debug-stat-card:has(.debug-stat-icon) {
    padding: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
}

.debug-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.debug-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.debug-stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.debug-stat-sublabel {
    font-size: 10px;
    color: #9ca3af;
    font-weight: 500;
}

/* Stat Card States */
.debug-stat-warning {
    border-color: #fbbf24;
    background: #fffbeb;
}

.debug-stat-warning .debug-stat-icon {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.debug-stat-danger {
    border-color: #ef4444;
    background: #fef2f2;
}

.debug-stat-danger .debug-stat-icon {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.debug-stat-success {
    border-color: #10b981;
    background: #f0fdf4;
}

.debug-stat-success .debug-stat-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* Performance Alerts */
.debug-alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.debug-alert-warning {
    background: #fffbeb;
    border: 1px solid #fcd34d;
}

.debug-alert-danger {
    background: #fef2f2;
    border: 1px solid #fca5a5;
}

.debug-alert-info {
    background: #eff6ff;
    border: 1px solid #93c5fd;
}

.debug-alert-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #92400e;
    font-weight: 600;
    font-size: 13px;
}

.debug-alert-warning .debug-alert-header {
    color: #92400e;
}

.debug-alert-danger .debug-alert-header {
    color: #991b1b;
}

.debug-alert-info .debug-alert-header {
    color: #1e40af;
}

.debug-alert-list {
    margin: 8px 0 0 24px;
    padding: 0;
    list-style: disc;
}

.debug-alert-list li {
    margin: 4px 0;
    font-size: 12px;
    color: #374151;
}

/* Section Titles */
.debug-section-title {
    margin: 24px 0 12px 0;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e5e7eb;
}

.debug-section-title i {
    color: #667eea;
}

/* Code Display */
.debug-code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    color: #667eea;
    font-family: 'Courier New', monospace;
}

/* Table Hover Effects */
.debug-table-hover tbody tr {
    transition: all 0.2s ease;
}

.debug-table-hover tbody tr:hover {
    background: #f3f4f6;
    transform: translateX(2px);
}

/* Row States */
.debug-row-danger {
    background: #fef2f2 !important;
}

.debug-row-danger:hover {
    background: #fee2e2 !important;
}

/* Performance Tips Section */
.debug-tips {
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    padding: 16px;
    margin-top: 24px;
}

.debug-tips h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1e40af;
    display: flex;
    align-items: center;
    gap: 8px;
}

.debug-tips ul {
    margin: 0;
    padding-left: 20px;
}

.debug-tips li {
    margin: 8px 0;
    font-size: 12px;
    color: #374151;
    line-height: 1.6;
}

/* Explicit app dark theme. The existing prefers-color-scheme rules do not
   apply when the user selects dark mode in the app itself. */
:root.theme-dark .debug-overlay,
.theme-dark .debug-overlay {
    background: #0f172a;
    color: #e2e8f0;
    border-color: #334155;
}

:root.theme-dark .debug-overlay .debug-table thead tr,
.theme-dark .debug-overlay .debug-table thead tr {
    background: #111827;
    border-bottom-color: #475569;
}

:root.theme-dark .debug-overlay .debug-table th,
.theme-dark .debug-overlay .debug-table th {
    color: #94a3b8;
}

:root.theme-dark .debug-overlay .debug-table td,
.theme-dark .debug-overlay .debug-table td {
    color: #e2e8f0;
    border-bottom-color: #334155;
}

:root.theme-dark .debug-overlay .debug-table tbody tr:hover,
.theme-dark .debug-overlay .debug-table tbody tr:hover {
    background: #1e293b;
}

:root.theme-dark .debug-overlay .debug-row-warning,
.theme-dark .debug-overlay .debug-row-warning {
    background: #422006 !important;
}

:root.theme-dark .debug-overlay .debug-row-warning td,
.theme-dark .debug-overlay .debug-row-warning td,
:root.theme-dark .debug-overlay .debug-text-warning,
.theme-dark .debug-overlay .debug-text-warning {
    color: #fbbf24;
}

:root.theme-dark .debug-overlay .debug-row-danger,
.theme-dark .debug-overlay .debug-row-danger {
    background: #450a0a !important;
}

:root.theme-dark .debug-overlay .debug-code,
.theme-dark .debug-overlay .debug-code {
    background: #1e293b;
    color: #93c5fd;
}

:root.theme-dark .debug-overlay button,
.theme-dark .debug-overlay button {
    border-color: #475569;
    color: #cbd5e1;
}

:root.theme-dark .debug-overlay button:hover,
.theme-dark .debug-overlay button:hover {
    background: #334155;
    color: #f8fafc;
}

.debug-tips li strong {
    color: #1e40af;
    font-weight: 600;
}

/* Dark Mode - Performance Tab */
@media (prefers-color-scheme: dark) {
    .debug-stat-card {
        background: #0f172a;
        border-color: #334155;
    }

    .debug-stat-card:hover {
        background: #1e293b;
    }

    .debug-stat-label {
        color: #94a3b8;
    }

    .debug-stat-value {
        color: #f1f5f9;
    }

    .debug-stat-sublabel {
        color: #64748b;
    }

    .debug-stat-warning {
        background: #422006;
        border-color: #92400e;
    }

    .debug-stat-danger {
        background: #450a0a;
        border-color: #991b1b;
    }

    .debug-stat-success {
        background: #052e16;
        border-color: #065f46;
    }

    .debug-alert-warning {
        background: #422006;
        border-color: #92400e;
    }

    .debug-alert-danger {
        background: #450a0a;
        border-color: #991b1b;
    }

    .debug-alert-info {
        background: #172554;
        border-color: #1e40af;
    }

    .debug-alert-header {
        color: #fbbf24;
    }

    .debug-alert-danger .debug-alert-header {
        color: #fca5a5;
    }

    .debug-alert-info .debug-alert-header {
        color: #93c5fd;
    }

    .debug-alert-list li {
        color: #e2e8f0;
    }

    .debug-section-title {
        color: #f1f5f9;
        border-bottom-color: #334155;
    }

    .debug-code {
        background: #0f172a;
        color: #818cf8;
    }

    .debug-tips {
        background: #172554;
        border-color: #1e40af;
    }

    .debug-tips h4 {
        color: #93c5fd;
    }

    .debug-tips li {
        color: #e2e8f0;
    }

    .debug-tips li strong {
        color: #93c5fd;
    }
}

/* Responsive - Performance Tab */
@media (max-width: 768px) {
    .debug-stats-4col {
        grid-template-columns: 1fr;
    }

    .debug-stat-card {
        padding: 12px;
    }

    .debug-stat-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

/* ============================================
   PAGINATION CONTROLS
   ============================================ */

.debug-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.debug-pagination-info {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.debug-pagination-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.debug-pagination-current {
    font-size: 12px;
    color: #374151;
    font-weight: 600;
    padding: 0 8px;
}

.debug-pagination-controls .debug-btn-small {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
}

.debug-pagination-controls .debug-btn-small:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f3f4f6;
    color: #9ca3af;
}

.debug-pagination-controls .debug-btn-small:not(:disabled):hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

/* Dark Mode - Pagination */
@media (prefers-color-scheme: dark) {
    .debug-pagination {
        background: #0f172a;
        border-color: #334155;
    }

    .debug-pagination-info {
        color: #94a3b8;
    }

    .debug-pagination-current {
        color: #e2e8f0;
    }

    .debug-pagination-controls .debug-btn-small {
        background: #1e293b;
        border-color: #334155;
        color: #94a3b8;
    }

    .debug-pagination-controls .debug-btn-small:disabled {
        background: #0f172a;
        color: #64748b;
    }

    .debug-pagination-controls .debug-btn-small:not(:disabled):hover {
        background: #667eea;
        color: white;
        border-color: #667eea;
    }
}

/* Responsive - Pagination */
@media (max-width: 768px) {
    .debug-pagination {
        flex-direction: column;
        gap: 12px;
    }

    .debug-pagination-controls {
        width: 100%;
        justify-content: space-between;
    }
}

/* ============================================
   FORMS TAB STYLES
   ============================================ */

/* Tab Header */
.debug-tab-header {
    margin-bottom: 20px;
}

.debug-tab-header h5 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
}

.debug-tab-subtitle {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}

/* Section */
.debug-section {
    margin-bottom: 24px;
}

/* Forms List */
.debug-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Form Item */
.debug-item {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    transition: all 0.2s ease;
}

.debug-item:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.debug-item-success {
    border-left: 4px solid #10b981;
    background: #f0fdf4;
}

.debug-item-warning {
    border-left: 4px solid #f59e0b;
    background: #fffbeb;
}

/* Item Header */
.debug-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.debug-item-icon {
    font-size: 18px;
    display: flex;
    align-items: center;
}

.debug-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    flex: 1;
}

/* Item Meta */
.debug-item-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
}

.debug-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #6b7280;
}

.debug-meta-item i {
    font-size: 11px;
}

/* Info Box */
.debug-info-box {
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    padding: 16px;
    margin-top: 12px;
}

.debug-info-box p {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #374151;
}

.debug-info-box p:last-child {
    margin-bottom: 0;
}

.debug-info-box strong {
    color: #1e40af;
    font-weight: 600;
}

.debug-info-box ol {
    margin: 0;
    padding-left: 20px;
}

.debug-info-box li {
    margin: 8px 0;
    font-size: 12px;
    color: #374151;
    line-height: 1.6;
}

.debug-info-box code {
    background: #dbeafe;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    color: #1e40af;
    font-family: 'Courier New', monospace;
}

.debug-info-box .mt-2 {
    margin-top: 8px;
}

.debug-info-box small {
    font-size: 11px;
    color: #6b7280;
}

/* Dark Mode - Forms Tab */
@media (prefers-color-scheme: dark) {
    .debug-tab-header h5 {
        color: #f1f5f9;
    }

    .debug-tab-subtitle {
        color: #94a3b8;
    }

    .debug-item {
        background: #0f172a;
        border-color: #334155;
    }

    .debug-item-success {
        background: #064e3b;
        border-left-color: #10b981;
    }

    .debug-item-warning {
        background: #422006;
        border-left-color: #f59e0b;
    }

    .debug-item-title {
        color: #f1f5f9;
    }

    .debug-meta-item {
        color: #94a3b8;
    }

    .debug-info-box {
        background: #1e3a5f;
        border-color: #1e40af;
    }

    .debug-info-box p,
    .debug-info-box li {
        color: #e2e8f0;
    }

    .debug-info-box strong {
        color: #93c5fd;
    }

    .debug-info-box code {
        background: #0f172a;
        color: #93c5fd;
    }

    .debug-info-box small {
        color: #94a3b8;
    }
}

/* Responsive - Forms Tab */
@media (max-width: 480px) {
    .debug-tab-header h5 {
        font-size: 16px;
    }

    .debug-item {
        padding: 10px 12px;
    }

    .debug-item-header {
        flex-wrap: wrap;
    }

    .debug-item-title {
        font-size: 13px;
        width: 100%;
    }

    .debug-item-meta {
        flex-wrap: wrap;
        gap: 8px;
    }

    .debug-info-box {
        padding: 12px;
    }

    .debug-info-box li {
        font-size: 11px;
    }
}