:root {
    --surface-container-low: #ffffff;
    --font: Figtree, Inter, Roboto, Arial, sans-serif;

    --primary: #01579B;
    --primary-container: #B3E5FC;
    --surface-container: #fdf8fd;
    /*

    --primary: #6750a4;
    --on-primary: #ffffff;
    --on-primary-container: #ffffff;
    --on-surface-variant: #ffffff;
     */
}

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.in-development {
    display: none !important;
}

.main-navbar i.active:after {
    background-size: 22500% !important;
    opacity: .1 !important;
    background-image: radial-gradient(circle, currentColor 1%, transparent 1%) !important;
}

/* ===== Titles ==== */
h1 {
    font-size: 1.3em;
}

h2 {
    display: none;
}

h3 {
    font-size: 1.1em;
}

/* ===== Lists ==== */

article > ul.list > li {
    padding: .5rem 0 !important;
    min-width: 0;
    overflow-wrap: break-word;
    white-space: normal;
}

article > ul.list > li > a {
    padding: 0 !important;
}

/* ===== Header ==== */
header {
    padding: 0;
}

header > nav {
    padding: 0px 16px;
}

header .tabs {
    position: sticky;
    top: 0;
}

.tabs > a {
    flex-direction: column;
}

.header-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: unset !important;
}

.header-title h1 {
    font-weight: 700;
    font-size: 1.4em !important;
    white-space: normal;
    overflow-wrap: break-word;
}

.header-title h2 {
    display: block;
    font-size: 1.1em;
    margin: 0;
    padding: 0;
    margin-block-start: 0 !important;
    font-style: italic;
    white-space: normal;
    overflow-wrap: break-word;
}


.placeholder-container {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.placeholder-container img {
    max-width: 160px;
}

.placeholder-text {
    text-align: center;
    padding: 0 16px;
    font-size: 1.2em;
    margin-top: 30px;
    font-weight: 600;
}

/* ===== Components ==== */
article {
    margin-bottom: 48px;
}

main {
    padding: 16px;
}

.field {
    background-color: var(--surface-container-low);
}

/* ===== Competitions screen ==== */

.screen-competitions {
    background-color: var(--surface-container);
}

.calendar {
    text-align: center;
    background: unset;
}

.calendar a {
    background: var(--primary-container);
    border-radius: 16px;
    width: 32px;
    height: 32px;
    font-weight: 600;
}

.competitions-month {
    display: flex;
}

.competitions-month-name {
    flex-grow: 1;
    text-align: center;
    font-size: 1.2em;
}

.calendar thead > tr > th {
    border: 0;
}

.competitions-filter {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: auto;
    margin-bottom: 20px;
    scrollbar-width: none;
    border-radius: unset;
}

.competitions-filter .chip {
    flex: 0 0 auto;
}

.competitions-list-item {
    display: flex;
    flex-direction: column;
}

.competitions-list-item-title {
    font-size: 1.1em;
    word-wrap: break-word;
    min-width: 0;
}

.competitions-list h4 {
    font-size: 1.3em;
    font-weight: 700;
}

.competition-day {
    cursor: unset !important;
}

.competitions-list-item-title {
    font-weight: 500;
    white-space: normal;
    overflow-wrap: break-word;
}

.competitions-list-item-location {
    color: #616161;
    white-space: normal;
    overflow-wrap: break-word;
}

/* ===== Swimmer list screen ==== */

.swimmer-list-swimmer-name {
    font-weight: 700;
    font-size: 1.15em;
}

.swimmer-list-swimmer-details {
    color: #616161;
    white-space: normal;
    overflow-wrap: break-word;
}

/* ===== Competitions Schedule screen ==== */

.schedule-items > li {
    display: flex;
}

main.race-results > article > ul.schedule-items > li.schedule-items-header {
    display: flex;
    font-size: 0.9em;
    font-style: italic;
    color: #999999 !important;
    padding: 0 0 8px 0 !important;
    min-block-size: unset;
}

.schedule-items-header .material-symbols-outlined {
    font-size: 20px;
    margin-right: 2px;
}

.schedule-items-header-lane {
    display: flex;
    flex: 1;
    justify-content: start;
    align-items: center;
    padding-left: 14px;
}

.schedule-items-header-swim-time {
    display: flex;
    flex: 1;
    justify-content: end;
    align-items: center;
    padding-right: 8px;
}

.schedule-item-info {
    flex-grow: 1;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
}

.schedule-item-time {
    display: flex;
    padding: 0px 4px 0px 12px;
    align-items: center;
    font-family: monospace;
    font-size: 1em;
}

.schedule-item-title {
    font-size: 1.15em;
    font-weight: 700;
}

.schedule-item-title.door-opening {
    display: flex;
    align-items: center;
}

.schedule-item-title.door-opening .icon {
    margin-right: 8px;
}

span.swimmer-value {
    font-weight: 600;
    display: inline-block;
    margin-left: 4px;
    color: #000000;
}

.swimmer-entry-icon {
    font-size: 12px;
    margin-right: 4px;
}

.swimmer-entry-time, .swimmer-heat, .swimmer-lane {
    display: flex;
    align-items: center;
    color: #616161;
}

/* ===== Event Schedule screen ==== */

.event-schedule-entry-main {
    width: 100%;
    display: flex;
    min-width: 0;
}

.event-schedule-entry-lane {
    min-width: 48px;
    margin-right: 8px;
    justify-content: center;
    display: flex;
    align-items: center;
    font-weight: 700;
    flex-shrink: 0;
}

.event-schedule-entry-lane-main-infos {
    flex-grow: 1;
    white-space: normal;
    overflow-wrap: break-word;
    align-items: start;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.event-schedule-entry-lane-secondary-infos {
    min-width: 80px;
    justify-content: center;
    padding: 0 4px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.event-schedule-entry-swimmer-details, .event-schedule-entry-relay-swimmer-details {
    color: #616161;
}

.event-schedule-entry-lane-actions {
    display: flex;
    padding: 0 16px;
    align-items: center;
}

.event-schedule-entry-time, .result-entry-swim-time {
    font-size: 1em;
    color: var(--primary);
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 600;
    padding-left: 4px;
    display: flex;
    align-items: center;
}

.swimmer-entry-time span.time {
    font-size: 1em;
    color: var(--primary);
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.event-schedule-entry-time .material-symbols-outlined {
    font-size: 16px;
}

/* ===== Swimmer Schedule screen ==== */
.swimmer-info {
    margin-bottom: 40px;
}

.swimmer-name {
    text-align: center;
    font-size: 2em;
    font-weight: 900;
}

.swimmer-general-info {
    text-align: center;
}

.swimmer-club-name {
    text-align: center;
    font-size: 1.4em;
    font-style: italic;
    font-weight: 500;
}

/* ===== Race Result screen ==== */

.race-round-header {
    display: flex;
    margin: 0 10px;
    align-items: center;
}

.race-round-header h3 {
    font-weight: 700;
    font-size: 1.5em;
    flex-grow: 1;
    min-width: 0;
    overflow-wrap: break-word;
    white-space: normal;
}


.race-round-time {
    display: flex;
    flex-direction: column;
}

.round-race-date, .round-race-start-time {
    display: flex;
    align-items: center;
    gap: 4px;
}

.race-round-header-icon {
    font-size: 16px;
    display: block;
    color: #616161;
}

.result-entry-main {
    display: flex;
    width: 100%;
}

.result-entry-main-infos {
    flex-grow: 1;
    min-width: 0;
    margin: 0 16px;
}

.result-entry-swimmer-details {
    color: #616161;
    white-space: normal;
    overflow-wrap: break-word;
}

.result-entry-placing {
    font-weight: 900;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-entry-actions {
    display: flex;
    align-items: center;
    margin-left: 16px;
}

.result-entry-points {
    font-size: 0.88em;
    padding-left: 4px;
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
}

.result-entry-points .points {
    font-family: "Figtree", sans-serif;
    font-size: 0.8em;
    color: #616161;
}

.result-entry-secondary-infos {
    display: flex;
    justify-content:center;
    flex-direction: column;
}

.result-item-title {
    flex-grow: 1;
}

.result-item-info {
    display: flex;
    align-items: center;
}

.result-item-details {
    display: flex;
    font-style: italic;
    font-size: 0.8em;
    align-items: center;
}

.schedule-item-details {
    display: flex;
    font-style: italic;
    flex-direction: column;
    align-items: start;
}

.result-item-details-available, .schedule-item-details-available {
    color: #1B5E20;
}

.result-item-title-available {
    color: #1B5E20;
}

.result-item-title-unavailable, .schedule-item-title-unavailable {
    color: #616161;
}

.result-item-title-unavailable .schedule-item-title {
    font-weight: normal !important;
}

.result-item-details-unavailable {
    font-style: italic;
    color: #EF6C00;
    font-size: 1em;
}