.ama-page {
    direction: rtl;
    font-family: "Tajawal",sans-serif;
    color: #28342b
}

.ama-header {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 16px;
    padding: 22px 24px;
    border-radius: 22px;
    background: radial-gradient(circle at 8% 10%,rgba(255,255,255,.12),transparent 34%),linear-gradient(135deg,#19281e,#35563d 58%,#5b8c3b);
    color: #fff;
    box-shadow: 0 18px 42px rgba(27,47,32,.15)
}

.ama-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: rgba(255,255,255,.68);
    font-size: 10px
}

.ama-header h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 900
}

.ama-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px
}

    .ama-header-meta span {
        padding: 4px 8px;
        border: 1px solid rgba(255,255,255,.15);
        border-radius: 999px;
        background: rgba(255,255,255,.08);
        font-size: 9px;
        color: rgba(255,255,255,.86)
    }

.ama-score {
    min-width: 120px;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 14px;
    background: rgba(255,255,255,.09);
    text-align: center
}

    .ama-score span, .ama-score small {
        display: block;
        color: rgba(255,255,255,.7);
        font-size: 8px
    }

    .ama-score strong {
        display: block;
        margin: 2px 0;
        font-size: 25px;
        font-weight: 900;
        direction: ltr
    }

.ama-team-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    margin-bottom: 12px
}

.ama-team-card {
    padding: 12px 14px;
    border: 1px solid #e2e8e3;
    border-radius: 14px;
    background: #fff;
    color: #344138;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(30,50,35,.04);
    transition: .15s
}

    .ama-team-card:hover, .ama-team-card.is-active {
        color: #2b382f;
        transform: translateY(-1px)
    }

    .ama-team-card.is-home.is-active {
        border-color: #5b8c3b;
        background: #f3f8f0
    }

    .ama-team-card.is-away.is-active {
        border-color: #365875;
        background: #f2f6fa
    }

    .ama-team-card.is-neutral.is-active {
        border-color: #8b7a4b;
        background: #faf8f1
    }

    .ama-team-card span, .ama-team-card strong, .ama-team-card small {
        display: block
    }

    .ama-team-card span {
        color: #8d9690;
        font-size: 8px
    }

    .ama-team-card strong {
        margin: 2px 0;
        font-size: 13px;
        font-weight: 800
    }

    .ama-team-card small {
        color: #6f7b72;
        font-size: 8px
    }

.ama-summary {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 9px;
    margin-bottom: 14px
}

    .ama-summary article {
        padding: 10px 12px;
        border: 1px solid #e7ece8;
        border-radius: 13px;
        background: #fff
    }

    .ama-summary span, .ama-summary small {
        display: block
    }

    .ama-summary span {
        color: #828c84;
        font-size: 9px
    }

    .ama-summary strong {
        display: block;
        margin: 1px 0;
        font-size: 21px;
        font-weight: 900
    }

    .ama-summary small {
        color: #a0a7a2;
        font-size: 7px
    }

    .ama-summary .is-total strong {
        color: #5b8c3b
    }

.ama-workspace {
    display: grid;
    grid-template-columns: minmax(0,1.55fr) minmax(350px,.72fr);
    gap: 14px;
    align-items: start
}

.ama-editor, .ama-timeline-card {
    overflow: hidden;
    border: 1px solid #e3e9e4;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 24px rgba(28,48,33,.05)
}

.ama-timeline-card {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px)
}

.ama-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 17px;
    border-bottom: 1px solid #edf1ee;
    background: #fbfcfb
}

    .ama-heading > div > span {
        color: #5b8c3b;
        font-size: 9px;
        font-weight: 800
    }

    .ama-heading h2 {
        margin: 2px 0 0;
        font-size: 17px;
        font-weight: 900
    }

    .ama-heading p {
        margin: 4px 0 0;
        color: #7f8982;
        font-size: 9px
    }

.ama-catalogue {
    padding: 13px 14px;
    border-bottom: 1px solid #edf1ee
}

.ama-search-row {
    display: grid;
    grid-template-columns: auto minmax(0,280px);
    gap: 10px;
    align-items: center;
    margin-bottom: 9px
}

    .ama-search-row strong {
        font-size: 11px
    }

    .ama-search-row .form-control {
        min-height: 35px;
        border-radius: 9px;
        font-size: 9px
    }

.ama-action-group {
    margin-top: 10px
}

    .ama-action-group h3 {
        margin: 0 0 5px;
        color: #6d7970;
        font-size: 9px;
        font-weight: 800
    }

.ama-action-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 6px
}

.ama-action {
    display: grid;
    grid-template-columns: 28px minmax(0,1fr);
    gap: 7px;
    align-items: center;
    min-height: 44px;
    padding: 6px 7px;
    border: 1px solid #e5ebe6;
    border-radius: 10px;
    background: #fff;
    color: #37443b;
    text-decoration: none;
    transition: .14s
}

    .ama-action:hover, .ama-action.is-selected {
        border-color: #8fb181;
        background: #f7fbf5;
        color: #2f3c33;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(30,50,35,.05)
    }

    .ama-action > span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: #f1f5f1;
        font-size: 12px
    }

    .ama-action strong, .ama-action small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .ama-action strong {
        font-size: 8px;
        font-weight: 800
    }

    .ama-action small {
        margin-top: 1px;
        color: #9da59f;
        font: 6px Consolas,monospace
    }

    .ama-action.is-goal > span {
        background: #e8f5e9
    }

    .ama-action.is-yellow > span {
        background: #fff5bf
    }

    .ama-action.is-red > span {
        background: #fde5e5
    }

    .ama-action.is-var > span {
        background: #f0e9fa
    }

    .ama-action.is-penalty > span {
        background: #fff1df
    }

    .ama-action.is-goalkeeper > span, .ama-action.is-defense > span {
        background: #e8f0f8
    }

    .ama-action.is-medical > span {
        background: #fff0f0
    }

    .ama-action.is-data > span {
        background: #eaf3f5
    }

.ama-form {
    padding: 0 14px 15px
}

.ama-form-section {
    margin-top: 13px;
    padding: 13px;
    border: 1px solid #e8ede9;
    border-radius: 13px;
    background: #fcfdfc
}

.ama-section-title {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-bottom: 11px
}

    .ama-section-title > span {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 29px;
        height: 29px;
        border-radius: 9px;
        background: #edf5e8;
        color: #5b8c3b;
        font-size: 9px;
        font-weight: 900
    }

    .ama-section-title h3 {
        margin: 0;
        font-size: 12px;
        font-weight: 900
    }

    .ama-section-title p {
        margin: 2px 0 0;
        color: #838d86;
        font-size: 8px
    }

.ama-fields {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 9px
}

.ama-field label {
    display: block;
    margin-bottom: 4px;
    color: #556158;
    font-size: 9px;
    font-weight: 800
}

.ama-field .form-control, .ama-field .form-select {
    min-height: 38px;
    border-color: #dfe6e0;
    border-radius: 9px;
    font-size: 9px
}

.ama-field small {
    display: block;
    margin-top: 4px;
    color: #8c958e;
    font-size: 7px;
    line-height: 1.5
}

.ama-wide {
    grid-column: span 2
}

.ama-check {
    display: flex;
    align-items: center;
    gap: 7px;
    align-self: end;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid #e4eae5;
    border-radius: 9px;
    background: #fff;
    font-size: 9px;
    font-weight: 700
}

.ama-switches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin-bottom: 11px
}

    .ama-switches label {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 9px;
        font-weight: 700
    }

.ama-savebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    position: sticky;
    bottom: 10px;
    z-index: 20;
    margin-top: 14px;
    padding: 11px 13px;
    border: 1px solid #dce5dd;
    border-radius: 12px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 28px rgba(25,45,31,.11);
    backdrop-filter: blur(8px)
}

    .ama-savebar strong, .ama-savebar span {
        display: block
    }

    .ama-savebar strong {
        font-size: 10px
    }

    .ama-savebar span {
        margin-top: 2px;
        color: #7f8982;
        font-size: 7px
    }

.ama-save-button {
    min-width: 135px;
    border-color: #5b8c3b;
    border-radius: 9px;
    background: #5b8c3b;
    color: #fff;
    font-size: 10px;
    font-weight: 800
}

    .ama-save-button:hover {
        border-color: #4b7933;
        background: #4b7933;
        color: #fff
    }

.ama-empty-editor {
    padding: 42px 18px;
    text-align: center
}

    .ama-empty-editor > span {
        font-size: 38px
    }

    .ama-empty-editor h3 {
        margin: 7px 0 3px;
        font-size: 15px;
        font-weight: 900
    }

    .ama-empty-editor p {
        margin: 0;
        color: #7f8982;
        font-size: 9px
    }

.ama-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    background: #edf5e8;
    color: #5b8c3b;
    font-size: 11px;
    font-weight: 900
}

.ama-filterbar {
    display: flex;
    gap: 5px;
    padding: 9px 10px;
    border-bottom: 1px solid #edf1ee
}

    .ama-filterbar button {
        padding: 5px 8px;
        border: 1px solid #e2e8e3;
        border-radius: 999px;
        background: #fff;
        color: #707b73;
        font-size: 8px
    }

        .ama-filterbar button.is-active {
            border-color: #5b8c3b;
            background: #edf5e8;
            color: #4d7737;
            font-weight: 800
        }

.ama-timeline {
    max-height: calc(100vh - 190px);
    overflow: auto;
    padding: 9px
}

.ama-timeline-item {
    display: grid;
    grid-template-columns: 38px 35px minmax(0,1fr) auto;
    gap: 8px;
    align-items: start;
    padding: 9px;
    border: 1px solid #e8ede9;
    border-radius: 11px;
    background: #fff
}

    .ama-timeline-item + .ama-timeline-item {
        margin-top: 7px
    }

.ama-time {
    padding-top: 8px;
    color: #59665d;
    font-size: 9px;
    font-weight: 900;
    text-align: center
}

.ama-event-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    border-radius: 9px;
    background: #f2f6f2;
    font-size: 13px
}

.ama-event-copy > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px
}

.ama-event-copy strong {
    font-size: 9px;
    font-weight: 900
}

.ama-event-copy > div span, .ama-event-copy > div em {
    padding: 2px 5px;
    border-radius: 999px;
    background: #edf2ef;
    color: #647168;
    font-size: 6px;
    font-style: normal;
    font-weight: 800
}

.ama-event-copy > div em {
    background: #f1f1f1;
    color: #777
}

.ama-event-copy small {
    display: block;
    margin-top: 2px;
    color: #728078;
    font-size: 7px
}

.ama-event-copy p {
    margin: 3px 0 0;
    color: #505c53;
    font-size: 8px
}

.ama-event-actions {
    display: flex;
    flex-direction: column;
    gap: 4px
}

    .ama-event-actions form {
        margin: 0
    }

    .ama-event-actions .btn {
        width: 100%;
        font-size: 7px
    }

.ama-empty-timeline {
    padding: 35px 15px;
    color: #828d85;
    text-align: center;
    font-size: 9px
}

[hidden] {
    display: none !important
}

@media(max-width:1200px) {
    .ama-workspace {
        grid-template-columns: 1fr
    }

    .ama-timeline-card {
        position: static;
        max-height: none
    }

    .ama-timeline {
        max-height: 650px
    }
}

@media(max-width:900px) {
    .ama-header {
        grid-template-columns: 1fr auto
    }

        .ama-header > a {
            grid-column: 1/-1;
            width: max-content
        }

    .ama-action-grid {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

    .ama-fields {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:640px) {
    .ama-header {
        grid-template-columns: 1fr
    }

    .ama-score {
        width: 100%
    }

    .ama-team-grid, .ama-summary {
        grid-template-columns: 1fr
    }

    .ama-action-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .ama-search-row {
        grid-template-columns: 1fr
    }

    .ama-fields {
        grid-template-columns: 1fr
    }

    .ama-wide {
        grid-column: span 1
    }

    .ama-savebar {
        align-items: stretch;
        flex-direction: column
    }

    .ama-save-button {
        width: 100%
    }

    .ama-timeline-item {
        grid-template-columns: 35px 33px minmax(0,1fr)
    }

    .ama-event-actions {
        grid-column: 3;
        flex-direction: row
    }
}