.user-has-played-game {
    border-left: 2px var(--color-primary-500) solid !important;
}

.played-game {
    color: var(--color-primary-500);
}

.early-access-toggle-group > div {
    gap: 1rem !important;
}

.form-section > .fi-section > .fi-section-content-ctn > .fi-section-footer .fi-sc {
    div, div > .save-button {
        width: 100%;
    }
}

/*editor*/
.editor-section > .fi-sc {
    min-height: 360px;
}

.editor-section > .fi-sc > .fi-grid-col {
    .fi-fo-field {
        min-height: 350px;
    }

    .fi-fo-field-content-col {
        min-height: 340px;

        .fi-input-wrp {
            min-height: 330px;
        }
    }

    .fi-fo-rich-editor-content {
        min-height: 320px;

        .tiptap {
            min-height: 310px;
        }
    }

    .editor__preview {
        @apply prose;
    }
}

.editor-section > .fi-sc > div > .fi-sc-component > div > .fi-fo-field-wrp {
    height: 100%;
}

/*comments*/

.comment__container {
    background-color: #ffffff;
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 1px 2px 0 oklch(0 0 0 / 5%);
    border: 1px solid oklch(0.2077 0.0398 265.75 / 5%);
}

.comment__container.hidden {
    background-color: var(--color-gray-100);
}

.comment__layout {
    display: flex;
    column-gap: 0.75rem;
}

.comment__content {
    width: 100%;
}

.comment__header {
    display: flex;
    justify-content: space-between;
}

.comment__meta {
    display: flex;
    column-gap: 0.5rem;
    align-items: center;
}

.comment__author {
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.comment__timestamp {
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-400);
}

.comment__hide-toggle {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
}

.comment__body {
    padding-block: 0.5rem;
}

.comment__reply-section {
    margin-top: 0.75rem;
}

.comment__reply-form {
    display: flex;
    flex-direction: column;
}

.comment__send-button {
    margin-top: 0.5rem;
    align-self: flex-end;
}

/* Transaction Timeline Entry Styles */

.timeline__container {
    max-width: 100%;
    margin-inline-start: 4rem;
}

.transaction__actor-name {
    font-weight: var(--font-weight-bold);
    font-size: 1rem;
}

.transaction__events {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.transaction-timeline__line {
    position: absolute;
    left: 1.2rem;
    top: 1.2rem;
    bottom: 1.2rem;
    width: 1px;
    background-color: var(--color-gray-200);
}

.transaction__position, .transaction__refund-info,
.transaction__game-cancelled {
    font-size: 0.875rem;
}

.transaction__amount {
    grid-column-start: 2;
    grid-column-end: 3;
    justify-self: end;
    font-size: 1rem;
}

.transaction__refund-info, .transaction__amount,
.transaction__game-cancelled {
    font-weight: var(--font-weight-medium);
}

.transaction__action, .transaction__action--cancel,
.transaction__game-cancelled, .transaction__refund-info,
.transaction__payment-list {
    color: var(--color-gray-500);
}

.transaction__action, .transaction__payment-item, .transaction__payment-list, .transaction__action--inline {
    display: inline-flex;
    align-items: center;
    column-gap: 0.25rem;
}

.transaction__action--inline {
    font-size: 0.875rem;
}

/*roster cancelled message*/

.game-cancellation-banner {
    display: flex;
    padding: 1.5rem;
    column-gap: 0.25rem;
    justify-content: center;
    align-items: center;
    border-radius: 0.375rem;
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    --tw-ring-inset: inset;
    font-weight: var(--font-weight-medium);
    font-size: 14px;
    color: var(--danger-600);
    background-color: var(--danger-50);
}

.footer-update-player-position {
    flex-grow: 1;
    outline-style: none;
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    background-color: transparent;
    color: var(--color-zinc-950);

    :hover {
        background-color: var(--color-gray-50);
    }
}

/*move team color entry*/

.team-color-entry > .fi-in-color-item {
    border: var(--color-gray-200) 1px solid !important;
}

.move-team-entry-position {
    font-weight: var(--font-weight-semibold);
    padding: calc(var(--spacing)*4);
    border-radius: var(--radius-xl);
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color,#0000000d);
    --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);
    box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
    --tw-ring-color: color-mix(in oklab,var(--color-gray-950)5%,transparent);
}

/*action group team table*/

.action-group-button {
    padding-left: 0 !important;
    padding-block: 0 !important;
    height: 2.25rem;
    display: flex;
    border-radius: 0;
}

.action-group-button > .fi-dropdown-list-item-label {
    height: 100%;
}

.action-item-label {
    margin-inline-start: 1rem;
    height: fit-content;
    align-self: center;
}

.action-group {
    padding-left: 0 !important;
}

.player-attended {
    background-color: oklch(0.7809 0.1761 128.25 / 30.2%);
}

.resident-icon-false > svg, .hide-icon-false > svg  {
    visibility: hidden;
}

.fi-ta-search-field {
    width: 100%;
}

.fi-ta-header-toolbar div.ms-auto {
    width: 100%;
    justify-content: flex-end;
}

.fi-sidebar-nav {
    padding-right: 2rem;
}

.fi-topbar > nav > div {
    width: 100%;
    justify-content: end !important;
}

.fi-topbar > nav > div .logo{
    margin-inline: auto !important;
}

.fi-main {
    max-width: 1400px !important;
}

.fi-table-header-cell-blocks-by-providers-exists {
    width: 50px !important;
    padding: 0 !important;
}

.fi-topbar-end {
    width: 100%;
    margin-inline: 0;

    .logo {
        margin-inline: auto;
        padding-inline-start: 0;
    }
}

.fi-logo {
    display: none;
}

.fi-simple-page:has(.subheading-login) .fi-logo {
    display: flex;
}

.subheading-login {
    font-weight: 500;
    font-size: var(--text-xl)
}

.fi-ta-actions > .fi-dropdown > .fi-dropdown-panel > .fi-dropdown-list {
    padding-left: 0 !important;
    padding-block: 0 !important;
}

/*select add player*/
.select-add-player {
    .fi-dropdown-header {
        background-color: var(--color-gray-700);
        color: #fff;
    }
    .fi-input-wrp-suffix {
        background-color: #86bc38;
        border-top-right-radius: var(--radius-md);
        border-bottom-right-radius: var(--radius-md);

        .fi-input-wrp-actions {
            button > .fi-icon {
                color: #fff;
            }
        }
    }
}

.customer-table {
    .fi-ta-header-toolbar > div, .fi-ta-search-field {
        width: 100%;
    }
}

/*gamesheet styles*/
.gamesheet-subtitle {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #000;
}

.gamesheet-icon-legends {
    color: var(--color-gray-400);
    font-size: 14px;
    font-style: italic;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .fi-icon, span {
        margin-right: 0.2rem;
    }

    .fi-icon:not(:first-child), span {
        margin-left: 0.4rem;
    }
}

.gamesheet-icon-legends--item {
    display: flex;
    align-items: center;
}

/* Game Events List Component Styles */

.game-events-list {
    max-width: 100%;
    padding: 0;
}

.game-events-list__header {
    margin-bottom: 2rem;
}

.game-events-list__count {
    color: var(--color-gray-600);
}

.game-events-list__events {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.game-events-list__line {
    position: absolute;
    left: 1.2rem;
    top: 1.2rem;
    bottom: 1.2rem;
    width: 1px;
    background-color: var(--color-gray-200);
}

.timeline-entry {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    position: relative;
}

.timeline-entry__marker {
    flex-shrink: 0;
    margin-top: 0.25rem;
    position: relative;
    z-index: 10;
}

.timeline-entry__aside {
    position: absolute;
    right: calc(100% + 0.4rem);
    top: 50%;
    transform: translateY(-50%);
    width: 5rem;
    text-align: right;
    font-size: 0.75rem;
    color: var(--color-gray-500);
    line-height: 1.25rem;
    font-weight: var(--font-weight-medium);
}

.timeline-entry__icon {
    width: 2.5rem;
    height: 2.5rem;
    background-color: #ffffff;
    border: 2px solid var(--color-gray-200);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-400);
}

.timeline-entry__icon > .fi-icon {
    width: calc(var(--spacing)*4);
    height: calc(var(--spacing)*4);
}

.timeline-entry__content {
    flex: 1;
    background-color: #ffffff;
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--color-gray-200);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.timeline-entry__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.timeline-entry__summary {
    color: var(--color-gray-700);
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.625;
}

.timeline-entry__details {
    border-top: 1px solid var(--color-gray-200);
    padding-top: 0.75rem;
}

.timeline-entry__details-title {
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem;
}

.timeline-entry__details-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.75rem;
}

/* Game Timeline Page Styles */

.fi-wi-widget > .fi-section, .testing-section {
    background-color: transparent;
    --tw-ring-color: transparent;
    --tw-shadow: transparent;

    .fi-section-content-ctn > .fi-section-content {
        padding-block-start: 0;
        padding-inline: 0.25rem;
    }
}

.game-timeline__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0.5rem;
}

.game-timeline__summary {
    overflow: hidden;
    padding: 1.5rem;
    margin-inline: 1rem;
    border-radius: 0.75rem;
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
}

.game-timeline__summary-section {
    display: grid;
    grid-auto-rows: min-content;
    grid-auto-flow: row;
    gap: 1rem;
}

.game-timeline__summary-label {
    padding-bottom: 0.5rem;
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.game-timeline__summary-label, .game-timeline__summary-item-label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--color-gray-900);
}

.game-timeline__summary-item {
    display: flex;
    padding: 0.5rem;
    gap: 0.4rem;
    align-items: flex-start;
    border-radius: 0.5rem;
    background-color: var(--color-gray-100);
}

.game-timeline__summary-item-label {
    font-weight: var(--font-weight-medium);
}

.game-timeline__summary-item-value {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--color-gray-600);
}

.game-timeline__summary-item-indicator {
    margin-top: 0.5rem;
    border-radius: 9999px;
    width: 0.5rem;
    height: 0.5rem;
    background-color: oklch(0.6959 0.1491 162.48);
}

.game-events-list__event-title {
    font-size: var(--text-base);
    line-height: var(--tw-leading,var(--text-base--line-height));
    font-weight: var(--font-weight-medium);
}

.game-events-list__event-timestamp {
    font-size: 0.875rem;
    color: var(--color-gray-500);
}

.game-events-list__target-detail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.game-events-list__target-detail-label {
    color: var(--color-gray-600);
}

.game-events-list__target-detail-value {
    color: var(--color-gray-800);
}

.game-events-list__target-detail-value.player {
    color: var(--info-600);
}

.game-events-list__empty-state {
    text-align: center;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.game-events-list__empty-icon {
    height: 2rem;
    width: 2rem;
    color: var(--color-gray-400);
    margin-inline: auto;
    margin-bottom: 0.75rem;
}

.game-events-list__empty-text {
    color: var(--color-gray-500);
}

.timeline-entry__details-title,
.game-events-list__event-title,
.game-timeline__title {
    color: var(--color-gray-900);
}

/* .custom-actions-events-container → */
.game-timeline__actions-container {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

/* .custom-actions-events → */
.game-timeline__actions {
    position: relative;
    display: flex;
    justify-content: flex-end;

    .game-timeline__filters {
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
        margin-inline-end: 2rem;
        position: absolute;
        top: 1rem;
        z-index: 10;
    }
}

.badge-message {
    padding: 1rem;
    border-radius: 0.375rem;
    text-align: center;
    width: 100%;
}

.create-youth--message {
    background-color: oklch(95.1% 0.026 236.824);
    color: oklch(0.5177 0.0807 232.73);
}

.delete-message {
    color: var(--danger-600);
    background-color: var(--danger-50);
}

/* Dark mode styles */
.dark {
    .comment__container {
        background-color: var(--color-gray-900);
    }

    .comment__author {
        color: var( --color-gray-900);
    }

    .comment__timestamp {
        color: var(--color-gray-500);
    }

    .game-cancellation-banner {
        color: var(--danger-200);
        background-color: var(--danger-950);
        box-shadow: inset 0 0 0 1px oklch(0.4 0.15 25);
    }

    .gamesheet-subtitle {
        border-bottom: 2px solid var(--color-gray-700);
    }

    .game-timeline__summary,
    .game-timeline__summary-item,.timeline-entry__summary {
        color: var(--color-gray-200);
    }

    .game-timeline__summary-item {
        background-color: var(--color-gray-800);
    }

    .timeline-entry__content, .timeline-entry__icon,
    .game-timeline__summary  {
        background-color: var(--color-cm-gray);
        border-color: var(--color-gray-600);
    }

    .game-events-list__target-detail-value.player {
        color: var(--color-cm-blue);
    }

    .game-events-list__target-detail-value {
        color: var(--color-gray-200);
    }

    .game-events-list__line, .comment__container.hidden {
        background-color: var(--color-gray-700);
    }

    .timeline-entry__details-title,
    .game-events-list__event-title,
    .game-timeline__summary-label,
    .game-timeline__summary-item-label,
    .game-timeline__summary-item-value {
        color: var(--color-gray-100);
    }

    .game-events-list__count, .timeline-entry__aside,
    .game-events-list__target-detail-label {
        color: var(--color-gray-400);
    }

    .timeline-entry__details {
        border-color: var(--color-gray-700);
    }

    .move-team-entry-position--occupied {
        background-color: oklch(0.967 0.0029 264.54 / 27%);
    }

    .move-team-entry-position:not(.move-team-entry-position--occupied) {
        border: var(--color-gray-400) 1px solid;
    }
}

/* Media queries */

@media (min-width: 768px) {
    .editor-section > .fi-fo-component-ctn {
        justify-content: space-evenly;
        flex-direction: row;
    }
}

@media (min-width: 1024px) {
    .fi-main {
        padding-left: 0 !important;
    }

    .game-timeline__summary {
        margin-inline: 2rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .game-events-list {
        margin-inline: 6rem;
    }

    .game-events-list__line, .transaction-timeline__line  {
        left: 1.5rem;
        top: 1.5rem;
        bottom: 1.5rem;
    }

    .timeline-entry__icon {
        width: 3rem;
        height: 3rem;
    }

    .timeline__container {
        margin-inline: 12rem;
    }

    .timeline-entry__aside {
        right: calc(100% + 1rem);
        width: fit-content;
        font-size: 0.875rem;
        white-space: nowrap;
    }
}

@media (min-width: 1650px) {
    .fi-sidebar-nav {
        padding-right: 0 !important;
    }

    .fi-topbar-end {
        .logo {
            padding-inline-start: 10rem;
        }
    }

    .game-timeline__summary {
        margin-inline: 9rem;
    }

    .game-events-list {
        margin-inline: 6rem;
        padding: 1.5rem;
    }

    .game-timeline__actions  > .game-timeline__filters {
        margin-inline-end: 9rem;
    }

    .timeline-entry__marker {
        z-index: 10;
    }

    .timeline-entry__icon > .fi-icon {
        width: calc(var(--spacing)*5);
        height: calc(var(--spacing)*5);
    }
}