#login-container {
    background-image: url(/storage/img/login-bg.jpg);
    background-size: cover;
    background-position: center center;
}

.fi-main {
    max-width: 100% !important;
}

.fi-ta-ctn {
    border-radius: 0!important;
    overflow: visible!important;
}

.fi-ta-header-ctn {
    background: transparent!important;
}

.fi-ta-content {
    overflow: visible!important;
    background: #0a0a0a!important;
}

.fi-ta-table {
    background-color: hsla(0, 0%, 100%, .05);
}

.fi-btn.fi-btn-color-primary {
    color: #000!important;
}

.transition-all,
#planner-fi-table,
.fi-ta,
.fi-ta-ctn,
.fi-ta-content {
    height: 100% !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fi-panel-admin div[data-field-wrapper] {
    animation: fadeInUp 0.8s ease-out;
}

/**
 * Draggable modals
 */
.fi-modal.dragging .fi-modal-close-overlay {
    background: transparent!important;
}
.fi-modal:not([data-fi-modal-id="database-notifications"]) .fi-modal-window {
    position: absolute!important; /* Required for moving */
    cursor: move!important;
    user-select: none; /* Prevents text selection */
}

/*
 * Events
 */
.ws-group {
    display: block;
    width: 100%;
    margin-bottom: 5px; /* Optional spacing between groups */
    position: relative;
    height: 25px;
}

.fc-daygrid-event-harness {
    display: inline-block !important;
    box-sizing: border-box;
    margin-right: 2px;
    vertical-align: top;
    /* You already set custom width via JS using data-width */
}

a.fc-event {
    width: 100% !important
}