/* Vista Flyer Page - Tall Editor Layout */
/* ZERO WHITESPACE - Flush against header */

/* Override page-content padding for Vista pages */
#page-content:has(.vista-page-container) {
    padding: 0 !important;
    margin: 0 !important;
}

.vista-page-container {
    margin-top: -16px !important;
    padding: 0 !important;
}

/* Container for tabs and content - NO spacing */
.page-container {
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
  overflow-y: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Tabs wrapper - FLUSH to top with negative margin */
.tabs-wrapper {
    position: relative !important;
    z-index: 100 !important;
    background: transparent !important;
    flex-shrink: 0 !important;
    padding: 0 8px 0 8px !important;
    margin: 0 !important;
    margin-top: -8px !important;
}

/* ============================================
   COMPACT TAB STYLING - CreateFlyer.razor Style
   ============================================ */

/* Remove all default Syncfusion spacing */
.tabs-wrapper .e-tab,
.tabs-wrapper .campaign-tab,
.tabs-wrapper .default-tab {
    margin: 0 !important;
    padding: 0 !important;
}

/* Tab Header - Dark attractive style */
.tabs-wrapper .e-tab-header,
.tabs-wrapper .campaign-tab .e-tab-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    border: 2px solid #334155 !important;
padding: 4px 8px !important;
    border-radius: 10px !important;
    margin-bottom: 0 !important;
    min-height: 38px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    display: inline-flex !important;
    width: auto !important;
}

.tabs-wrapper .e-tab-header .e-toolbar-items,
.tabs-wrapper .campaign-tab .e-tab-header .e-toolbar-items {
    background: transparent !important;
    min-height: 28px !important;
    display: flex !important;
    align-items: center !important;
  gap: 4px !important;
}

.tabs-wrapper .e-tab-header .e-toolbar-item,
.tabs-wrapper .campaign-tab .e-tab-header .e-toolbar-item {
    margin: 0 !important;
    padding: 0 !important;
    min-width: auto !important;
}

/* Individual Tab Buttons - Compact style */
.tabs-wrapper .e-tab-header .e-toolbar-item .e-tab-wrap,
.tabs-wrapper .campaign-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
    border-radius: 6px !important;
padding: 5px 12px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    transition: all 0.25s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    min-height: 28px !important;
    display: flex !important;
 align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

/* Tab Text */
.tabs-wrapper .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-text,
.tabs-wrapper .campaign-tab .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-text {
    color: #e2e8f0 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

/* Hover State */
.tabs-wrapper .e-tab-header .e-toolbar-item .e-tab-wrap:hover,
.tabs-wrapper .campaign-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
    background: rgba(59, 130, 246, 0.25) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

.tabs-wrapper .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text,
.tabs-wrapper .campaign-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text {
    color: #ffffff !important;
}

/* Active Tab - Blue with glow */
.tabs-wrapper .e-tab-header .e-toolbar-item.e-active .e-tab-wrap,
.tabs-wrapper .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover,
.tabs-wrapper .campaign-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap,
.tabs-wrapper .campaign-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover {
    background: #3B82F6 !important;
    border-color: #3B82F6 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(0) !important;
}

.tabs-wrapper .e-tab-header .e-toolbar-item.e-active .e-tab-wrap .e-tab-text,
.tabs-wrapper .campaign-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap .e-tab-text {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Hide indicator */
.tabs-wrapper .e-tab-header .e-indicator,
.tabs-wrapper .campaign-tab .e-tab-header .e-indicator {
    display: none !important;
}

/* Tab Content - NO extra spacing */
.tabs-wrapper .e-content,
.tabs-wrapper .campaign-tab .e-content {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

.tabs-wrapper .e-content .e-item,
.tabs-wrapper .campaign-tab .e-content .e-item {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Content area - fills remaining viewport */
.tab-content-wrapper {
    flex: 0 0 auto !important;
    position: relative !important;
    min-height: calc(100vh - 140px) !important;
  height: calc(100vh - 140px) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Vista content area - NO extra space */
.vista-content-area {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: calc(100vh - 140px) !important;
    height: auto !important;
  overflow-y: visible !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Vista editor container - full height */
.vista-flyer-designer {
  position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: calc(100vh - 140px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ============================================
   TRUE FULLSCREEN MODE - Complete Viewport Takeover
   ============================================ */
.vista-flyer-designer.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
 max-height: 100vh !important;
    min-height: 100vh !important;
    min-width: 100vw !important;
    z-index: 2147483647 !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
 margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.vista-flyer-designer.fullscreen .editor-container {
    position: absolute !important;
 top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
  height: 100vh !important;
    min-height: 100vh !important;
max-height: 100vh !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.vista-flyer-designer.fullscreen #vista-editor-container,
.vista-flyer-designer.fullscreen [id^="vista-editor-"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
 width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
  margin: 0 !important;
    padding: 0 !important;
}

.vista-flyer-designer.fullscreen #vista-editor-container iframe,
.vista-flyer-designer.fullscreen [id^="vista-editor-"] iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fullscreen Exit Button */
.fullscreen-exit-btn {
    position: fixed !important;
top: 16px !important;
    right: 16px !important;
    z-index: 2147483647 !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: white !important;
    border: none !important;
    padding: 14px 28px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
 gap: 10px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(239, 68, 68, 0.3) !important;
    transition: all 0.2s ease !important;
    font-family: 'Poppins', sans-serif !important;
}

.fullscreen-exit-btn:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(239, 68, 68, 0.4) !important;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
}

.fullscreen-exit-btn:active {
    transform: scale(0.98) !important;
}

/* ============================================
   BODY FULLSCREEN STATE
   ============================================ */
body.vista-fullscreen-active {
    overflow: hidden !important;
  position: fixed !important;
    width: 100vw !important;
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
}

body.vista-fullscreen-active #app-root,
body.vista-fullscreen-active #desktop-sidebar,
body.vista-fullscreen-active #mobile-sidebar,
body.vista-fullscreen-active #mobile-overlay,
body.vista-fullscreen-active #main-wrapper,
body.vista-fullscreen-active #main-header,
body.vista_fullscreen-active .tabs-wrapper {
  display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.vista-fullscreen-active .vista-flyer-designer.fullscreen,
body.vista-fullscreen-active .fullscreen-exit-btn {
 display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.editor-container {
    flex: 1 !important;
    width: 100% !important;
    position: relative !important;
    min-height: calc(100vh - 140px) !important;
    z-index: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vista-editor-wrapper {
    width: 100% !important;
 height: 100% !important;
  min-height: calc(100vh - 140px) !important;
    background-color: #ffffff !important;
    position: relative !important;
}

.vista-editor-wrapper iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: calc(100vh - 140px) !important;
    border: none !important;
    display: block !important;
}

/* Editor container div that holds the Vista iframe */
#vista-editor-container,
[id^="vista-editor-"] {
 width: 100% !important;
    height: calc(100vh - 140px) !important;
    min-height: calc(100vh - 140px) !important;
  margin: 0 !important;
    padding: 0 !important;
}

#vista-editor-container iframe,
[id^="vista-editor-"] iframe {
    width: 100% !important;
    height: calc(100vh - 140px) !important;
    min-height: calc(100vh - 140px) !important;
    border: none !important;
    display: block !important;
}

.loading-container {
    min-height: calc(100vh - 140px) !important;
}

.editor-error {
    min-height: calc(100vh - 140px) !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .vista-page-container {
        margin-top: -12px !important;
    }
    
    .tabs-wrapper {
        padding: 0 4px 0 4px !important;
    margin-top: -6px !important;
    }
    
    .tabs-wrapper .e-tab-header,
    .tabs-wrapper .campaign-tab .e-tab-header {
        padding: 3px 6px !important;
        margin-bottom: 0 !important;
    }
    
    .tabs-wrapper .e-tab-header .e-toolbar-item .e-tab-wrap,
    .tabs-wrapper .campaign-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
        padding: 4px 10px !important;
     font-size: 11px !important;
    }

    .tab-content-wrapper,
    .vista-content-area,
    .vista-flyer-designer,
    .editor-container,
    .vista-editor-wrapper,
    .vista-editor-wrapper iframe,
    #vista-editor-container,
    [id^="vista-editor-"],
    #vista-editor-container iframe,
    [id^="vista-editor-"] iframe,
    .loading-container,
    .editor-error {
        min-height: calc(100vh - 120px) !important;
    }
    
    .fullscreen-exit-btn {
        top: 10px !important;
      right: 10px !important;
        padding: 10px 16px !important;
 font-size: 14px !important;
    }
}

/* Larger screens */
@media (min-width: 1400px) {
    .vista-page-container {
    margin-top: -20px !important;
    }
    
  .tab-content-wrapper,
.vista-content-area,
    .vista-flyer-designer,
    .editor-container,
    .vista-editor-wrapper,
    .vista-editor-wrapper iframe,
    #vista-editor-container,
[id^="vista-editor-"],
    #vista-editor-container iframe,
    [id^="vista-editor-"] iframe,
.loading-container,
    .editor-error {
        min-height: calc(100vh - 150px) !important;
    }
}