@font-face {
    font-family: 'C64_Pro';
    src: url('../fonts/c64/C64_Pro-STYLE.woff2') format('woff2'),
         url('../fonts/c64/C64_Pro-STYLE.woff') format('woff'),
         url('../fonts/c64/C64_Pro-STYLE.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'C64_Pro_Mono';
    src: url('../fonts/c64/C64_Pro_Mono-STYLE.woff2') format('woff2'),
         url('../fonts/c64/C64_Pro_Mono-STYLE.woff') format('woff'),
         url('../fonts/c64/C64_Pro_Mono-STYLE.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: "Lexend", sans-serif, "Twemoji Country Flags";
    font-optical-sizing: auto;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-heading-color);
  
  font-optical-sizing: auto;
}


.bg-ss-sidebar {
    background: var(--ss-sidebar-bg) !important;
}
.ss-f-number {
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;   
    font-size: clamp(1.1rem, 1.5rem + -2vw, 1.5rem) !important;
}

.badge.score_value {
    font-size: clamp(0.75rem, -0.1875rem + 2.5vw, 1.7rem) !important;
}
@media screen and (max-width: 992px) {
    .ss-f-number {
        font-size: clamp(1rem, 1rem + -1.5vw, 2rem) !important;
    }
}
.country-code, .country-flag{
    font-family: "Twemoji Country Flags", "Lexend", sans-serif;   
}
.
/* Darker scale background colors */
.scale-bg-6  { 
    background-color: hsla(0, 100%, 20%, 0.4) !important;
    color: white !important;
}
.scale-bg-10  { 
    background-color: hsla(30, 100%, 20%, 0.4) !important;
    color: white !important;
}
.scale-bg-3  { 
    background-color: hsla(60, 100%, 20%, 0.4) !important;
    color: white !important;
}
.scale-bg-4  { 
    background-color: hsla(90, 100%, 20%, 0.4) !important;
    color: white !important;
}
.scale-bg-5  { 
    background-color: hsla(120, 100%, 20%, 0.4) !important;
    color: white !important;
}
.scale-bg-7  { 
    background-color: hsla(150, 100%, 20%, 0.4) !important;
    color: white !important;
}
.scale-bg-1  { 
    background-color: hsla(180, 100%, 20%, 0.4) !important;
    color: white !important;
}
.scale-bg-8  { 
    background-color: hsla(210, 100%, 20%, 0.4) !important;
    color: white !important;
}
.scale-bg-9  { 
    background-color: hsla(240, 100%, 20%, 0.4) !important;
    color: white !important;
}
.scale-bg-2 { 
    background-color: hsla(270, 100%, 20%, 0.4) !important;
    color: white !important;
}
.scale-bg-11 { 
    background-color: hsla(300, 100%, 20%, 0.4) !important;
    color: white !important;
}
.scale-bg-12 { 
    background-color: hsla(330, 100%, 20%, 0.4) !important;
    color: white !important;
}

/* StyleScore Color Classes - Background + Text Color */
.ss-color-1 {
    background-color: hsla(180, 100%, 92%, 1) !important;
    color: hsl(180, 100%, 25%) !important;
}
.ss-color-2 {
    background-color: hsla(270, 100%, 92%, 1) !important;
    color: hsl(270, 100%, 25%) !important;
}
.ss-color-3 {
    background-color: hsla(60, 100%, 92%, 1) !important;
    color: hsl(60, 100%, 25%) !important;
}
.ss-color-4 {
    background-color: hsla(90, 100%, 92%, 1) !important;
    color: hsl(90, 100%, 25%) !important;
}
.ss-color-5 {
    background-color: hsla(120, 100%, 92%, 1) !important;
    color: hsl(120, 100%, 25%) !important;
}
.ss-color-6 {
    background-color: hsla(0, 100%, 92%, 1) !important;
    color: hsl(0, 100%, 25%) !important;
}
.ss-color-7 {
    background-color: hsla(150, 100%, 92%, 1) !important;
    color: hsl(150, 100%, 25%) !important;
}
.ss-color-8 {
    background-color: hsla(210, 100%, 92%, 1) !important;
    color: hsl(210, 100%, 25%) !important;
}
.ss-color-9 {
    background-color: hsla(240, 100%, 92%, 1) !important;
    color: hsl(240, 100%, 25%) !important;
}
.ss-color-10 {
    background-color: hsla(30, 100%, 92%, 1) !important;
    color: hsl(30, 100%, 25%) !important;
}
.ss-color-11 {
    background-color: hsla(300, 100%, 92%, 1) !important;
    color: hsl(300, 100%, 25%) !important;
}
.ss-color-12 {
    background-color: hsla(330, 100%, 92%, 1) !important;
    color: hsl(330, 100%, 25%) !important;
}

.scale-6  { 
    /*box-shadow: inset 15px 0 30px  hsla(0, 100%, 50%, 0.15),   inset 0px 0px 0px hsla(0, 100%, 50%, 0.15) !important; */
    background-color: hsla(0, 100%, 95%, 0.4) !important;
    /*border: 2px solid hsl(0, 100%, 50%) !important;*/
}
.scale-10  { 
   /* box-shadow: inset 15px 0 30px  hsla(30, 100%, 50%, 0.15),  inset 0px 0px 0px hsla(30, 100%, 50%, 0.15) !important; */
    background-color: hsla(30, 100%, 95%, 0.4) !important;
    /*border: 2px solid hsl(30, 100%, 50%) !important;*/
}
.scale-3  { 
    /*box-shadow: inset 15px 0 30px  hsla(60, 100%, 50%, 0.15),  inset 0px 0px 0px hsla(60, 100%, 50%, 0.15) !important; */
    background-color: hsla(60, 100%, 95%, 0.4) !important;
    /*border: 2px solid hsl(60, 100%, 50%) !important;*/
}
.scale-4  { 
   /* box-shadow: inset 15px 0 30px  hsla(90, 100%, 50%, 0.15),  inset 0px 0px 0px hsla(90, 100%, 50%, 0.15) !important; */
    background-color: hsla(90, 100%, 95%, 0.4) !important;
    /*border: 2px solid hsl(90, 100%, 50%) !important;*/
}
.scale-5  { 
   /* box-shadow: inset 15px 0 30px  hsla(120, 100%, 50%, 0.15), inset 0px 0px 0px hsla(120, 100%, 50%, 0.15) !important; */
    background-color: hsla(120, 100%, 95%, 0.4) !important;
    /*border: 2px solid hsl(120, 100%, 50%) !important;*/
}
.scale-7  { 
   /* box-shadow: inset 15px 0 30px  hsla(150, 100%, 50%, 0.15), inset 0px 0px 0px hsla(150, 100%, 50%, 0.15) !important; */
    background-color: hsla(150, 100%, 95%, 0.4) !important;
    /*border: 2px solid hsl(150, 100%, 50%) !important;*/
}
.scale-1  { 
  /*  box-shadow: inset 15px 0 30px  hsla(180, 100%, 50%, 0.15), inset 0px 0px 0px hsla(180, 100%, 50%, 0.15) !important; */
    background-color: hsla(180, 100%, 95%, 0.4) !important;
    /*border: 2px solid hsl(180, 100%, 50%) !important;*/
}
.scale-8  { 
   /* box-shadow: inset 15px 0 30px  hsla(210, 100%, 50%, 0.15), inset 0px 0px 0px hsla(210, 100%, 50%, 0.15) !important; */
    background-color: hsla(210, 100%, 95%, 0.4) !important;
    /*border: 2px solid hsl(210, 100%, 50%) !important;*/
}
.scale-9  { 
   /* box-shadow: inset 15px 0 30px  hsla(240, 100%, 50%, 0.15), inset 0px 0px 0px hsla(240, 100%, 50%, 0.15) !important; */
    background-color: hsla(240, 100%, 95%, 0.4) !important;
    /*border: 2px solid hsl(240, 100%, 50%) !important;*/
}
.scale-2 { 
   /* box-shadow: inset 15px 0 30px  hsla(270, 100%, 50%, 0.15), inset 0px 0px 0px hsla(270, 100%, 50%, 0.15) !important; */
    background-color: hsla(270, 100%, 95%, 0.4) !important;
    /*border: 2px solid hsl(270, 100%, 50%) !important;*/
}
.scale-11 { 
   /* box-shadow: inset 15px 0 30px  hsla(300, 100%, 50%, 0.15), inset 0px 0px 0px hsla(300, 100%, 50%, 0.15) !important; */
    background-color: hsla(300, 100%, 95%, 0.4) !important;
    /*border: 2px solid hsl(300, 100%, 50%) !important;*/
}
.scale-12 { 
   /* box-shadow: inset 15px 0 30px  hsla(330, 100%, 50%, 0.15), inset 0px 0px 0px hsla(330, 100%, 50%, 0.15) !important; */
    background-color: hsla(330, 100%, 95%, 0.4) !important;
    /*border: 2px solid hsl(330, 100%, 50%) !important;*/
}



.fs-7 {
    font-size: .8em;
}

 :root {
            --card-radius: 24px;
            --card-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
            --card-hover-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1);

        body.body-bg-aurora-bright {
            background: #f3f4f6;
            color: #1f2937;
            min-height: 100vh;
          
        }
        .offcanvas-body {
            background-color: rgb(218, 218, 218);
        }
        .app-hero {
            background: linear-gradient(135deg, #2563eb, #4f46e5);
            border-radius: 28px;
            padding: 3rem;
            box-shadow: 0 20px 40px rgba(37, 99, 235, 0.2);
            color: #fff;
            position: relative;
           
        }
        .app-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.15), transparent 40%);
            pointer-events: none;
        }
        
        .app-hero .badge {
            background: rgba(255,255,255,0.2);
            backdrop-filter: blur(4px);
        }

        .glass-card {
            border-radius: var(--card-radius);
            border: 1px solid rgba(255,255,255,0.2);
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(12px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        .folder-card {
           
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            
            
        }
        .folder-card:hover {
            transform: translateY(-8px);
            box-shadow: none;
            border-color: rgba(37, 99, 235, 0.1);
        }
        .folder-card .card-body {
            min-height: 240px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .folder-card .card-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #111827;
            margin-top: 1rem;
            transition: all 0.3s ease;
        }
        .folder-card p {
            color: #6b7280;
            font-weight: 500;
            transition: all 0.3s ease;
            max-height: 3em;
            opacity: 1;
            overflow: hidden;
        }

        .icon-shell {
            width: 72px;
            height: 72px;
            border-radius: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
        }
        .icon-shell svg {
            transition: all 0.3s ease;
        }
        .folder-card:hover .icon-shell {
            transform: scale(1.1);
        }

        .app-section-heading {
            color: #111827;
        }

        /* Folder Expansion Styles */
        .folder-card {
            
        }
        .desaturate {
            filter: grayscale(100%);
        }
        /* On mobile, enable collapsing */
        @media (max-width: 991px) {
            .folder-header {
                cursor: pointer;
            }
        }
        
        /* On desktop, disable collapsing and keep everything expanded */
        @media (min-width: 992px) {
            .folder-header {
                cursor: default;
                pointer-events: none;
            }
            .folder-card .collapse {
                display: block !important;
                height: auto !important;
            }
        }
        
        .folder-card.expanded {
            background-color: transparent;
            box-shadow: none;
            border-color: rgba(37, 99, 235, 0.1);
            transform: translateY(-4px);
        }

        .folder-header {
            padding: 1.5rem;
            transition: all 0.3s ease;
        }
        .folder-header:hover {
            background-color: transparent;
        }

        /* Compact Header State - only on mobile */
        @media (max-width: 991px) {
            .folder-card.expanded .folder-header {
                padding: 0.75rem;
            }
            .folder-card.expanded .folder-header .icon-shell {
                width: 48px;
                height: 48px;
                border-radius: 16px;
                margin-bottom: 0.25rem !important;
            }
            .folder-card.expanded .folder-header .icon-shell svg {
                width: 24px !important;
                height: 24px !important;
            }
            .folder-card.expanded .folder-header .card-title {
                font-size: 1.1rem;
                margin-bottom: 0;
            }
            .folder-card.expanded .folder-header p {
                max-height: 0;
                opacity: 0;
                margin: 0;
            }
            .folder-card.expanded .folder-header .lucide-chevron-down {
                margin-top: 0.25rem !important;
            }
        }

        .folder-content {
            background-color: transparent;
            border-top: 1px solid rgba(0,0,0,0.05);
        }

        .mini-app-card {
            background: transparent;
            border: 0px solid rgba(0,0,0,0.05);
            border-radius: 16px;
            padding: 1rem;
            transition: all 0.2s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .mini-app-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            border-color: rgba(37, 99, 235, 0.2);
        }
        .mini-app-card .icon-shell {
            width: 64px;
            height: 64px;
            border-radius: 18px;
            margin-bottom: 0.75rem;
        }
        .mini-app-card .small {
            font-size: 0.75rem;
            line-height: 1.2;
            font-weight: 600;
            color: #4b5563;
        } 

.badge.badge_p {
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    user-select: none;
    color: inherit;
    background-color: white;
    text-transform: uppercase;
    line-height: 1;
    font-weight: 600;
    /* max-width: 30px; */
    width: 25px;
    height: 25px;
    padding: 5px;
    z-index: 1;
    border: none !important;
    font-size: 12px;
}
.p_full_cell {
    display: flex;
    align-items: center;
    gap: 0.5em;
    white-space: nowrap;
}
.data-table td {
    vertical-align: middle;
}


.table-striped>tbody>tr:nth-of-type(odd)>*
 {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: rgb(0 0 0 / 2%) !important;
}
.data-table td {
       border: 0;
}
.judge-breakdown {
    display: flex;
    flex-wrap: wrap;
}
.judge-breakdown {
    display: grid;
    grid-template-columns: auto auto auto;
    flex-wrap: wrap;
    font-size: .85em;
}
.control-point-breakdown {
    font-size: .8em;
}
.control-point-group {
    display: grid;
    border-bottom: 1px solid;
}

.judge-score-item {
    display: grid;
    /* gap: .2em; */
}

.judges-in-control-point {
    display: flex;
    gap: .2em;
}

span.judge-name {
    font-size: .75em;
}

span.judge-score {
    font-size: .85em;
}

span.control-point-name {
    font-size: .95em;
}
.data-table th, .data-table td {
    padding: 5px !important;
}
.summary-table-section  th, .summary-table-section  td {
    padding: 5px !important;
}
.data-table table{font-size: 1rem;}
.css-bib .badge {
    border-radius: 0px;
    min-width: 22px;
    border-top: 1px solid black !important;
    border-bottom: 1px solid black !important;
    padding: 2px;
    margin: 0 !important;
    font-size: 1em;
    font-family: "Lexend", sans-serif;
    /* background: none !important; */
}
.participant-bib-badge {
    height: 40px;
    min-width: 40px !important;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.key {
    min-height: 75px;
    border: 2px solid;
    border-radius: var(--bs-border-radius-lg) !important;
}
.key span {
    position: absolute;
    transform: translateY(-50%) translateX(-50%);
}
input#score_value, input#bibInput, #editScoreValue, #createScoreValue {
       text-align: center;
    font-size: clamp(2rem, 0.1818rem + 3.6364cqi, 3rem) !important;
}
.score-input-wrapper .btn, div#bibKeypadCollapse .btn {
    transition: all 0.2s ease;
}
.bg-gradient {
    background-image: linear-gradient(359deg, rgb(255 255 255 / 29%), rgba(255, 255, 255, 0)) !important;
}
.badge.judge-status{
    font-size: clamp(.55rem, 0.1818rem + 3.6364cqi, 1rem);
}
.score-input-wrapper .btn:hover {
    background-color: #0099ff !important;   
}


a.config-indicator.complete.small {
    font-size: 0.75em;
}
a.config-indicator.complete.small svg {
   width: 20px;
   height: 20px;
}

.card.shadow-sm {box-shadow: 2px 2px 0 0 var(--bs-border-color) !important;
    transform: translate(-2px, -2px); !important}
.card.shadow-lg {box-shadow: 6px 6px 0 0 var(--bs-border-color) !important;
    transform: translate(-6px, -6px); !important}
.animation-puls{animation: pulse-subtle 2s infinite;}
@keyframes pulse-subtle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

td.css-bib {
    vertical-align: middle;
}
tr.event-settings-row.table-info {
    font-size: 12px;
}

.dropdown-item:focus, .dropdown-item:hover {
    color: var(--bs-primary);
}
.format_pdf .country-code{display: none !important;}
.pdf-body .badge.badge_p, .format_pdf .badge.badge_p, .format_pdf .badge.badge_p,  .format_pdf .badge_p{
    display: none !important;
}
th.jscore {
   width: 20px;
}
td.jscore, th.jscore {
   font-size:.85em
}
th.rscore, td.rscore {width: 45px; padding-right:10px !important}
 th.col-calculated{width: 45px; padding-right:10px !important}
 td.col-calculated{font-weight: bold;}
 th.rscore.angle-th.stage-title {
    border-right: 1px solid #00000017;
}
/* Dropped score styling for aggregation methods (e.g., best 2 of 3) */
td.drop-score,
span.drop-score, .run-score.drop-score {
    text-decoration: line-through;
    opacity: 0.7;
    color: #999;
}

th.c_bib {
    width: 30px;
}
th.c_rank {
    width: 15px;
    font-weight: bold;
}
td.css-rank{
    font-weight: bold;
}
th.c_participant {
    width: 23% !important;
}
th.c_club {
     width: 30% !important;
}
th.css-overallbest.col-highest-average.table-info {
    width: 30px;
}
th.col-overall-calculated, td.col-overall-calculated {
    width:30px;
    text-align: right;
    padding-right: 10px !important;
    font-weight: bold;
}
.smaller {
    font-size: 0.7em !important;
}
.active-heat-card{box-shadow: 0 0 0 rgba(var(--bs-success-rgb), 0.4);
  animation: active-pulse 2s infinite;
}
.hold-progress {
    z-index: -1;
}