/*
 * Daluna Functionality - Master Stylesheet
 * -----------------------------------------
 * This file is loaded after all other plugin component stylesheets.
 * Use it for high-priority global styles, overrides, and utility classes
 * that need to be available across the entire frontend.
 */

/* ========================================
   EXTERNAL LAYOUT INTEGRATION (Example Context)
   ======================================== */
#dashboard-layout-container {
    display: flex;
    width: 100%;
}

#dashboard-content-area {
    display: flex;
    flex-grow: 1;
    min-width: 0;
}

.content-pane {
    width: 100%;
    box-sizing: border-box;
    overflow-x: visible;
}

/* ==========================================================================
   Global Field Highlight Utility
   ========================================================================== */

/* This single rule now governs the focus highlight style for all inputs,
   selects, and Select2 elements that have the .daluna-field-highlight class. */

.daluna-field-highlight {
    transition: border-color 0.15s ease-in-out,
                box-shadow 0.15s ease-in-out,
                outline-color 0.15s ease-in-out; /* Use outline-color for transition */
    outline: 1px solid transparent;
    outline-offset: 0px;
}

input.daluna-field-highlight:focus,
textarea.daluna-field-highlight:focus,
code.daluna-field-highlight:focus,
/* Apply highlight to the Select2 container when it's open */
.select2-container--default.select2-container--open .select2-selection--single.daluna-field-highlight {
    border-color: #AD6DF0 !important; /* Use !important to ensure this global utility wins */
    outline-color: #AD6DF0 !important;
    box-shadow: 0px 0px 6px rgba(130, 36, 227, 0.22) !important;
}

/* ==========================================================================
   Global Floating Label Utility
   ========================================================================== */

/* Floating Label Group Wrapper */
.daluna-floating-label-group {
    position: relative;
    margin-bottom: 20px;
}

/* --- NEW: Moved from custom-common-form-styles.css --- */
/* Input fields base appearance within a floating label group */
.daluna-floating-label-group input[type="text"],
.daluna-floating-label-group input[type="email"],
.daluna-floating-label-group input[type="password"],
.daluna-floating-label-group .password-field-container input[type="password"],
.daluna-floating-label-group .password-field-container input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    height: 48px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.5;
    background-color: #fff; /* Input Background */
    color: #333;
    transition: box-shadow 0.15s ease-in-out,
                border-color 0.15s ease-in-out,
                outline 0.15s ease-in-out,
                background-color 0.15s ease-in-out;
    outline: 1px solid transparent;
    outline-offset: 0px;
    position: relative;
    z-index: 0;
}
/* --- End of moved styles --- */

/* Floating Label Itself */
.daluna-floating-label-group label {
    position: absolute;
    left: 13px;
    top: 13px;
    font-family: var(--wp--preset--font-family--nunito);
    font-size: 16px;
    font-weight: 400;
    color: #757575;
    pointer-events: none;
    transform: translate(0, 0) scale(1);
    transform-origin: left top;
    transition: transform 0.2s ease-out, color 0.15s ease-out, font-weight 0.2s ease-out;
    background-color: transparent;
    padding: 3px 7px 0px 7px;
    line-height: 1;
    z-index: 1;
    will-change: transform, color, font-weight;
    white-space: nowrap;
}

/* Label's background "cutout" effect */
.daluna-floating-label-group label::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: #fff; /* Light mode base background for label */
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0px, black 8px, black calc(100% - 8px), transparent 100%),
        linear-gradient(to right, transparent 0px, black 7px, black calc(100% - 7px), transparent 100%);
    mask-image:
        linear-gradient(to bottom, transparent 0px, black 8px, black calc(100% - 8px), transparent 100%),
        linear-gradient(to right, transparent 0px, black 7px, black calc(100% - 7px), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* Floated state for the label */
.daluna-floating-label-group.label-is-floated label {
    transform: translate(-3px, -22px) scale(0.875);
    font-weight: 700;
    color: #9e9e9e;
    z-index: 2;
}

/* Label color change on INPUT FOCUS */
.daluna-floating-label-group > input[type="text"]:focus ~ label,
.daluna-floating-label-group > input[type="email"]:focus ~ label,
.daluna-floating-label-group > input[type="password"]:focus ~ label,
.daluna-floating-label-group:has(.password-field-container input[type="text"]:focus) > label,
.daluna-floating-label-group:has(.password-field-container input[type="password"]:focus) > label {
    color: #AD6DF0;
}

/* Browser Autofill and Script Pre-fill Styles */
.daluna-floating-label-group input:-webkit-autofill:not(:disabled),
.daluna-floating-label-group input.is-prefilled:not(:disabled),
.daluna-floating-label-group input:-webkit-autofill:hover:not(:disabled),
.daluna-floating-label-group input.is-prefilled:hover:not(:disabled),
.daluna-floating-label-group input:-webkit-autofill:active:not(:disabled),
.daluna-floating-label-group input.is-prefilled:active:not(:disabled) {
    background-color: #fff !important;
    -webkit-text-fill-color: #333 !important;
    border: 1px solid #ccc !important;
    caret-color: #333 !important;
    transition: background-color 5000s ease-in-out 0s,
                -webkit-text-fill-color 5000s ease-in-out 0s,
                color 5000s ease-in-out 0s !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.daluna-floating-label-group input:-webkit-autofill:focus:not(:disabled),
.daluna-floating-label-group input.is-prefilled:focus:not(:disabled) {
    background-color: #fff !important;
    -webkit-text-fill-color: #333 !important;
    border-color: #AD6DF0 !important;
    outline-color: #AD6DF0 !important;
    -webkit-box-shadow: 0px 0px 6px rgba(130, 36, 227, 0.22) !important;
    box-shadow: 0px 0px 6px rgba(130, 36, 227, 0.22) !important;
}


/* Disabled/Locked field base styles */
.daluna-floating-label-group input[type="text"]:disabled,
.daluna-floating-label-group input[type="email"]:disabled,
.daluna-floating-label-group input[type="password"]:disabled,
.daluna-floating-label-group .password-field-container input[type="text"]:disabled,
.daluna-floating-label-group .password-field-container input[type="password"]:disabled {
    background-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
    border-color: #ced4da;
    box-shadow: none;
}

/* Disabled/Locked field label styles */
.daluna-floating-label-group input:disabled ~ label,
.daluna-floating-label-group input:disabled + label,
.daluna-floating-label-group:has(.password-field-container input:disabled) > label {
    color: #6c757d !important;
    font-weight: 400 !important;
}

/* Disabled floated label background color */
.daluna-floating-label-group.label-is-floated input:disabled ~ label::before,
.daluna-floating-label-group.label-is-floated input:disabled + label::before,
.daluna-floating-label-group.label-is-floated:has(.password-field-container input:disabled) > label::before {
    background-color: #F8F7F7; /* Matches form background for cut-out */
}

/* Disabled field focus state */
.daluna-floating-label-group input[type="text"]:disabled:focus,
.daluna-floating-label-group input[type="email"]:disabled:focus,
.daluna-floating-label-group input[type="password"]:disabled:focus,
.daluna-floating-label-group .password-field-container input[type="text"]:disabled:focus,
.daluna-floating-label-group .password-field-container input[type="password"]:disabled:focus {
    border-color: #ced4da;
    outline-color: transparent;
    box-shadow: none;
}

/* --- MODIFICATION START: New Global Checkbox Utility --- */
/* ==========================================================================
   Global Checkbox Utility
   ========================================================================== */

/* The main <label> container for the checkbox group */
.daluna-checkbox-group {
    display: flex;
    align-items: flex-start; /* Aligns checkbox to the top of the text */
    gap: 12px;
    cursor: pointer;
}

/* A <span> wrapper around the <input type="checkbox"> */
.daluna-checkbox-group__input-wrapper {
    flex-shrink: 0; /* Prevents the container from shrinking */
}

/* The actual <input type="checkbox"> element */
.daluna-checkbox-group__input {
    width: 16px;
    height: 16px;
    accent-color: #b05cfd; /* Brand color */
    margin: 0;
    margin-top: 2px; /* Small adjustment for perfect vertical alignment */
}

.daluna-checkbox-group__input:not(:disabled):hover {
	cursor: pointer;
}

/* A <span> wrapper around the text label content */
.daluna-checkbox-group__label-wrapper {
    flex-grow: 1; /* Allows text to take up the remaining space */
    line-height: 1.5;
}
/* --- MODIFICATION END --- */


/* ==========================================================================
   --- NEW: Global Expandable Animation Styles ---
   Moved from common-info-section-styles.css
   ========================================================================== */

/* This is the clickable trigger area */
.common-expandable-summary,
.video-card-bottom-half,
#show-filters-toggle {
    cursor: pointer;
}

/* The rotating icon inside the trigger */
.common-expandable-icon,
.video-card-expand-icon,
#show-filters-toggle .toggle-icon {
    transition: transform 0.25s ease-in-out;
}

/* Rotated state for the icon when the trigger has the 'is-expanded' class */
.common-expandable-summary.is-expanded .common-expandable-icon,
.video-card-bottom-half.is-expanded .video-card-expand-icon,
#show-filters-toggle.is-expanded .toggle-icon {
    transform: rotate(180deg);
}
.common-info-section .common-expandable-summary.is-expanded .common-expandable-icon {
    transform: rotate(90deg);
}

/* This is the content area that animates */
.common-expandable-details,
.video-card-body-bottom,
#dashboard-filters-expandable-area {
    display: none;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.28s ease-in-out, opacity 0.25s ease-in-out;
    will-change: max-height, opacity;
}