:root {

    --primary-color: #3498db;

    --secondary-color: #ffffff;

}



body {

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    margin: 0;

    padding: 0;

    background-color: #f8f9fa;

}



.email-link {

    text-decoration: none;

    color: inherit;

    display: inline-flex;

    align-items: center;

    gap: 6px;

}



.container {

    max-width: 100%;

    margin: auto;

    padding: 30px 20px;

    position: relative;

    overflow-x: hidden;

}



.form-style {
    /* max-width: 500px; */
    /* margin: auto;
    display: flex; */
    flex-direction: column;
}



.form-style input,
.form-style select,
.form-style textarea {
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #b5c6d6;
    border-radius: 6px;
    background: #f5faff;
    /* margin-bottom: 5px; */
    width: 100%;
    box-sizing: border-box;
    transition: border 0.2s, box-shadow 0.2s;
}

.form-style input:focus,
.form-style select:focus {
    border: 1.5px solid #3498db;
    outline: none;
    box-shadow: 0 0 0 2px #e3f1fd;
}




.button-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    /* margin-top: 15px; */
}




/* ------- feedback status ------- */

#status-message {

    margin-top: 1rem;

    text-align: center;

    font-weight: bold;

}



#status-message.success {

    color: green;

}



#status-message.error {

    color: red;

}



.logo {

    text-align: center;

    /* margin-bottom: 20px;*/

}



.logo img {

    max-height: 200px;

    /* Adjust logo height here */

    width: auto;

}



.lang-toggle a {

    color: #3498db;

    text-decoration: none;

    margin-right: 5px;

    font-weight: 500;

}



#datetime {

    font-family: inherit;

    font-weight: 500;

    color: #3498db;

    font-weight: bold;

}



.lang-toggle a.active {

    font-weight: 700;

    text-decoration: underline;

}



.top-bar {

    display: flex;

    flex-wrap: nowrap;

    justify-content: space-between;

    align-items: center;

    padding: 10px 60px 10px 0;

    overflow-x: auto;

    border-bottom: 2px solid #3498db;

}



.top-bar>div {

    flex: 0 1 auto;

    white-space: nowrap;

}



#datetime {

    font-size: 0.9rem;

    color: #555;

}



.lang-toggle a {

    margin-left: 5px;

}



.description {

    text-align: center;

    font-size: 18px;

    color: #333;

    margin-bottom: 40px;

}



.login-options {

    display: flex;

    justify-content: center;

    gap: 40px;

    margin-bottom: 60px;

}



.login-box {

    background-color: white;

    padding: 30px 40px;

    border-radius: 8px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    text-align: center;

    width: 220px;

    cursor: pointer;

    transition: transform 0.2s;

    text-decoration: none;

}



.login-box:hover {

    transform: translateY(-5px);

}



.login-box i {

    font-size: 32px;

    margin-bottom: 10px;

    color: #3498db;

}



.login-box p {

    font-size: 16px;

    font-weight: 500;

    color: #2c3e50;

}



footer {
    margin-top: 10px;
    border-top: 2px solid #3498db;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #555;
    flex-wrap: wrap;
    gap: 10px;
}



.footer-left,

.footer-right {

    display: flex;

    align-items: center;

}



.footer-left i,

.footer-right i {

    margin-right: 8px;

}



.footer-center a {

    color: #555;

    text-decoration: none;

    font-size: 18px;

}



.footer-center a:hover {

    color: #3498db;

}



/* Responsive styles */

@media (max-width: 768px) {
    /*.athletes-table {
        font-size: 0.95rem;
    }*/

    .login-options {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .form-card,
    .table-responsive {
        padding: 0 4px;
    }

    .form-card.search-card {
        padding: 12px 7vw 14px 7vw;
        max-width: 98vw;
    }

    .form-card.search-card .search-icon {
        font-size: 1.3em;
        margin-right: 7px;
    }

    .form-card.search-card input[type="text"] {
        font-size: 1.2rem;
        padding: 10px 10px;
    }

    h1,
    h3 {
        font-size: 1.2em !important;
    }

    .login-box {
        width: 80%;
        max-width: 300px;
    }

    .logo img {
        max-height: 100px;
    }

    .description {
        font-size: 16px;
        padding: 0 10px;
    }

    footer {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .footer-left,
    .footer-center,
    .footer-right {
        justify-content: center;
    }
}

.top-bar #datetime {

    color: #3498db !important;

}

.form-card.search-card {
    /* max-width: 500px; */
    width: 100%;
    margin: 10px auto 10px auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
    padding: 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
}

.form-card.search-card label {
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 10px;
}

.form-card.search-card .search-input-row {
    display: flex;
    align-items: center;
}

.form-card.search-card .search-icon {
    color: #3498db;
    font-size: 1.7em;
    margin-right: 12px;
}

.form-card.search-card input[type="text"] {
    flex: 1;
    font-size: 1.1em;
    padding: 14px 16px;
    border: 2px solid #b5c6d6;
    border-radius: 7px;
    background: #f5faff;
    transition: border 0.2s, box-shadow 0.2s;
}

.form-card.search-card input[type="text"]:focus {
    border: 2px solid #3498db;
    box-shadow: 0 0 0 2px #e3f1fd;
}



/* Burger Icon Container */

.burger-container {

    position: absolute;

    top: 20px;

    right: 20px;

    z-index: 1000;

    cursor: pointer;

    width: 40px;

    height: 30px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 5px;

    border-radius: 5px;

    background: hwb(0 100% 0% / 0.1);

    backdrop-filter: blur(10px);

    box-shadow: 0 4px 6px #0000001a;

    z-index: 10001;

}



/* Burger Icon Lines */

.burger-line {

    width: 100%;

    height: 3px;

    background-color: var(--primary-color);

    border-radius: 2px;

    transform-origin: center;

    transition: all 0.4s ease-in-out;

}



/* Checkbox Hack */

#burger-toggle {

    display: none;

}



/* Navigation Styles */

.nav-menu {

    position: absolute;
    /* ← changed from absolute */

    top: 0;

    right: 0;

    width: 300px;

    height: 100%;
    /* ← full viewport height */

    background: linear-gradient(135deg, var(--primary-color) 0%, #002448 100%);

    transform: translateX(100%);

    transition: transform 0.4s cubic-bezier(0.77, 0.2, 0.05, 1);

    z-index: 9999;

}





.nav-menu::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 80px;

    background: #ffffff0d;

    backdrop-filter: blur(10px);

}



.nav-menu ul {

    list-style-type: none;

}



.nav-menu ul li {

    margin: 0 15px;

    border-bottom: 1px solid #ffffff1a;

}



.nav-menu ul li a {

    color: white;

    text-decoration: none;

    display: block;

    padding: 15px;

    font-weight: 500;

    position: relative;

    overflow: hidden;

}



.nav-menu ul li a::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: -100%;

    width: 100%;

    height: 2px;

    background-color: var(--secondary-color);

    transition: left 0.3s ease;

}



.nav-menu ul li a:hover::after {

    left: 0;

}



/* Burger Icon Animation on Checkbox Checked */

#burger-toggle:checked~.burger-container .burger-line:nth-child(1) {

    transform: rotate(45deg) translate(5px, 5px);

}



#burger-toggle:checked~.burger-container .burger-line:nth-child(2) {

    opacity: 0;

}



#burger-toggle:checked~.burger-container .burger-line:nth-child(3) {

    transform: rotate(-45deg) translate(5px, -5px);

}



/* Navigation Slide In */

#burger-toggle:checked~.nav-menu {

    transform: translateX(0);

}



/* transparent backdrop behind the menu */

.overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5);

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.3s ease, visibility 0.3s ease;

    cursor: pointer;

    z-index: 9998;

}



/* show it when menu is open */

#burger-toggle:checked~.overlay {

    opacity: 1;

    visibility: visible;

}



.nav-menu .close-button {

    position: absolute;

    top: 10px;

    right: 10px;

    font-size: 2rem;

    color: white;

    cursor: pointer;

    user-select: none;

    /* prevents selection flash */

}



.login-description {

    display: block;

    margin-top: 5px;

    font-size: 0.85em;

    color: #666 !important;

    text-align: center;

}

.page-header-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 16px auto 10px auto;
    /* max-width: 600px;
    padding: 0 10px; */
    gap: 18px;
}

.page-header-row h1 {
    margin: 0;
    font-size: 1.6em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 500px) {
    .page-header-row {
        max-width: 98vw;
        padding: 0 3vw;
        gap: 8px;
    }

    .page-header-row h1 {
        font-size: 1.08em;
    }

    .btn-home {
        font-size: 1em;
        padding: 7px 8px;
        margin-right: 6px;
    }
}

.triangle-btn {
    background: none;
    border: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* To avoid any font issues from your global CSS: */
    font-size: 0;
}

.triangle-btn:disabled {
    cursor: not-allowed;
}

.triangle-left,
.triangle-right {
    display: inline-block;
    width: 0;
    height: 0;
}

.triangle-left {
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-right: 18px solid #3498db;
}

.triangle-right {
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 18px solid #3498db;
}

/* Hover and focus: darker blue */
.triangle-btn:not(:disabled):hover .triangle-left,
.triangle-btn:not(:disabled):focus .triangle-left {
    border-right-color: #217dbb;
}

.triangle-btn:not(:disabled):hover .triangle-right,
.triangle-btn:not(:disabled):focus .triangle-right {
    border-left-color: #217dbb;
}

/* Disabled: grey */
.triangle-btn:disabled .triangle-left {
    border-right-color: #aaa;
}

.triangle-btn:disabled .triangle-right {
    border-left-color: #aaa;
}



.btn-add:hover {

    background: #2980b9;

}



/* ── Divider ──────────────────────────────────────────────────────────────── */



.filter-divider {

    border: none;

    border-top: 2px solid #3498db;

    margin: 0 0 1rem 0;

}

.table-responsive {
    /*width: 100%; */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Athletes table ───────────────────────────────────────────────────────── */



.athletes-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    background: #fff;
    font-size: 1rem;
}

.athletes-table th,
.athletes-table td {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid #eee;
    white-space: nowrap;
}

.athletes-table th {
    background: #f5faff;
    font-weight: 600;
    color: #2c3e50;
}

.athlete-actions .btn-edit {

    background: #f39c12;

    /* or whatever your edit-button color is */

}



.athlete-actions .btn-delete {

    background: #e74c3c;

}



.athlete-actions .btn-edit:hover {

    background: #d35400;

}



.athlete-actions .btn-delete:hover {

    background: #c0392b;

}

.form-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
    padding: 10px 10px 10px 10px;
    /* max-width: 440px; */
    /* margin: 30px auto; */
}

/*.btn-home {
    background: #f5f5f5;
    color: #3498db;
    border: 1px solid #3498db; 
    border-radius: 6px;
    font-size: 1.1em;
    padding: 7px 10px;
    margin-right: 12px;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: background 0.2s, color 0.2s;
}*/

button,
.btn {
    background: #3498db;
    color: #fff;
    border: none;
    padding: 10px 10px;
    font-weight: 500;
    font-size: 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  
}

button:hover,
.btn:hover {
    background: #2176bd;
}

.btn-home {
    font-size: 1.1em;
    padding: 7px 10px;
    background: #3498db;
    color: white;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s;
}


.btn-home:hover {
    /* background: #e2ecf7; */
    color: #2176bd;
    /* border-color: #2176bd; */
}

.btn-cancel {
    background: #f5f5f5;
    color: #3498db;
    border: 1px solid #3498db;
}

.btn-cancel:hover {
    background: #e2ecf7;
    color: #2176bd;
    border-color: #2176bd;
}

.btn-login {
    font-size: 1.1em;
    padding: 7px 10px;
    background: #3498db;
    color: white;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-login:hover {
    background: #217ab7;
}

.btn-logout {
    background: #e74c3c !important;
    color: #fff !important;
    border: none;
    transition: background 0.2s;
}

.btn-logout:hover {
    background: #c0392b !important;
    color: #fff !important;
}

.form-card.record-results-card {
    max-width: 460px;
    margin: 0px auto 0 auto;
    box-shadow: 0 4px 20px #0001;
    border-radius: 8px;
    background: #fff;
    padding: 5px 20px 10px 20px;
    text-align: center;
}

.rr-headline {
    margin-bottom: 10px;
    font-size: 1.7rem;
    font-weight: bold;
    color: #2d66ad;
    letter-spacing: 0.5px;
}

.rr-label {
    width: 100%;
    background: #f2f7ff;
    color: #1a2d44;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 13px 0;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rr-fis {
    font-size: 0.95em;
    color: #5a5a5a;
    margin-top: 4px;
}

.rr-result-row {
    margin: 10px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*justify-content: center;*/
}

.rr-result-input {
    width: 180px;
    font-size: 1.25rem;
    padding: 10px 12px;
    text-align: center;
    border: 1px solid #bcd;
    border-radius: 8px;
    background: #f8fcff;
}

.button-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    /* margin-top: 20px; */
}

.triangle-btn {
    background: none !important;
    border: none;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    /* Removes blue overlay on iOS/Android */
    touch-action: manipulation;
    /* Improve tap response on mobile */
}

.triangle-btn:active {
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
}

.triangle-btn:focus {
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
}

.test-help-box {
    font-size: 0.8em;
    /* Or try 14px or 13px */
    color: #333;
    /* Optional: set color */
    text-align: center;
    height: 40px;
}

.header-container {
    position: relative;
    width: 100%;
    padding: 0;
    background: #fafbfc;
    border-bottom: 2px solid #3498db;
    min-height: 56px;
    box-sizing: border-box;
}

.main-header-left {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    min-width: 60px;
    padding-left: 8px;
}

.main-header-right {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 8px;
    height: 100%;
    justify-content: flex-end;
    /* Ensures right-alignment */
    min-width: 48px;
    /* Always enough for icon */
    max-width: 340px;
    /* Or whatever you need */
    width: auto;
}

.main-header-userinfo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 250px;
    vertical-align: middle;
    font-size: 1rem;
}

.main-header-loginbtn {
    flex: 0 0 auto;
    width: 48px;
    text-align: right;
}

.main-header-title {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 500;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.btn-logout {
    background: #e74c3c !important;
    /* Red */
    color: #fff !important;
    border-radius: 8px;
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    transition: background 0.2s;
    box-shadow: 0 1px 3px rgba(231, 76, 60, 0.1);
}

.btn-logout:hover,
.btn-logout:focus {
    background: #c0392b !important;
    /* Darker red on hover */
    color: #fff;
    text-decoration: none;
}

.btn-login {
    background: #3498db !important;
    /* Blue */
    color: #fff !important;
    border-radius: 8px;
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    transition: background 0.2s;
    box-shadow: 0 1px 3px rgba(52, 152, 219, 0.1);
}

.btn-login:hover,
.btn-login:focus {
    background: #217dbb !important;
    color: #fff;
    text-decoration: none;
}

a.btn, a.btn-login, a.btn-logout {
    text-decoration: none !important;
}


@media (max-width: 768px) {
    .main-header-title {
        font-size: 1.05rem;
    }

    .main-header-userinfo {
        max-width: 70px;
    }
}
.flash {
  width: 100%;
  padding: 8px 0;
  text-align: center;
  font-size: 0.9em;
  position: relative;
  transition: opacity 0.5s ease;
  z-index: 1000;
}
/* variations */
.flash-info    { background: #d9edf7; color: #31708f; }
.flash-success { background: #dff0d8; color: #3c763d; }
.flash-error   { background: #f2dede; color: #a94442; }