body { height: 100vh; }

:root {
    --bulma-scheme-main-bis: #f9fafb;
    /*--bulma-scheme-main: #f9fafb;*/
    /*--bulma-menu-item-h: #7E91A6;*/
    --bulma-link-rgb: 58, 63, 95;

    /* --bulma-radius-small: 0rem;
    --bulma-radius: 0rem;
    --bulma-radius-medium: 0em;
    --bulma-radius-large: 0rem; */

    --bulma-shadow: 0;

    --bulma-primary-h: 210deg;
    --bulma-primary-l: 40%;
    --bulma-link-h: 231deg;
    --bulma-link-s: 24%;
    --bulma-link-l: 22%;
    --bulma-info-h: 218deg;
    --bulma-info-s: 41%;
    --bulma-info-l: 74%;
    --bulma-success-h: 122deg;
    --bulma-success-s: 39%;
    --bulma-success-l: 49%;
    --bulma-danger-h: 0deg;
    --bulma-danger-l: 71%;

    --bulma-block-spacing: 0.75rem;
}

.card {
    --bulma-card-radius: 0;
    --bulma-card-header-shadow: 0;
}

.navbar {
    --bulma-navbar-dropdown-boxed-shadow: none;
}

.has-background-styled, .navbar.is-transparent {
    --bulma-body-background-color: var(--bulma-scheme-main-bis);
    background-color: #f9fafb!important;
}

/* Creative show page enhancements */
.creative-media-gallery .card-image {
    overflow: hidden;
}

.creative-media-gallery .image.is-square {
    height: 200px;
}

.creative-media-gallery video,
.creative-media-gallery img {
    transition: transform 0.3s ease;
}

.creative-media-gallery .card:hover video,
.creative-media-gallery .card:hover img {
    transform: scale(1.05);
}

/* Media preview styling */
.media-preview-container {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}


.menu {
    position: sticky;
    display: inline-block;
    vertical-align: top;
    max-height: 100vh;
    overflow-y: auto;
    width: 100%;
    top: 0;
    bottom: 0;
    padding: 30px;
}

.yield-content {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.about-landing-text {
    left:2.5%;
    top:11%;
    line-height: 1.3rem;
}

.footer, a.footer {
    --bulma-footer-background-color: HSL(25, 76%, 87%);
}

/* Sticky sidebar for forms */
.sidebar-content {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.sticky-actions {
    position: sticky;
    top: 20px;
    z-index: 10;
    background-color: white;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .sidebar-content {
        position: static;
        max-height: none;
    }
    
    .sticky-actions {
        position: fixed;
        bottom: 20px;
        left: 20px;
        right: 20px;
        top: auto;
        z-index: 1000;
        border-radius: 8px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    }
}

/* File Upload Drag & Drop Styles */
.file-upload-drop-zone {
    border: 2px dashed #dbdbdb;
    border-radius: 4px;
    padding: 20px;
    transition: all 0.3s ease;
    text-align: center;
    background-color: #fafafa;
}

.file-upload-drop-zone:hover {
    border-color: #3273dc;
    background-color: #f0f7ff;
}

.file-upload-drop-zone.drag-over {
    border-color: #3273dc;
    background-color: #e6f3ff;
    border-style: solid;
}

.file-upload-drop-zone .file-cta {
    background-color: transparent;
    border: none;
    color: #4a4a4a;
}

.file-upload-drop-zone .file-name {
    border: none;
    background-color: transparent;
    color: #7a7a7a;
    font-style: italic;
}

/* Prevent horizontal overflow for creative details */
.creative-details {
    max-width: 100%;
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.creative-details .box {
    max-width: 100%;
    overflow-x: auto;
}

.creative-details .columns {
    max-width: 100%;
}

.creative-details .column {
    min-width: 0; /* Allow columns to shrink below their content width */
}

/* Handle long URLs and text content */
.creative-details a {
    word-break: break-all;
    overflow-wrap: break-word;
}

.creative-details .content {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Ensure tables and pre elements don't cause overflow */
.creative-details table {
    table-layout: fixed;
    width: 100%;
}

.creative-details pre {
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Handle media files grid properly */
.creative-details .columns.is-multiline {
    margin-left: -0.375rem !important;
    margin-right: -0.375rem !important;
}

.creative-details .columns.is-multiline .column {
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important;
    flex: none;
}

/* Ensure images don't overflow */
.creative-details img {
    max-width: 100%;
    height: auto;
}

.creative-details .card {
    max-width: 100%;
    overflow: hidden;
}

/* Handle very long text fields */
.creative-details .field .box {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* Creative content overflow handling */
.creative-content {
    max-width: 100%;
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.creative-content a {
    word-break: break-all;
    overflow-wrap: break-word;
}

.creative-content .content {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.creative-content table {
    table-layout: fixed;
    width: 100%;
}

.creative-content pre {
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.creative-content img {
    max-width: 100%;
    height: auto;
}

.creative-content .card {
    max-width: 100%;
    overflow: hidden;
}

.creative-content .field .box {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* Table container horizontal scroll */
.table-container {
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
    max-width: 100%;
    position: relative;
}

/* Ensure tables maintain minimum width and structure without expanding parent */
.table-container .table {
    /* white-space: nowrap;
    width: max-content; */
    min-width: 100%;
}

/* Force table container to respect parent width constraints */
.box .table-container {
    max-width: 100%;
    width: 100%;
}

/* Responsive adjustments for table scrolling */
@media screen and (max-width: 1024px) {
    .table-container .table {
        min-width: 800px; /* Minimum width to trigger horizontal scroll */
    }
}

@media screen and (max-width: 768px) {
    .table-container .table {
        min-width: 600px; /* Smaller minimum width for mobile */
    }
}