/* Formoj - Form Builder Colors */
/* Uses Osun CSS variables as master color reference */

/* Helper text */
.formoj-form .form-text {
    color: var(--osun-text-muted);
}

/* Repeater hover shadow */
.formoj-repeater-item:hover {
    box-shadow: var(--osun-shadow-sm);
}

/* File preview background */
.formoj-file-preview {
    background: var(--osun-bg-alt);
}

/* Section aside layout - inherit color from parent */
.card-header a {
    color: inherit;
}

.card-header a:hover {
    color: inherit;
}

/* Color presets */
.formoj-color-presets {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-bottom: .5rem;
}

.formoj-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform .1s, border-color .1s;
    outline-offset: 2px;
}

.formoj-color-swatch:hover {
    transform: scale(1.15);
}

.formoj-color-swatch--active {
    border-color: #000;
    box-shadow: 0 0 0 2px #fff inset;
}

.formoj-color-swatch:focus {
    outline: 2px solid var(--osun-primary, #0d6efd);
}

/* Custom color picker */
.formoj-cpicker-wrap {
    position: relative;
}

.formoj-cpicker-trigger {
    cursor: pointer;
    padding: .375rem .5rem;
}

.formoj-cpicker-dot {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,.15);
    flex-shrink: 0;
}

.formoj-cpicker-panel {
    position: absolute;
    z-index: 1060;
    left: 0;
    top: calc(100% + 4px);
    width: 220px;
    background: var(--osun-bg, #fff);
    border: 1px solid var(--osun-border, #dee2e6);
    border-radius: .5rem;
    box-shadow: var(--osun-shadow, 0 6px 20px rgba(0,0,0,.15));
    padding: .625rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Presets inside the picker panel */
.formoj-cpicker-presets {
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--osun-border, #dee2e6);
}

/* SV gradient area */
.formoj-cpicker-sv {
    position: relative;
    width: 100%;
    height: 140px;
    border-radius: .25rem;
    cursor: crosshair;
    overflow: hidden;
    /* background set by JS */
}

.formoj-cpicker-cursor {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.4);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Hue slider */
.formoj-cpicker-hue {
    position: relative;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(to right,
        #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
    cursor: pointer;
}

.formoj-cpicker-hue-thumb {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.4);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Footer: preview + hex input */
.formoj-cpicker-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.formoj-cpicker-preview {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,.15);
    flex-shrink: 0;
}

/* Icon picker */
.formoj-icon-picker {
    position: relative;
}

.formoj-icon-picker-panel {
    position: absolute;
    z-index: 1050;
    left: 0;
    right: 0;
    margin-top: 2px;
    background: var(--osun-bg, #fff);
    border: 1px solid var(--osun-border, #dee2e6);
    border-radius: .375rem;
    box-shadow: var(--osun-shadow, 0 4px 12px rgba(0,0,0,.12));
    max-height: 320px;
    display: flex;
    flex-direction: column;
}

.formoj-icon-picker-search {
    padding: .5rem;
    border-bottom: 1px solid var(--osun-border, #dee2e6);
    flex-shrink: 0;
}

.formoj-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: .25rem;
    padding: .5rem;
    overflow-y: auto;
    flex: 1;
}

.formoj-icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .25rem;
    padding: .375rem .25rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;
    cursor: pointer;
    color: inherit;
    font-size: .6rem;
    line-height: 1.2;
    word-break: break-all;
    text-align: center;
    transition: background .1s, border-color .1s;
}

.formoj-icon-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 1.75;
    flex-shrink: 0;
}

.formoj-icon-btn:hover {
    background: var(--osun-bg-alt, #f8f9fa);
    border-color: var(--osun-border, #dee2e6);
}

.formoj-icon-btn:focus {
    outline: 2px solid var(--osun-primary, #0d6efd);
    outline-offset: 1px;
}

/* Picture picker */
.formoj-picture-picker {
    border-radius: .375rem;
    overflow: hidden;
    border: 1px solid var(--osun-border, #dee2e6);
}

.formoj-picture-preview {
    background: var(--osun-bg-raised, #1e3a5f);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.formoj-picture-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.formoj-picture-placeholder {
    color: var(--osun-primary, #4a9edd);
    opacity: .6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.formoj-picture-footer {
    background: var(--osun-sidebar-bg, #2d3035);
}

.formoj-picture-footer .input-group {
    flex-wrap: nowrap;
}

.formoj-picture-footer .btn {
    white-space: nowrap;
}

.formoj-picture-footer .input-group input {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.formoj-picture-footer .input-group label {
    border-top-left-radius: 0;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0;
}

/* Accordion driven by an external trigger: no manual toggle, no chevron */
.accordion-button-driven {
    cursor: default;
    pointer-events: none;
}
.accordion-button-driven::after {
    display: none;
}

/* Actions bar border */
.formoj-actions {
    border-top: 1px solid var(--osun-border);
}

/* Smart file upload */
.formoj-smart-upload {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .375rem;
}

.formoj-smart-upload [data-formoj-file-newnames] {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Split button variant */
.formoj-split-btn {
    display: flex !important;
    direction: row;
    align-items: stretch;
    width: 100%;
    padding: 2px !important;
    text-align: left;
    overflow: hidden;
    border-radius: var(--bs-border-radius);
    gap: 0;
}

.formoj-split-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem .9rem;
    background: rgba(0, 0, 0, .22);
    border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
    flex-shrink: 0;
    min-width: 4rem !important;
}

.formoj-split-btn__text {
    padding: .5rem .85rem;
    font-size: .875rem;
    text-align: left;
}

.formoj-split-btn__badge {
    align-self: center;
    margin-right: .6rem;
    background: rgba(255, 255, 255, .25);
    color: #fff;
    font-size: .7rem;
    min-width: 1.4rem;
}

/*
 * Password manager browser extensions (Kaspersky Password Manager,
 * DuckDuckGo, etc.) inject their own badge/icon as an extra child inside
 * .input-group. Bootstrap's input-group corner/border rules key off DOM
 * position (:first-child/:last-child), so an injected trailing element
 * strips the rounded corner from our own reveal button and gets Bootstrap's
 * generic sibling spacing applied to it even though it manages its own
 * styling. Restore our button's corner and take the injected element out
 * of the flex flow instead of fighting over layout with it.
 */
.input-group:has(kpm-field-badge) > [data-formoj-toggle-password] {
    margin-left: 0 !important;
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
}

.input-group > kpm-field-badge {
    position: absolute !important;
    left: 100% !important;
    top: 50% !important;
    transform: translateY(-50%);
    margin-left: .5rem !important;
}

/*
 * View mode (read-only) fields.
 *
 * Rendered by Komponanto::wrapViewValue()/renderViewBox() in place of the
 * plain <p class="form-control-plaintext">: a muted box that keeps the same
 * height/shape as its .form-control/.form-select counterpart so a screen
 * looks consistent whether it's in "View" or "Add / Edit" mode. Colors come
 * from Osun's theme tokens (already dark/light aware) rather than being
 * redefined here.
 */
.formoj-view-field {
    display: block;
    width: 100%;
    min-height: calc(1.5em + .75rem + 2px);
    margin-bottom: 0;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--osun-text-muted, #6c757d);
    background-color: var(--osun-bg-muted, #f1f3f5);
    border: 1px solid var(--osun-border, #dee2e6);
    border-radius: var(--bs-border-radius, .375rem);
}

.formoj-view-field--icon {
    position: relative;
    padding-right: 2.25rem;
}

.formoj-view-field__icon {
    position: absolute;
    top: 50%;
    right: .75rem;
    transform: translateY(-50%);
    color: var(--osun-text-muted, #6c757d);
    font-size: .8125em;
    opacity: .7;
    pointer-events: none;
}