/* bootstrap classes extension */

.fs-7 {
    font-size:0.85em;
}

.fs-xxl {
    font-size: 1.5rem !important;
}

/* utilities */

.g-text-underline {
    text-decoration: underline;
}
  
.g-text-underline--none {
    text-decoration: none;
}

.g-text-underline--none--hover:focus, .g-text-underline--none--hover:hover {
    text-decoration: none;
}

.g-text-underline--hover:focus, .g-text-underline--hover:hover {
    text-decoration: underline;
}

.g-cursor-pointer {
    cursor: pointer;
}

/* colors */
.g-color-gray-100 {
    color: var(--si-gray-100) !important;
}
.g-color-gray-200 {
    color: var(--si-gray-200) !important;
}
.g-color-gray-300 {
    color: var(--si-gray-300) !important;
}
.g-color-gray-400 {
    color: var(--si-gray-400) !important;
}
.g-color-gray-500 {
    color: var(--si-gray-500) !important;
}
.g-color-gray-600 {
    color: var(--si-gray-600) !important;
}
.g-color-gray-700 {
    color: var(--si-gray-700) !important;
}
.g-color-gray-800 {
    color: var(--si-gray-800) !important;
}
.g-color-gray-900 {
    color: var(--si-gray-900) !important;
}

/* background colors*/

.g-bg-gray-100 {
    background-color: var(--si-gray-100) !important;
}


/* hover colors */

.g-color-gray-700--hover:hover {
    color: var(--si-gray-700) !important;
}

.g-color-primary--hover:hover {
    color: var(--si-primary) !important;
}


/* background hover colors */

.g-bg-gray-100--hover:hover {
    background-color: var(--si-gray-100) !important;
}

.g-bg-gray-500--hover:hover {
    background-color: var(--si-gray-500) !important;
}

/* align icon with text */
.g-icon-with-txt {
    display: inline-flex;
    align-items: center;
}

/* htmx progress */
.htmx-indicator{
    visibility: hidden;
}
.htmx-request .htmx-indicator{
    visibility: visible;
}
.htmx-request.htmx-indicator{
    visibility: visible;
}

/* directory text */
.ntv-directory-text h1, .ntv-directory-text h2, .ntv-directory-text h3, .ntv-directory-text h4 {
    font-size:1.2rem;
}

.ntv-directory-text hr {
    margin-bottom:1rem;
}

.ntv-video-container video, .ntv-video-container div {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

.ntv-video-container-short video, .ntv-video-container-short div {
    width: 60%;
    height: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.ntv-audio-container audio {
    width: 100%;
    max-width: 100%;
    display: block;
}

/* dropzone */
.drop-zone {
  border: 2px dashed transparent;
  transition: all 0.3s ease;
}

.drop-zone.drag-over {
  border-color: #198754;
  background-color: rgba(25, 135, 84, 0.1);
}

/* ========================================
   VIDEO SCENE GRID LAYOUT STYLES
   ======================================== */

/* Scene card styles */
.vid-scene-card {
    border-color: rgba(0, 0, 0, 0.175);
}

.vid-scene-header {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.vid-scene-header > .d-flex:first-child {
    padding: 0.5rem 0.75rem 0.25rem 0.75rem;
}

.vid-scene-body {
    padding: 0.75rem;
}

/* Icon-based tabs */
.vid-scene-tabs {
    margin: 0 !important;
    padding: 0.25rem 0.75rem 0.5rem 0.75rem;
}

.vid-scene-tabs.card-header-tabs {
    margin-bottom: 0 !important;
}

.vid-scene-tabs .nav-link {
    padding: 0.375rem 0.5rem;
    font-size: 1.25rem;
    line-height: 1;
    min-width: 36px;
    text-align: center;
}

.vid-scene-tabs .nav-link i {
    display: block;
}

/* Responsive adjustments */
@media (max-width: 1199.98px) {
    .vid-scene-card {
        font-size: 0.9rem;
    }

    .vid-scene-body .btn-sm {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
}

@media (max-width: 767.98px) {
    .vid-scene-card {
        font-size: 1rem;
    }
}

/* Video and audio containers */
.vid-scene-body .ntv-video-container,
.vid-scene-body .ntv-audio-container {
    max-width: 100%;
}

/* Compact form controls */
.vid-scene-body textarea.form-control-lg {
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
}

/* Button toolbar wrapping */
.vid-scene-body .d-flex.justify-content-left {
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* Dropzone scaling */
.vid-scene-body .drop-zone {
    max-width: 100%;
}

.vid-scene-body .drop-zone img {
    width: 100%;
    height: auto;
    display: block;
}

/* Badge adjustments */
.vid-scene-header .badge {
    font-size: 0.78rem;
    padding: 0.25em 0.5em;
}

/* Spinner container fixed height */
.vid-scene-header [id^="hxid-video-spin-task-"] {
    min-height: 1.5rem;
    display: flex;
    align-items: center;
}

.vid-scene-header .spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

/* Spinner adjustments */
.vid-scene-body .spinner-grow,
.vid-scene-body .spinner-border {
    width: 3rem !important;
    height: 3rem !important;
}

/* Equal card heights */
.vid-scene-card.h-100 {
    display: flex;
    flex-direction: column;
}

.vid-scene-card.h-100 .card-body {
    flex: 1 1 auto;
}