/* The spreadsheet page's global rules. The SpreadJS Designer builds its DOM itself, outside the components' scoped
   CSS, so these stay global; index.html links this file right after app.css, where they stood before. */

/* ========================================
   SpreadJS Designer Global Overrides
   ======================================== */

/* Force Designer to fit within its container */
.spreadjs-designer-host {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: visible !important;
    position: relative;
}

/* Main designer wrapper - the first child div created by Designer */
.spreadjs-designer-host > div:first-child {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
}

.spreadjs-designer-host .gc-designer {
    flex: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
}

.spreadjs-designer-host .gc-designer-container {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* The main workbook area */
.spreadjs-designer-host .gc-designer-content {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Status bar should not grow */
.spreadjs-designer-host .gc-designer-status-bar {
    flex-shrink: 0 !important;
}

/* Ribbon should ALWAYS be visible and not shrink */
.spreadjs-designer-host .gc-designer-ribbon,
.spreadjs-designer-host .gc-ribbon,
.spreadjs-designer-host [class*="gc-ribbon"] {
    flex-shrink: 0 !important;
    overflow: visible !important;
    min-height: auto !important;
    display: block !important;
}