/* ============================================
   T140 VenueApp - Site Styles
   ============================================
   Consolidated from: font-definitions.css, global.css, vendor.css
   ============================================ */

/* ============================================
   1. FONT DEFINITIONS
   ============================================ */

/* Mulish Font Faces */
@font-face {
    font-family: 'Mulish';
    src: url('/fonts/Mulish-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Mulish';
    src: url('/fonts/Mulish-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Mulish';
    src: url('/fonts/Mulish-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Mulish';
    src: url('/fonts/Mulish-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Mulish';
    src: url('/fonts/Mulish-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Mulish';
    src: url('/fonts/Mulish-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

/* Open Sans */
@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* ============================================
   2. CSS VARIABLES (Design Tokens)
   ============================================ */

:root {
    /* Brand colours */
    --bs-cobalt-blue: #0055FF;
    
    /* Bootstrap colour overrides */
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #CE0E2D;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #101820;
    
    /* Semantic colours */
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #CE0E2D;
    --bs-light: #f8f9fa;
    --bs-dark: #101820;
    
    /* RGB variants */
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 206, 14, 45;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 16, 24, 32;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-color-rgb: 16, 24, 32;
    --bs-body-bg-rgb: 255, 255, 255;
    
    /* Typography */
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    
    /* Body defaults */
    --bs-body-font-family: 'Mulish', var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #101820;
    --bs-body-bg: #fff;
}

/* ============================================
   3. BASE STYLES & TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', var(--bs-font-sans-serif);
}

/* ============================================
   4. UTILITY CLASSES
   ============================================ */

/* Brand colour utilities */
.cobalt-blue-text {
    color: var(--bs-cobalt-blue);
}

.cobalt-blue-bg,
.bg-cobalt-blue {
    background-color: var(--bs-cobalt-blue);
}

.bg-grey {
    background-color: var(--bs-gray-300);
}

/* Empty content placeholder */
.allow-empty::before {
    content: "\00a0";
    display: block;
}

/* ============================================
   5. BUTTON STYLES
   ============================================ */

.btn-primary {
    background-color: var(--bs-cobalt-blue);
    border-color: var(--bs-cobalt-blue);
}

.btn-outline-primary {
    color: var(--bs-cobalt-blue);
    border-color: var(--bs-cobalt-blue);
}

.btn-primary:hover,
.btn-primary:focus {
    border-color: var(--bs-dark);
    background-color: var(--bs-dark);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.form-check-input:checked {
    color: var(--bs-white);
    border-color: var(--bs-cobalt-blue);
    background-color: var(--bs-cobalt-blue);
}

.btn-outline-danger {
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    border-color: var(--bs-danger);
    background-color: var(--bs-danger);
}

.btn:focus,
.btn:focus-visible,
.btn-outline-secondary.dropdown-toggle.show:focus,
.btn-outline-secondary:active:focus {
    outline: none;
    box-shadow: none;
}

.btn-light {
    color: var(--bs-cobalt-blue);
}

/* ============================================
   6. TABLE STYLES
   ============================================ */

.table-wrapper-bg-light {
    background-color: #e2e2e2;
}

.table-wrapper-rounded {
    border-radius: 1rem;
}

.table-head-cobalt-blue {
    --bs-table-bg: var(--bs-cobalt-blue);
    border-color: var(--bs-cobalt-blue);
    color: var(--bs-white);
}

.table.table-dark-border {
    border-color: var(--bs-dark);
}

.table.table-custom-border tbody tr:last-of-type td {
    border-bottom-width: 0;
}

.table.table-custom-border > :not(:first-child) {
    border-top: none;
}

.table .table-dark {
    --bs-table-bg: var(--bs-cobalt-blue);
    --bs-table-striped-color: var(--bs-white);
    --bs-table-active-bg: var(--bs-cobalt-blue);
    --bs-table-active-color: var(--bs-white);
    --bs-table-hover-bg: #323539;
    --bs-table-hover-color: var(--bs-white);
    color: var(--bs-white);
}

/* ============================================
   7. NAVIGATION STYLES
   ============================================ */

.navbar {
    background: url("/assets/img/top_banner3.jpeg") center center no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.navbar-brand.logo,
.navbar-brand.home {
    width: 7.5rem;
    position: relative;
}

.nav-tabs {
    border-bottom: none;
}

.nav-tabs .nav-link {
    width: 95%;
    margin: 0 auto;
    color: var(--bs-white);
    background-color: var(--bs-dark);
    border: none;
    border-radius: 1rem;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    background-color: var(--bs-cobalt-blue);
    color: var(--bs-white);
    border-color: transparent;
}

/* ============================================
   8. CARD STYLES
   ============================================ */

.card {
    border-radius: 1rem;
}

.card-header:first-child {
    border-radius: 1rem 1rem 0 0;
}

.card-footer:last-child {
    border-radius: 0 0 1rem 1rem;
}

/* Homepage cards */
.card.venue {
    background: url("/assets/img/Left-Button.png") center center no-repeat;
}

.card.event {
    background: url("/assets/img/Middle-Button.png") center center no-repeat;
}

.card.event.ultra {
    background: url("/assets/img/Middle-Button-Ultrav2.png") center center no-repeat;
}

.card.player {
    background: url("/assets/img/Right-Button.png") center center no-repeat;
}

.card.player.ultra {
    background: url("/assets/img/Right-Button-Ultrav2.png") center center no-repeat;
}

.card.rtle {
    background-color: red;
    color: white;
    text-decoration: none;
}

.card.venue,
.card.event,
.card.event.ultra,
.card.player,
.card.player.ultra,
.card.rtle {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 4rem;
    text-decoration: none;
    border-radius: 2rem;
}

.card.venue h3,
.card.event h3,
.card.player h3 {
    font-size: 4rem;
}

.card.venue h4,
.card.event h4,
.card.player h4 {
    font-size: 2rem;
}

/* Build event cards */
.card.card-build,
.card.card-participants,
.card.card-reg-players,
.card.card-prev-players {
    min-height: 15rem;
    max-height: 40rem;
}

.card.card-participants,
.card.card-reg-players,
.card.card-prev-players {
    background-color: #e2e2e2;
    overflow: hidden;
}

.card.card-participants .card-header,
.card.card-reg-players .card-header,
.card.card-prev-players .card-header {
    color: var(--bs-white);
}

.card.card-participants .card-header {
    background-color: var(--bs-cobalt-blue);
}

.card.card-reg-players .card-header,
.card.card-prev-players .card-header {
    background-color: var(--bs-dark);
}

.card-body-scroll {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.tab-content-rounded {
    overflow: hidden;
    border-radius: 1rem;
    background-color: #e2e2e2;
}

/* ============================================
   9. TIMER STYLES
   ============================================ */

.timer {
    font-family: 'Changa', var(--bs-font-sans-serif);
    font-size: 7rem;
    line-height: 1;
    color: var(--bs-cobalt-blue);
}

.timercountdown {
    font-family: 'Changa', var(--bs-font-sans-serif);
    font-size: 10rem;
    line-height: 1;
    color: var(--bs-cobalt-blue);
}

/* ============================================
   10. FORM STYLES
   ============================================ */

.validation-errors {
    padding-left: 0;
    list-style: none;
}

.t140-validation-summary {
    list-style-type: none;
}

.t140-validation-summary .validation-message {
    font-size: 1.25rem;
    font-weight: bold;
}

/* ============================================
   11. PAGE-SPECIFIC STYLES
   ============================================ */

/* Club groups admin */
#club-group-admin-list .club-selected {
    border: 4px solid var(--bs-cobalt-blue);
}

/* ============================================
   12. MISCELLANEOUS
   ============================================ */

.spinner-custom {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

/* Blazor error UI */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}