/* ==============================================================
   FORMS & INPUTS COMPONENT
   Standardized form layouts, inputs and floating labels
   ============================================================== */

/* Generic Form Grid System */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

.form-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.form-grid-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
}

@media (max-width: 992px) {
    .form-grid, .form-grid-2, .form-grid-3, .form-grid-4, .form-grid-2-1 {
        grid-template-columns: 1fr !important;
    }
}


.form-group {
    margin-bottom: 20px;
}

.form-group.full {
    grid-column: span 2;
}

/* Base Form Control */
.form-control {
    width: 100%;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    padding: 12px 16px;
    border-radius: 8px;
    color: var(--text-main);
    outline: none;
    transition: var(--transition);
    font-family: inherit;
    appearance: none;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
    background: rgba(var(--primary-rgb), 0.05);
}

/* Custom Select Styling */
select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

select.form-control option {
    background: var(--bg-sidebar);
    color: var(--text-main);
}

/* Labels */
.form-label, .form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

/* Required Indicator */
.form-group label:has(+ input[required])::after,
.form-group label:has(+ select[required])::after,
.form-group label:has(+ textarea[required])::after {
    content: " *";
    color: #ff4d4d;
    font-weight: 800;
}

/* ==============================================================
   FLOATING LABELS SYSTEM
   ============================================================== */
.floating-group {
    position: relative;
    margin-bottom: 28px;
    width: 100%;
}

.floating-group .form-control {
    background: transparent !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    color: var(--text-main) !important;
    box-shadow: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    height: 54px !important;
}

.floating-group .form-control:hover {
    border-color: rgba(var(--primary-rgb), 0.4) !important;
}

.floating-group .form-control:focus {
    border-color: var(--primary) !important;
    background: rgba(var(--primary-rgb), 0.02) !important;
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1) !important;
}

.floating-group .floating-label {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    font-weight: 500;
    z-index: 1;
}

/* Floating behavior when occupied or focused */
.floating-group .form-control:focus ~ .floating-label,
.floating-group .form-control:not(:placeholder-shown) ~ .floating-label,
.floating-group select.form-control ~ .floating-label {
    top: 0;
    transform: translateY(-50%) scale(0.85);
    left: 12px;
    color: var(--primary);
    font-weight: 800;
    background: var(--bg-card);
    padding: 0 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 10;
}

.floating-group .form-control:not(:focus):not(:placeholder-shown) ~ .floating-label {
    color: var(--text-muted);
}

/* Password Toggle Wrapper for Forms */
.password-toggle-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-toggle-btn, .btn-password-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 5px;
    z-index: 10;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-toggle-btn:hover, .btn-password-toggle:hover {
    color: var(--primary);
}

.password-toggle-btn svg, .btn-password-toggle i {
    width: 14px;
    height: 14px;
}

/* If used outside floating-actions (Legacy) */
.floating-group > .btn-password-toggle,
.floating-group > .password-toggle-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

/* Input with icons */
.input-with-icon-left {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    font-size: 16px;
    pointer-events: none;
    z-index: 5;
    transition: var(--transition);
}

.form-control:focus + .input-icon,
.form-control:focus ~ .input-icon {
    color: var(--primary);
}

.floating-actions {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.btn-generate-password {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    border-radius: 6px;
}

/* If used outside floating-actions (Legacy) */
.floating-group > .btn-generate-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.btn-generate-password:hover {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-light);
}

.btn-generate-password svg {
    width: 16px;
    height: 16px;
}

/* Calendar/Date Picker Icon color in dark mode */
::-webkit-calendar-picker-indicator {
    filter: var(--calendar-filter, invert(1));
    cursor: pointer;
}