/* CSS กลางของ Admin กาสะลองเกมส์ — โหลดต่อจาก Metronic style.bundle.css (ดู DESIGN.md) */

/* FC Iconic — ฟอนต์ไทย+ละตินของระบบ (assets/fonts/<weight>_fciconic_*.woff2) */
@font-face {
  font-family: 'FC Iconic';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/300_fciconic_light.woff2') format('woff2'), url('../fonts/300_fciconic_light.woff') format('woff');
}

@font-face {
  font-family: 'FC Iconic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/400_fciconic_regular.woff2') format('woff2'), url('../fonts/400_fciconic_regular.woff') format('woff');
}

@font-face {
  font-family: 'FC Iconic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/500_fciconic_medium.woff2') format('woff2'), url('../fonts/500_fciconic_medium.woff') format('woff');
}

@font-face {
  font-family: 'FC Iconic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/600_fciconic_semibold.woff2') format('woff2'), url('../fonts/600_fciconic_semibold.woff') format('woff');
}

@font-face {
  font-family: 'FC Iconic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/700_fciconic_bold.woff2') format('woff2'), url('../fonts/700_fciconic_bold.woff') format('woff');
}

@font-face {
  font-family: 'FC Iconic';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/800_fciconic_extrabold.woff2') format('woff2'), url('../fonts/800_fciconic_extrabold.woff') format('woff');
}

@font-face {
  font-family: 'FC Iconic';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/FCIconic-Italic.ttf') format('truetype');
}

:root {
  --bs-body-font-family: 'FC Iconic', sans-serif;
  --bs-font-sans-serif: 'FC Iconic', sans-serif;

  /* Brand accents (approximate, sampled from the event emblem) */
  --kg-gold: #FCC94F;
  --kg-orange: #F29A1B;
  --kg-orange-deep: #E07B1A;
}

/* Metronic's style.bundle.css hard-codes "body,html{font-family:Inter,Helvetica,sans-serif}" after Bootstrap's
   variable-based rule — re-point both to the variable so the font above applies (headings, buttons and inputs inherit it) */
html,
body {
  font-family: var(--bs-body-font-family);
}

/* Sportschedule dashboard */
.sportschedule-dashboard { --schedule-line: #e8edf2; --schedule-ink: #26384c; color: var(--schedule-ink); }
.sportschedule-dashboard .card { border: 1px solid var(--schedule-line); border-radius: 6px; box-shadow: 0 2px 8px rgba(38, 54, 74, .07); }
.sportschedule-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.sportschedule-stat { min-height: 66px; display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: #fff; }
.sportschedule-stat-icon { width: 50px; height: 50px; flex: 0 0 50px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 27px; }
.sportschedule-stat-icon.stat-red { color: #8d421a; background: #fff6e5; }
.sportschedule-stat-icon.stat-gold { color: #8f561a; background: #fff4dd; }
.sportschedule-stat-icon.stat-orange { color: #aa5d16; background: #fff0dc; }
.sportschedule-stat-icon.stat-brown { color: #85491c; background: #fff0dc; }
.sportschedule-stat-icon.stat-amber { color: #99531a; background: #fff3df; }
.sportschedule-stat b { display: inline-block; margin-right: 6px; color: #783711; font-size: 1.45rem; line-height: 1; }
.sportschedule-stat span:not(.sportschedule-stat-icon) { font-size: .75rem; font-weight: 700; }
.sportschedule-stat small { display: block; color: #718096; font-size: .66rem; }
.sportschedule-sport-header, .sportschedule-calendar-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 3px; }
.sportschedule-sport-header h2, .sportschedule-calendar-header h2 { margin: 0; color: #7b2e18; font-size: 1rem; font-weight: 800; }
.sportschedule-sport-header p, .sportschedule-calendar-header p { margin: 2px 0 0 23px; color: #728196; font-size: .7rem; }
.sportschedule-sport-header .btn { padding: 6px 12px; font-size: .73rem; }
.sportschedule-sport-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-bottom: 7px; }
.sportschedule-sport-card { position: relative; min-height: 48px; display: grid; grid-template-columns: 35px 1fr; grid-template-rows: 22px 17px; column-gap: 7px; align-items: center; padding: 4px 7px; border: 1px solid #e7edf2; border-radius: 5px; background: #fff; color: inherit; text-decoration: none; }
.sportschedule-sport-card:hover, .sportschedule-sport-card.is-selected { border-color: #e99a2e; box-shadow: 0 0 0 1px #e99a2e; }
.sportschedule-sport-ball { grid-row: 1 / span 2; width: 31px; height: 31px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #326da9; background: #eaf4ff; font-size: 22px; }
.sportschedule-sport-name { overflow: hidden; color: #26384c; font-size: .75rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.sportschedule-sport-tags { display: flex; gap: 3px; overflow: hidden; }
.sportschedule-sport-tags em { padding: 1px 4px; border-radius: 3px; background: #f2f5f8; color: #65758a; font-size: .59rem; font-style: normal; white-space: nowrap; }
.sportschedule-selected { position: absolute; top: 4px; right: 4px; color: #e08b20; font-size: 14px; }
.sportschedule-calendar-header { padding-top: 4px; }
.sportschedule-calendar-header h2 { color: #752d19; }
.sportschedule-calendar-header h2 i { color: #8c411e; }
.sportschedule-view-buttons { display: flex; gap: 3px; }
.sportschedule-view-buttons button { padding: 6px 11px; border: 1px solid #e3e8ed; border-radius: 4px; background: #fff; color: #536479; font: inherit; font-size: .7rem; }
.sportschedule-view-buttons button.active { border-color: #8a421d; background: #773410; color: #fff; }
.sportschedule-filters { margin-bottom: 7px; padding: 7px 8px; }
.sportschedule-filters form { display: grid; grid-template-columns: 1.2fr .9fr .9fr .9fr .9fr 1.45fr auto auto auto; gap: 5px; align-items: end; }
.sportschedule-filters label { min-width: 0; color: #536479; font-size: .62rem; font-weight: 700; }
.sportschedule-filters input, .sportschedule-filters select { display: block; width: 100%; height: 30px; margin-top: 2px; padding: 3px 8px; border: 1px solid #dfe5eb; border-radius: 4px; background: #fff; color: #536479; font: inherit; font-size: .7rem; }
.sportschedule-filters .btn { height: 30px; padding: 4px 9px; white-space: nowrap; font-size: .7rem; }
.sportschedule-calendar-card { overflow: hidden; }
.sportschedule-grid { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .7rem; }
.sportschedule-grid th, .sportschedule-grid td { height: 49px; padding: 3px 4px; border: 1px solid var(--schedule-line); text-align: center; vertical-align: middle; }
.sportschedule-grid thead th { height: 39px; color: #fff; background: #774115; font-weight: 800; }
.sportschedule-grid thead small { display: block; color: #f9e9d8; font-size: .6rem; font-weight: 400; }
.sportschedule-time-head, .sportschedule-time { width: 76px; color: #35485d !important; background: #fafbfd !important; font-size: .65rem; font-weight: 700; }
.sportschedule-match { display: block; min-height: 43px; padding: 3px 5px; border-radius: 3px; color: #30455d; background: #e9f4ff; text-align: left; text-decoration: none; }
.sportschedule-match:hover { box-shadow: inset 0 0 0 1px #cf8b24; }
.sportschedule-match strong, .sportschedule-match span, .sportschedule-match em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sportschedule-match strong { color: #21466d; font-size: .69rem; font-weight: 800; }
.sportschedule-match strong i { margin-right: 3px; color: #2f74ae; }
.sportschedule-match span { color: #526a82; font-size: .62rem; }
.sportschedule-match em { width: max-content; max-width: 100%; margin-top: 2px; padding: 1px 4px; border-radius: 2px; background: #fff; color: #68788a; font-size: .57rem; font-style: normal; }
.sportschedule-dash { color: #9ba8b5; }
.sportschedule-empty { height: 160px !important; color: #8290a3; }
.sportschedule-legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 7px 10px; color: #6b7a8d; font-size: .62rem; }
.sportschedule-legend b { color: #35485d; }
.sportschedule-legend i { margin-right: 2px; color: #3975a9; }
@media (max-width: 1100px) { .sportschedule-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sportschedule-sport-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sportschedule-filters form { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .sportschedule-stats, .sportschedule-sport-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sportschedule-sport-header, .sportschedule-calendar-header { align-items: flex-start; flex-direction: column; } .sportschedule-filters form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sportschedule-search { grid-column: span 2; } }

/* Sidebar: truncate long Thai menu names */
.app-sidebar-menu .menu-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.app-sidebar-logo img {
  object-fit: contain;
  max-width: 100%;
}

/* Medal badges */
.badge-medal-gold {
  color: #D4A106;
  background-color: rgba(212, 161, 6, 0.12);
}

.badge-medal-silver {
  color: #8A94A6;
  background-color: rgba(138, 148, 166, 0.12);
}

.badge-medal-bronze {
  color: #B8733B;
  background-color: rgba(184, 115, 59, 0.12);
}

/* Radio drawn as a ticked square (Metronic only has a round radio) — same corner, size and tick as its checkbox */
.form-check .form-check-input.kg-radio-check[type=radio] {
  border-radius: .45em;
  background-size: 60% 60%;
}

.form-check .form-check-input.kg-radio-check[type=radio]:checked {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' width='13' height='11' fill='none'%3e%3cpath d='M11.0426 1.02893C11.3258 0.695792 11.8254 0.655283 12.1585 0.938451C12.4917 1.22162 12.5322 1.72124 12.249 2.05437L5.51985 9.97104C5.23224 10.3094 4.72261 10.3451 4.3907 10.05L0.828197 6.88335C0.50141 6.59288 0.471975 6.09249 0.762452 5.7657C1.05293 5.43891 1.55332 5.40948 1.88011 5.69995L4.83765 8.32889L11.0426 1.02893Z' fill='%23ffffff'/%3e%3c/svg%3e");
}

/* Dashboard medal table — leader row + total column */
.kg-medal-table .kg-medal-leader > td {
  background-color: rgba(212, 161, 6, 0.12);
}

.kg-medal-table .kg-medal-leader > td:first-child {
  color: #D4A106;
  box-shadow: inset 4px 0 0 #D4A106;
}

.kg-medal-table .kg-medal-total {
  background-color: var(--bs-gray-100);
}

#event-bracket-panel,
    #event-bracket-panel * {
        box-sizing: border-box;
    }
    #event-bracket-panel {
        width: 100%;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #edf0f5;
        border-radius: 6px;
        box-shadow:
            0 1px 4px rgba(16, 24, 40, .04);
        font-family: inherit;
    }
    #event-bracket-panel .eb-header {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 14px;
        background: #ffffff;
    }
    #event-bracket-panel .eb-header-left {
        display: flex;
        align-items: center;
        gap: 7px;
    }
    #event-bracket-panel .eb-header-icon {
        color: #3e97ff;
        font-size: 16px;
        line-height: 1;
    }
    #event-bracket-panel .eb-title {
        margin: 0;
        padding: 0;
        color: #344054;
        font-size: 1.25rem;
        font-weight: 700;
        white-space: nowrap;
    }
    #event-bracket-panel .eb-count {
        min-width: 35px;
        height: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 6px;
        border-radius: 3px;
        background: #eef6ff;
        color: #3e97ff;
        font-size: .85rem;
        font-weight: 600;
        white-space: nowrap;
    }
    #event-bracket-panel .eb-actions {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    #event-bracket-panel .eb-action {
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 9px;
        border: 0;
        border-radius: 4px;
        font-family: inherit;
        font-size: .85rem;
        cursor: pointer;
    }
    #event-bracket-panel .eb-action-fit {
        background: #eef6ff;
        color: #3e97ff;
    }
    #event-bracket-panel .eb-action-actual {
        background: #fafafa;
        color: #475467;
    }
    #event-bracket-panel .eb-body {
        padding:
            0 12px 0 12px;
    }
    #event-bracket-panel .eb-help {
        height: 22px;
        display: flex;
        align-items: center;
        color: #98a2b3;
        font-size: .95rem;
        white-space: nowrap;
    }
    #event-bracket-panel .eb-viewport {
        position: relative;
        width: 100%;
        overflow: auto;
        background: #fafafa;
        border-radius: 3px;
        scrollbar-width: thin;
        scrollbar-color:
            #d0d5dd transparent;
    }
    #event-bracket-panel .eb-viewport::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }
    #event-bracket-panel .eb-viewport::-webkit-scrollbar-thumb {
        background: #d0d5dd;
        border-radius: 10px;
    }
    #event-bracket-panel .eb-stage {
        position: relative;
        margin: 0 auto;
        transform-origin:
            top center;
    }
    #event-bracket-panel .eb-svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
        z-index: 1;
        pointer-events: none;
    }
    #event-bracket-panel .eb-header-path {
        fill: none;
        stroke: #a8b1c1;
        stroke-width: 1;
        stroke-dasharray: 4 4;
        stroke-linecap: square;
        stroke-linejoin: miter;
    }
    #event-bracket-panel .eb-edge {
        fill: none;
        stroke: #667085;
        stroke-width: 1.25;
        stroke-linecap: square;
        stroke-linejoin: miter;
        vector-effect:
            non-scaling-stroke;
    }
    #event-bracket-panel .eb-edge-provisional {
        stroke: #98a2b3;
        stroke-dasharray: 5 4;
    }
    #event-bracket-panel .eb-edge-loss {
        stroke: #f6c000;
        stroke-dasharray: 5 4;
    }
    #event-bracket-panel .eb-trophy {
        position: absolute;
        top: 12px;
        left: 50%;
        width: 40px;
        height: 40px;
        transform:
            translateX(-50%);
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff8dd;
        border-radius: 50%;
        color: #f6c000;
    }
    #event-bracket-panel .eb-trophy i {
        color: #f6c000;
        font-size: 24px;
    }
    #event-bracket-panel .eb-round-label {
        position: absolute;
        left: 12px;
        z-index: 4;
        min-height: 17px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 1px 5px;
        border-radius: 2px;
        background: #eef6ff;
        color: #3e97ff;
        font-size: .85rem;
        font-weight: 600;
        white-space: nowrap;
    }
    #event-bracket-panel .eb-match {
        position: absolute;
        width:
            166px;
        z-index: 4;
        transform:
            translateX(-50%);
    }
    #event-bracket-panel .eb-time-wrap {
        width: 100%;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #event-bracket-panel .eb-time {
        min-height: 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        background: #eef6ff;
        border-radius: 2px;
        color: #3e97ff;
        font-size: .85rem;
        font-weight: 600;
        line-height: 15px;
        white-space: nowrap;
    }
    #event-bracket-panel .eb-versus {
        position: relative;
        width:
            166px;
        height: 24px;
    }
    #event-bracket-panel .eb-versus::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        height: 10px;
        border-left:
            1px solid #667085;
    }
    #event-bracket-panel .eb-versus-horizontal {
        position: absolute;
        top: 10px;
        left: 39px;
        width: 88px;
        border-top:
            1px solid #667085;
    }
    #event-bracket-panel .eb-versus-left {
        position: absolute;
        top: 10px;
        left: 39px;
        height: 14px;
        border-left:
            1px solid #667085;
    }
    #event-bracket-panel .eb-versus-right {
        position: absolute;
        top: 10px;
        right: 39px;
        height: 14px;
        border-left:
            1px solid #667085;
    }
    #event-bracket-panel .eb-participants {
        width:
            166px;
        height: 56px;
        display: flex;
        gap:
            10px;
    }
    #event-bracket-panel .eb-participant {
        width:
            78px;
        height: 56px;
        flex:
            0 0 78px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 4px 3px 3px;
        border:
            1px solid #e4e7ec;
        border-radius: 3px;
        background: #ffffff;
        box-shadow:
            0 1px 2px rgba(16, 24, 40, .02);
        color: #344054;
        text-decoration: none;
        overflow: hidden;
        transition:
            border-color .15s ease,
            box-shadow .15s ease;
    }
    #event-bracket-panel .eb-participant:hover {
        border-color: #84c5ff;
        box-shadow:
            0 2px 5px rgba(62, 151, 255, .08);
    }
    #event-bracket-panel .eb-participant-winner {
        border-color: #b7e4c7;
        background: #f4fbf6;
    }
    #event-bracket-panel .eb-logo {
        width: 27px;
        height: 27px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 27px;
    }
    #event-bracket-panel .eb-logo img {
        display: block;
        width: 25px;
        height: 25px;
        object-fit: contain;
    }
    #event-bracket-panel .eb-logo i {
        color: #98a2b3;
        font-size: 20px;
    }
    #event-bracket-panel .eb-name {
        width: 100%;
        display: block;
        overflow: hidden;
        color: #344054;
        font-size: .85rem;
        font-weight: 600;
        line-height: 12px;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    #event-bracket-panel .eb-participant-empty {
        color: #98a2b3;
    }
    #event-bracket-panel .eb-participant-empty .eb-name {
        color: #98a2b3;
    }
    #event-bracket-panel .eb-footer {
        height: 29px;
        display: flex;
        align-items: center;
        color: #98a2b3;
        font-size: .85rem;
    }
    #event-bracket-panel .eb-empty-state {
        height: 200px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #667085;
        font-size: .95rem;
    }
    #event-bracket-panel .eb-empty-state small {
        margin-top: 4px;
        color: #98a2b3;
        font-size: .85rem;
    }
    @media (max-width: 768px) {
        #event-bracket-panel .eb-header {
            padding-left: 10px;
            padding-right: 10px;
        }
        #event-bracket-panel .eb-body {
            padding-left: 8px;
            padding-right: 8px;
        }
    }
#sportentry-page {
      --se-ink: #102344;
      --se-muted: #7b8cab;
      color: var(--se-ink);
   }

   #sportentry-page .se-hero {
      position: relative;
      overflow: hidden;
      border-radius: 18px;
      padding: 28px;
      min-height: 170px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      background: #edf5ff url('<?php echo $escape(base_url('assets/img/sportschedule/team-entry-hero.png')); ?>') center center/cover no-repeat;
      box-shadow: 0 4px 14px #2677df0b;
      margin-bottom: 16px;
   }

   #sportentry-page .se-intro {
      position: relative;
      flex: 1;
   }

   #sportentry-page .se-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #d6eaff;
      color: #0879ff;
      border-radius: 10px;
      padding: 5px 10px;
      font-size: 11px;
      font-weight: 600;
      margin-bottom: 12px;
   }

   #sportentry-page .se-intro h1 {
      font-size: 30px;
      line-height: 1.3;
      color: #0c2045;
      margin: 0 0 7px;
      font-weight: 750;
   }

   #sportentry-page .se-intro p {
      color: #7285a7;
      font-size: 13px;
      margin: 0;
   }

   #sportentry-page .se-motto {
      display: block;
      font-size: 12px;
      font-style: italic;
      color: #8798ba;
      margin-top: 8px;
   }

   #sportentry-page .se-event-picker {
      position: relative;
      background: #ffffffed;
      border: 1px solid #fff;
      border-radius: 12px;
      padding: 20px 18px;
      width: 375px;
      flex-shrink: 0;
      box-shadow: 0 7px 25px #2f74d510;
   }

   #sportentry-page .se-event-picker label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 10px;
   }

   #sportentry-page .se-event-picker select {
      border: 1px solid #dce8fb;
      background-color: #fafcff;
      border-radius: 10px;
      font-size: 12px;
      min-height: 40px;
      color: #1c3158;
   }

   #sportentry-page .se-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 15px;
      margin-bottom: 16px;
   }

   #sportentry-page .se-stat {
      display: flex;
      align-items: center;
      gap: 16px;
      min-height: 92px;
      border: 1px solid #edf1f7;
      border-radius: 11px;
      padding: 16px;
      background: linear-gradient(110deg, #f6faff, #eff6ff);
   }

   #sportentry-page .se-stat.green {
      background: linear-gradient(110deg, #f5fcf9, #edfbf6);
      --se-accent: #00b154;
      --se-tint: #c7f6e5;
   }

   #sportentry-page .se-stat.orange {
      background: linear-gradient(110deg, #fffcf8, #fff8ef);
      --se-accent: #ff8900;
      --se-tint: #ffedcf;
   }

   #sportentry-page .se-stat.pink {
      background: linear-gradient(110deg, #fff9fc, #fdf1f7);
      --se-accent: #f50062;
      --se-tint: #ffd9e8;
   }

   #sportentry-page .se-stat-icon {
      width: 50px;
      height: 50px;
      flex: 0 0 50px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      background: var(--se-tint, #d6eaff);
   }

   #sportentry-page .se-sport-logo {
      width: 42px;
      height: 42px;
      object-fit: contain;
   }

   #sportentry-page .se-stat-icon i {
      color: var(--se-accent, #087dff);
      font-size: 29px;
   }

   #sportentry-page .se-stat-label {
      font-size: 11px;
      display: block;
      margin-bottom: 3px;
   }

   #sportentry-page .se-stat-value {
      display: block;
      font-size: 24px;
      font-weight: 750;
      line-height: 1.2;
      color: var(--se-accent, #102344);
   }

   #sportentry-page #sportentry-event-name {
      font-size: 16px;
   }

   #sportentry-page .se-caption {
      display: block;
      font-size: 10px;
      line-height: 1.5;
      color: var(--se-muted);
      margin-top: 3px;
   }

   #sportentry-page .se-status {
      display: inline-block;
      font-size: 11px;
      font-weight: 600;
      color: #fa2862;
      background: #ffdeea;
      border-radius: 20px;
      padding: 4px 10px;
   }

   #sportentry-page .se-panel {
      background: #fff;
      border: 1px solid #edf0f5;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 3px 12px #15306404;
   }

   #sportentry-page .se-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 20px;
   }

   #sportentry-page .se-heading {
      display: flex;
      align-items: center;
      gap: 16px;
   }

   #sportentry-page .se-heading>i {
      color: #0781ff;
      font-size: 32px;
   }

   #sportentry-page .se-heading h2 {
      font-size: 18px;
      font-weight: 750;
      margin: 0 0 3px;
   }

   #sportentry-page .se-heading p {
      color: var(--se-muted);
      font-size: 11px;
      margin: 0;
   }

   #sportentry-page .se-create {
      border: 0;
      color: #fff;
      background: linear-gradient(110deg, #0969ee, #0050df);
      border-radius: 8px;
      padding: 10px 19px;
      font-size: 12px;
      font-weight: 600;
   }

   #sportentry-page .se-create i {
      color: inherit;
      margin-right: 7px;
   }

   #sportentry-list {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
   }

   #sportentry-page .se-team {
      --se-team-color: #594fda;
      --se-team-bg: #f0edff;
      --se-avatar: #dcd7ff;
      border: 1px solid #eff1f7;
      border-radius: 11px;
      overflow: hidden;
      box-shadow: 0 3px 7px #112c4805;
   }

   #sportentry-page .se-team:nth-child(4n+2) {
      --se-team-color: #048754;
      --se-team-bg: #e7fbf3;
      --se-avatar: #bff6e1;
   }

   #sportentry-page .se-team:nth-child(4n+3) {
      --se-team-color: #d77b00;
      --se-team-bg: #fff6e7;
      --se-avatar: #ffebc8;
   }

   #sportentry-page .se-team:nth-child(4n+4) {
      --se-team-color: #de005b;
      --se-team-bg: #ffedf5;
      --se-avatar: #ffcce2;
   }

   #sportentry-page .se-team-top {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 13px 14px 9px;
      background: linear-gradient(115deg, var(--se-team-bg), #ffffff60), var(--se-team-bg);
      min-height: 64px;
   }

   #sportentry-page .se-avatar {
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
      display: grid;
      place-items: center;
      background: var(--se-avatar);
      color: var(--se-team-color);
      border: 3px solid color-mix(in srgb, var(--se-team-color) 8%, transparent);
      border-radius: 50%;
      font-size: 17px;
      font-weight: 700;
   }

   #sportentry-page .se-team-info {
      flex: 1;
      min-width: 0;
   }

   #sportentry-page .se-team-info h3 {
      font-size: 13px;
      color: #142749;
      font-weight: 750;
      margin: 0 0 6px;
      overflow-wrap: anywhere;
   }

   #sportentry-page .se-team-campus {
      color: #697e9c;
      font-size: 10px;
   }

   #sportentry-page .se-team-campus i {
      color: var(--se-team-color);
      font-size: 12px;
   }

   #sportentry-page .se-settings {
      align-self: flex-start;
      width: 24px;
      height: 24px;
      border: 0;
      border-radius: 50%;
      background: white;
      color: #46709d;
      display: grid;
      place-items: center;
      flex-shrink: 0;
   }

   #sportentry-page .se-team-body {
      padding: 10px 14px 12px;
   }

   #sportentry-page .se-members {
      display: flex;
      gap: 10px;
      align-items: center;
      margin-bottom: 9px;
   }

   #sportentry-page .se-members>i {
      display: grid;
      place-items: center;
      background: #f0f7ff;
      color: #007bff;
      border-radius: 8px;
      width: 35px;
      height: 33px;
      font-size: 20px;
   }

   #sportentry-page .se-members strong {
      display: block;
      font-size: 13px;
      line-height: 1.2;
   }

   #sportentry-page .se-members small {
      font-size: 10px;
      color: #7b8cab;
   }

   #sportentry-page .se-actions {
      display: flex;
      gap: 6px;
   }

   #sportentry-page .se-actions button {
      border: 0;
      border-radius: 6px;
      padding: 6px 9px;
      font-size: 10px;
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
   }

   #sportentry-page .se-actions i {
      font-size: 12px;
      color: inherit;
   }

   #sportentry-page .se-manage {
      flex: 1;
      background: linear-gradient(110deg, #238bff, #087aff);
      color: white;
   }

   #sportentry-page .se-edit {
      background: #eaf1ff;
      color: #264683;
   }

   #sportentry-page .se-delete {
      background: #ffe5ec;
      color: #d51c4a;
   }

   #sportentry-page .se-empty {
      grid-column: 1/-1;
      padding: 36px;
      text-align: center;
      color: #7b8cab;
   }

   #sportentry-page button:focus-visible {
      outline: 3px solid #81b9ff;
      outline-offset: 3px;
   }

   @media(max-width:1100px) {
      #sportentry-list {
         grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #sportentry-page .se-stats {
         grid-template-columns: repeat(2, minmax(0, 1fr));
      }
   }

   @media(max-width:767px) {
      #sportentry-page .se-hero {
         flex-direction: column;
         align-items: stretch;
         padding: 22px;
         background-position: 65% center;
      }

      #sportentry-page .se-event-picker {
         width: 100%;
      }

      #sportentry-page .se-intro h1 {
         font-size: 25px;
      }

      #sportentry-page .se-panel-header {
         align-items: flex-start;
         flex-direction: column;
      }

   }

   @media(max-width:479px) {

      #sportentry-list,
      #sportentry-page .se-stats {
         grid-template-columns: 1fr;
      }

   }