/* ===================================================
   CENTRALIZED FORM STYLES
   ===================================================

   Shared styling for form elements used across multiple apps.
   Includes toggle switches, tooltips, and form layout helpers.
*/

/* ===================================================
   TOGGLE SWITCH STYLING
   =================================================== */

/* Custom toggle switch sizing */
.form-switch .form-check-input {
    width: 3em;
    height: 1.5em;
    cursor: pointer;
}

/* Success-colored checked state */
.form-switch .form-check-input:checked {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

/* Toggle switch label styling */
.form-switch .form-check-label {
    cursor: pointer;
    margin-left: 0.5em;
    font-weight: var(--font-medium);
}

/* ===================================================
   FORM LAYOUT HELPERS
   =================================================== */

/* Form actions container - space between buttons */
.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Settings card spacing - remove bottom margin from last child */
.card .card-body > div:last-child {
    margin-bottom: 0;
}

/* Action buttons gap helper */
.d-flex.gap-2 {
    gap: 0.5rem;
}

/* ===================================================
   TOOLTIP AND INFO ICON STYLING
   =================================================== */

/* Tooltip trigger cursor */
[data-bs-toggle="tooltip"] {
    cursor: help;
}

/* Info icon base styling */
.bi-info-circle {
    font-size: 1rem;
    vertical-align: middle;
}

/* Ensure info icons don't shrink in flex containers */
.d-flex.align-items-center .bi-info-circle {
    flex-shrink: 0;
}

/* ===================================================
   FORM CONTAINER
   =================================================== */

/* Generic form container with background */
.form-container {
    background-color: var(--bg-light);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

/* ===================================================
   COMMON INPUT UTILITIES
   =================================================== */

/* Search filter inputs - used across multiple apps */
.search-filter-input {
    min-width: 150px;
}

/* Small width input (e.g., for count inputs) */
.input-width-sm {
    max-width: 150px;
}

/* ===================================================
   TABLE UTILITIES
   =================================================== */

/* Drag handle cell for reorderable tables */
.drag-handle-cell {
    width: 2rem;
    cursor: grab;
}

/* ===================================================
   INLINE FORM UTILITY
   =================================================== */

/* Display form elements inline */
.inline-form {
    display: inline;
}

/* ===================================================
   RESPONSIVE ADJUSTMENTS
   =================================================== */

@media (max-width: 768px) {
    .form-actions {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ===================================================
   INTERACTIVE HOVER UTILITIES
   =================================================== */

/* Background color hover utilities */
.hover-bg-light:hover {
    background-color: var(--bg-light);
}

.hover-bg-gray:hover {
    background-color: var(--bg-gray-200);
}

/* Clickable/interactive item utility - adds pointer and hover effect */
.clickable {
    cursor: pointer;
    transition: var(--transition-bg-color);
}

.clickable:hover {
    background-color: var(--bg-light);
}

/* Interactive row utility - for table rows or list items */
.interactive-row {
    cursor: pointer;
    transition: var(--transition-bg-color);
}

.interactive-row:hover {
    background-color: var(--bg-gray-200);
}