.ao-badge.training { background:#dbeafe; color:#1d4ed8; }
.ao-badge.competition { background:#ede9fe; color:#6d28d9; }
.ao-badge.championship { background:#fee2e2; color:#dc2626; }

.ao-badge.north { background:#22c55e; color:#fff; }
.ao-badge.south { background:#ef4444; color:#fff; }

/* EVENT TYPES */
.training{
background:#dbeafe;
color:#1d4ed8;
}

.competition{
background:#e0e7ff;
color:#3730a3;
}

.championship{
background:#fee2e2;
color:#991b1b;
}

/* LEAGUES */
.north{
background:#dcfce7;
color:#166534;
}

.south{
background:#fef3c7;
color:#92400e;
}


.ao-container button, .ao-container .btn {
    background-color: #004990;
    color: #fff;
    border-color: #004990;
    font-size: 13px;
    padding: 8px 10px;
    line-height: 15px;
    border-radius: 5px;
}

.ao-container button:hover, .ao-container .btn:hover {
    background-color: #000;
    color: #fff;
    border-color: #000;
    font-size: 13px;
}


.ao-container{
max-width:1440px;
margin:40px auto;
font-family: "Mulish", Sans-serif;
}

.ao-card{
border:1px solid #e5e7eb;
border-radius:10px;
background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,0.05);
padding:20px;
margin-bottom:20px;
}

/* PROFILE */
.ao-profile-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.ao-profile p{
font-size:13px;
color:#6b7280;
}

/* HEADER */
.ao-events-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:15px;
}

.ao-filters{
display:flex;
gap:10px;
}

.ao-filters select{
padding:8px 12px;
border:1px solid #ddd;
border-radius:6px;
background:#fff;
}

/* TABLE */
.ao-table{
width:100%;
border-collapse:collapse;
}

.ao-table th{
text-align:left;
padding:12px;
font-size:13px;
color:#6b7280;
background:#f9fafb;
}

.ao-table td{
padding:12px;
border-top:1px solid #eee;
}

.ao-table tr:hover{
background:#f3f4f6;
}

/* BADGES */
.ao-badge{
padding:4px 10px;
border-radius:999px;
font-size:12px;
font-weight:500;
}

.ao-blue{
background:#e0edff;
color:#2563eb;
}

.ao-yellow{
background:#fef9c3;
color:#a16207;
}

/* BUTTONS */
.btn{
background:#f3f4f6;
padding:6px 12px;
border-radius:6px;
font-size:13px;
text-decoration:none;
color:#111;
}

.btn:hover{
background:#e5e7eb;
}

.btn-outline{
border:1px solid #ddd;
padding:6px 12px;
border-radius:6px;
}

/* CALENDAR */
#ao-calendar{
margin-top:20px;
}

/* HEADER FIX */
.ao-events-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:10px;
}

.ao-events-header h3{
margin:0;
font-size:18px;
font-weight:600;
}

/* FILTER ALIGN */
.ao-filters{
display:flex;
gap:8px;
align-items:center;
}

/* SMALL DROPDOWN LIKE REACT */
.ao-filters select{
padding:6px 10px;
font-size:13px;
height:32px;
}

/* DOWNLOAD BUTTON */
.ao-download{
border:1px solid #fca5a5;
color:#ef4444;
background:#fff;
padding:6px 12px;
border-radius:6px;
font-size:13px;
}

/* TABLE CARD SPACING */
.ao-card table{
margin-top:10px;
}

/* CALENDAR HEADER */
.fc-toolbar-title{
font-size:18px !important;
font-weight:600;
}

.fc-button{
background:#374151 !important;
border:none !important;
}
















/* =========================
   MODAL BACKDROP
========================= */
.ao-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

/* =========================
   MODAL BOX
========================= */
.ao-modal-box{
    background:#fff;
    border-radius:16px;
    width:520px;
    max-width:95%;
    padding:20px;
    box-shadow:0 20px 60px rgba(0,0,0,0.2);
    animation: aoFade 0.25s ease;
}

/* animation */
@keyframes aoFade{
    from{transform:translateY(20px);opacity:0;}
    to{transform:translateY(0);opacity:1;}
}

/* =========================
   HEADER
========================= */
.ao-modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

.ao-modal-header h3{
    font-size:18px;
    font-weight:600;
}

.ao-close{
    cursor:pointer;
    font-size:20px;
    color:#666;
    transition:0.2s;
}

.ao-close:hover{
    color:#000;
}

/* =========================
   FILE GRID
========================= */
.ao-files-grid{
    display:grid;
    gap:12px;
}

/* =========================
   FILE CARD (🔥 MAIN)
========================= */
.ao-file-card{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 14px;
    border:1px solid #e5e7eb;
    border-radius:10px;
    transition:0.2s;
    background:#fff;
}

.ao-file-card:hover{
    box-shadow:0 5px 20px rgba(0,0,0,0.08);
    transform:translateY(-2px);
}

/* LEFT SIDE */
.ao-file-info{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    color:#111;
}

/* ICON */
.ao-file-icon{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eef2ff;
    color:#4f46e5;
    border-radius:8px;
    font-size:18px;
}

/* FILE NAME */
.ao-file-name{
    font-weight:500;
}

/* DATE */
.ao-file-date{
    font-size:12px;
    color:#888;
}

/* DOWNLOAD BUTTON */
.ao-download-btn{
    padding:6px 12px;
    border-radius:8px;
    border:1px solid #e5e7eb;
    background:#f9fafb;
    font-size:13px;
    text-decoration:none;
    color:#111;
    transition:0.2s;
}

.ao-download-btn:hover{
    background:#e5e7eb;
}


.ao-results-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.dot{
width:8px;
height:8px;
background:#22c55e;
display:inline-block;
border-radius:50%;
margin-right:6px;
}

.badge.green{
background:#dcfce7;
color:#166534;
}

.badge.red{
background:#fee2e2;
color:#991b1b;
}

.ao-files-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
margin-top:20px;
}

.ao-file-card{
background:#fff;
padding:15px;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,0.05);
}



.ao-dot{
width:8px;
height:8px;
background:#22c55e;
display:inline-block;
border-radius:50%;
margin-right:6px;
}

.ao-badge{
padding:4px 10px;
border-radius:999px;
font-size:12px;
font-weight:600;
}

.ao-green{
background:#dcfce7;
color:#166534;
}

.ao-red{
background:#fee2e2;
color:#991b1b;
}

.ao-link{
color:#2563eb;
text-decoration:none;
font-weight:500;
}

.ao-link:hover{
text-decoration:underline;
}


/* FILE GRID */
.ao-files-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
margin-top:15px;
}

/* CARD */
.ao-file-card{
display:flex;
align-items:center;
justify-content:space-between;
background:#fff;
padding:15px;
border-radius:10px;
box-shadow:0 2px 6px rgba(0,0,0,0.06);
transition:0.2s;
}

.ao-file-card:hover{
transform:translateY(-3px);
}

/* LEFT ICON */
.ao-file-left{
font-size:22px;
color:#2563eb;
margin-right:10px;
}

/* CONTENT */
.ao-file-content{
flex:1;
}

.ao-file-content strong{
display:block;
font-size:14px;
}

.ao-file-content small{
color:#777;
font-size:12px;
}

/* BUTTON */
.ao-download-btn{
background:#f3f4f6;
padding:6px 12px;
border-radius:6px;
text-decoration:none;
font-size:13px;
}

.ao-download-btn:hover{
background:#e5e7eb;
}