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 */
    }
}

/* Tom Select Custom Styles */
.tom-select-wrapper {
  width: 100%;
  position: relative;
}

/* Base wrapper z-index */
.ts-wrapper {
  position: relative;
  z-index: 2;
}

/* When dropdown is open, increase z-index significantly to appear above all other elements */
.ts-wrapper.dropdown-active {
  z-index: 9999 !important;
}

.ts-wrapper .ts-control {
  border: 1px solid #dbdbdb;
  border-radius: 0;
  padding: 0.375em 0.75em;
  font-size: 1rem;
  min-height: 2.5em;
  position: relative;
}

.ts-wrapper .ts-control:focus,
.ts-wrapper.focus .ts-control {
  border-color: #485fc7;
  box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
  outline: none;
}

.ts-wrapper .ts-dropdown {
  border: 1px solid #dbdbdb;
  border-radius: 0;
  margin-top: 2px;
  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1);
  z-index: 10000 !important;
  position: absolute;
  background-color: white;
}

.ts-dropdown-content {
  background-color: white;
}

.ts-wrapper .ts-dropdown .option {
  padding: 0.5em 0.75em;
  cursor: pointer;
}

.ts-wrapper .ts-dropdown .option.active {
  background-color: #485fc7;
  color: #ffffff;
}

.ts-wrapper .ts-dropdown .option:hover {
  background-color: #f5f5f5;
}

.ts-wrapper .ts-dropdown .option.active:hover {
  background-color: #3e56c4;
  color: #ffffff;
}

.ts-wrapper .ts-dropdown .no-results {
  padding: 0.75em;
  text-align: center;
  color: #7a7a7a;
}

.ts-wrapper .ts-control .item {
  background-color: #f5f5f5;
  border: 1px solid #dbdbdb;
  border-radius: 0;
  padding: 0.25em 0.5em;
  margin-right: 0.25em;
}

/* Clear button styling */
.ts-wrapper .ts-control .clear-button {
  cursor: pointer;
  opacity: 0.5;
  margin-left: 0.5em;
}

.ts-wrapper .ts-control .clear-button:hover {
  opacity: 1;
}

/* Fix for icon positioning when used with Bulma's control has-icons-left */
.control.has-icons-left .ts-wrapper .ts-control {
  padding-left: 2.5em;
}

/* Loading spinner */
.ts-wrapper .ts-control.loading::after {
  content: '';
  position: absolute;
  right: 1em;
  top: 50%;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  border: 2px solid #dbdbdb;
  border-top-color: #485fc7;
  border-radius: 50%;
  animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}