/* ================================================================
   DASHBOARD PANEL LAYOUT - Professional Two-Panel Design
   For your existing DashboardBuilder.razor
   ================================================================ */

/* Main container */
.dashboard-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--rz-body-background-color, #f8f9fa);
/*    font-family: 'Roboto', 'Noto Sans', system-ui, sans-serif;
*/}

/* Header — 48px compact toolbar */
.dashboard-header {
    background: var(--rz-body-background-color, white);
    padding: 0 16px;
    border-bottom: 1px solid var(--rz-base-300, #dee2e6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px;
    flex-shrink: 0;
    z-index: 100;
}

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

.dashboard-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--rz-text-color, #1c1e21);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Unified metadata pills */
.header-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.pill-status-draft     { background: var(--op-pill-draft-bg, #fff8e1); color: var(--op-pill-draft-text, #f57f17); border-color: var(--op-pill-draft-border, #ffe082); }
.pill-status-published { background: var(--op-pill-published-bg, #e8f5e9); color: var(--op-pill-published-text, #2e7d32); border-color: var(--op-pill-published-border, #a5d6a7); }
.pill-status-archived  { background: var(--op-pill-archived-bg, #f5f5f5); color: var(--op-pill-archived-text, #616161); border-color: var(--op-pill-archived-border, #e0e0e0); }
.pill-info             { background: var(--op-pill-info-bg, #e3f2fd); color: var(--op-pill-info-text, #1565c0); border-color: var(--op-pill-info-border, #90caf9); }
.pill-type-personal    { background: var(--op-pill-info-bg, #e3f2fd); color: var(--op-pill-info-text, #1565c0); border-color: var(--op-pill-info-border, #90caf9); cursor: pointer; }
.pill-type-global      { background: var(--op-pill-global-bg, #f3e5f5); color: var(--op-pill-global-text, #6a1b9a); border-color: var(--op-pill-global-border, #ce93d8); cursor: pointer; }
.pill-forked           { background: var(--op-pill-forked-bg, #fff3e0); color: var(--op-pill-forked-text, #e65100); border-color: var(--op-pill-forked-border, #ffcc80); }
.pill-fomo             { background: var(--op-pill-forked-bg, #fff3e0); color: var(--op-pill-forked-text, #e65100); border-color: var(--op-pill-forked-border, #ffcc80); }

/* Real-time connection status */
.pill-rt               { gap: 4px; font-weight: 600; letter-spacing: 0.03em; }
.pill-rt-connected     { background: #ecfdf5; color: #059669; border-color: #6ee7b7; }
.pill-rt-disconnected  { background: #fef2f2; color: #dc2626; border-color: #fca5a5; }
.pill-rt-connected i   { animation: rtPulse 2s ease-in-out infinite; }
@keyframes rtPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

button.header-pill:hover { filter: brightness(0.95); }

/* Dashboard selector dropdown (RadzenDropDown) */
.dashboard-selector {
    font-size: 16px;
    font-weight: 600;
    color: var(--rz-text-color, #323130);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    max-width: 350px;
}
.dashboard-selector .rz-helper-text { display: none; }
.dashboard-selector .rz-dropdown-label { padding-right: 24px; }
.dashboard-selector:hover { border-bottom-color: var(--rz-base-400, #bdbdbd); }
.dashboard-selector:focus-within { border-bottom-color: var(--rz-primary, #0078d4); outline: none; }

/* Dashboard dropdown popup — ensure item text is visible in dark mode.
   The popup is a detached DOM element so it doesn't inherit from .dashboard-selector. */
.rz-dropdown-panel .rz-dropdown-item {
    color: var(--rz-text-color, #323130);
}

/* Inline rename input */
.dashboard-rename-input {
    font-size: 16px;
    font-weight: 600;
    max-width: 300px;
    background: var(--rz-base-background-color, white);
    color: var(--rz-text-color, #323130);
    border: 1px solid var(--rz-base-300, #dee2e6);
    border-radius: 4px;
    padding: 4px 8px;
}

/* Small icon-only button (rename pencil) */
.header-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--rz-text-secondary-color, #605e5c);
    transition: background 0.15s, color 0.15s;
}

.header-btn-icon:hover {
    background: var(--rz-base-200, #f0f0f0);
    color: var(--rz-text-color, #323130);
}

/* Browse dashboards gallery button — round hover */
.btn-browse-dashboards {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    padding: 0;
}

.btn-browse-dashboards:hover {
    background: var(--rz-base-200, #f0f0f0);
    color: var(--rz-primary, #0078d4);
}

/* Reset to Global button */
.btn-reset {
    color: var(--op-warning-600, #e65100);
    border-color: var(--op-warning-300, #ffcc80);
}
.btn-reset:hover {
    background: var(--op-warning-50, #fff3e0);
}

/* Right: controls */
.dashboard-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.header-separator {
    width: 1px;
    height: 24px;
    background: var(--rz-base-300, #dee2e6);
}

/* Action buttons */
.header-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border: 1px solid var(--rz-base-300, #dee2e6);
    border-radius: 4px;
    background: var(--rz-base-background-color, white);
    font-size: 13px;
    font-weight: 500;
    color: var(--rz-text-color, #323130);
    cursor: pointer;
    transition: all 0.15s;
    height: 32px;
}

.header-btn:hover:not(:disabled) {
    background: var(--rz-base-200, #f5f5f5);
    border-color: var(--rz-base-400, #adb5bd);
}

.header-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.header-btn i { font-size: 16px; }

.btn-publish {
    background: var(--rz-primary, #0078d4);
    color: white;
    border-color: var(--rz-primary, #0078d4);
}

.btn-publish:hover:not(:disabled) {
    background: var(--rz-primary-darker, #006abc);
    border-color: var(--rz-primary-darker, #006abc);
}

.btn-add-widget {
    background: var(--rz-primary, #0078d4);
    color: white;
    border-color: var(--rz-primary, #0078d4);
}

.btn-add-widget:hover {
    background: var(--rz-primary-darker, #006abc);
    border-color: var(--rz-primary-darker, #006abc);
}

/* Mode toggle — segmented control */
.mode-toggle {
    display: flex;
    background: var(--rz-base-200, #f0f0f0);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

.mode-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 14px;
    border: none;
    border-radius: 4px;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: var(--rz-text-secondary-color, #605e5c);
    cursor: pointer;
    transition: all 0.15s;
    height: 28px;
}

.mode-toggle-btn:hover:not(.active) {
    color: var(--rz-text-color, #323130);
}

.mode-toggle-btn.active {
    background: var(--rz-base-background-color, white);
    color: var(--rz-primary, #0078d4);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    font-weight: 600;
}

.mode-toggle-btn i { font-size: 16px; }

.mode-toggle-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Main content area - Vertical stack: gallery dropdown + grid */
.dashboard-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    min-height: 0; /* critical for nested flex to shrink properly */
}

/* Left Configuration Panel */
.configuration-panel {
    width: 360px;
    background: var(--rz-base-background-color, white);
    border-right: 1px solid var(--rz-base-300, #dee2e6);
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 8px rgba(0,0,0,0.02);
    overflow-y: auto;
    transition: transform 0.3s ease;
}






.grid-info {
    font-size: 13px;
    color: var(--rz-text-secondary-color, #6c757d);
    font-weight: 500;
}

.grid-status {
    font-size: 12px;
    color: var(--op-success-600);
    background: rgba(40, 167, 69, 0.1);
    padding: 3px 8px;
    border-radius: 4px;
}

/* Dashboard grid — fills available space in grid-panel */
.dashboard-grid {
    position: relative;
    background: var(--rz-body-background-color, white);
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    flex: 1;
    min-height: 100%;
}

/* Empty state */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--rz-text-secondary-color, #6c757d);
}

.empty-icon {
    font-size: 64px;
    color: var(--rz-base-300, #dee2e6);
    margin-bottom: 20px;
}




/* Widget Controls (inside grid items) */
.widget-controls {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 4px;
    padding: 8px;
    background: var(--rz-base-background-color, rgba(255,255,255,0.95));
    border-radius: 0 8px 0 8px;
    opacity: 0;
    transition: opacity 0.2s;
}

.grid-stack-item:hover .widget-controls {
    opacity: 1;
}

.widget-control-btn {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid var(--rz-base-300, #dee2e6);
    background: var(--rz-base-background-color, white);
    color: var(--rz-text-secondary-color, #6c757d);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 12px;
}

.widget-control-btn:hover {
    border-color: var(--rz-primary, #007bff);
    color: var(--rz-primary, #007bff);
    background: rgba(0, 123, 255, 0.08);
}

.widget-control-btn.danger:hover {
    border-color: var(--op-error-500);
    color: var(--op-error-500);
    background: var(--op-error-50);
}

/* (old .mode-badge removed — replaced by .header-pill) */

/* Responsive adjustments */
@media (max-width: 1024px) {
    .configuration-panel {
        width: 300px;
    }
}

@media (max-width: 768px) {
    .configuration-panel {
        position: absolute;
        height: 100%;
        z-index: 50;
        width: 100%;
        max-width: 380px;
    }
    
    .configuration-panel.collapsed {
        transform: translateX(-100%);
    }
    
    .dashboard-header {
        padding: 10px 16px;
    }
    
    .dashboard-controls {
        flex-wrap: wrap;
    }
}

/* Radzen Button Customization for Dashboard */
.dashboard-controls .rz-button {
    height: 36px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.dashboard-controls .rz-button-icon-left {
    margin-right: 6px !important;
    font-size: 16px !important;
}

/* Mode buttons */
.dashboard-controls .rz-button-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3) !important;
}

.dashboard-controls .rz-button-primary:hover {
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4) !important;
    transform: translateY(-1px);
}

/* Success button (Save) */
.dashboard-controls .rz-button-success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
    border: none !important;
}

/* Light buttons (inactive mode) */
.dashboard-controls .rz-button-light {
    background: var(--rz-base-background-color, white) !important;
    color: var(--rz-text-secondary-color, #6c757d) !important;
    border: 1px solid var(--rz-base-300, #dee2e6) !important;
}

.dashboard-controls .rz-button-light:hover {
    background: rgba(0, 123, 255, 0.08) !important;
    border-color: var(--rz-primary, #007bff) !important;
    color: var(--rz-primary, #007bff) !important;
}




/* (merged into primary .dashboard-content rule above) */

.widget-count {
    background: rgba(0, 120, 212, 0.12);
    color: var(--rz-primary, #0078d4);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: var(--op-text-xs);
    font-weight: 600;
    white-space: nowrap;
}

/* Right Grid Panel */
.grid-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--rz-body-background-color, #f0f2f5);
    overflow: auto;
    padding: 0;
    min-height: 0; /* Allow flex child to shrink below content size */
    position: relative; /* Anchor for FOMO overlay */
}

.grid-header {
    background: var(--rz-body-background-color, white);
    padding: 12px 20px;
    border-bottom: 1px solid var(--rz-base-300, #e3e4e6);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.grid-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.grid-mode {
    font-weight: 600;
    color: var(--rz-text-color, #1c1e21);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* (merged into primary .dashboard-grid rule above) */

/* (merged into primary .empty-state rule above) */

.empty-icon {
    margin-bottom: 20px;
    opacity: 0.3;
}

.empty-state h3 {
    margin: 0 0 8px 0;
    color: var(--rz-text-color, #1c1e21);
    font-weight: 600;
}

.empty-state p {
    margin: 0;
    color: var(--rz-text-secondary-color, #65676b);
}

/* (old .mode-badge variants removed — replaced by .mode-toggle) */

/* ================================================================
   FOMO OVERLAY — Frosted glass upgrade gate for restricted dashboards
   Renders on top of the grid when a user views a dashboard
   they don't have tier access for. Fades in after ~3s delay.
   ================================================================ */

.fomo-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--op-fomo-backdrop, rgba(255, 255, 255, 0.55));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease-in;
}

.fomo-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.fomo-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 48px;
    background: var(--rz-base-background-color, white);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    text-align: center;
    max-width: 420px;
}

.fomo-message i {
    color: var(--rz-warning, #ff9800);
}

.fomo-message h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--rz-text-color, #323130);
}

.fomo-message p {
    margin: 0;
    font-size: 14px;
    color: var(--rz-text-secondary-color, #605e5c);
    line-height: 1.5;
}

.fomo-cta-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 12px 32px;
    border: none;
    border-radius: 6px;
    background: var(--rz-primary, #0078d4);
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}

.fomo-cta-btn:hover {
    background: var(--rz-primary-dark, #005a9e);
    color: white;
}

.fomo-dismiss-link {
    background: none;
    border: none;
    font-size: 13px;
    color: var(--rz-text-secondary-color, #605e5c);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.fomo-dismiss-link:hover {
    color: var(--rz-text-color, #323130);
}

/* ================================================================
   FORK BANNER — Info bar shown when non-admin customizes a global
   dashboard before fork-on-save creates their personal copy.
   ================================================================ */

.fork-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--rz-info-lighter, #e8f4fd);
    border-bottom: 1px solid var(--rz-info-light, #b3d9f2);
    font-size: 13px;
    color: var(--rz-info, #0078d4);
}