/* SmartScore Admin theme: Bootstrap 5.3.3 adapted to the look of the new Clubs site (fonts, buttons, tabs) with SmartScore's own theme colour #00a0df.
   Values copied from clubs.worldwaterskiers.com new-build/public/assets/css/app.css; only the colour differs.
   Loaded after site.css so it wins. */

:root {
  --ss-primary:        #00a0df; /* SmartScore theme colour (Clubs uses #2563eb) */
  --ss-primary-rgb:    0, 160, 223;
  --ss-primary-hover:  #0090cb; /* about 10% darker */
  --ss-primary-active: #0080b3; /* about 20% darker */

  /* Bootstrap's own tokens, so every component that reads them follows */
  --bs-primary: #00a0df;
  --bs-primary-rgb: 0, 160, 223;
  --bs-link-color: #00a0df;
  --bs-link-color-rgb: 0, 160, 223;
  --bs-link-hover-color: #0080b3;
  --bs-link-hover-color-rgb: 0, 128, 179;
  --bs-body-color: #444;
  --bs-body-font-size: .875rem;
  --bs-secondary-color: #64748b;
  --ss-label-color: #64748b;
  --ss-field-bg: #f4f5f7;
}

/* ── Font ─────────────────────────────────────────────────────────────────── */
body {
  --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-family: var(--bs-body-font-family);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
/* Bootstrap's own --bs-btn-* variables, so hover / active / disabled / focus all follow. */
.btn { --bs-btn-border-width: 2px; }

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ss-primary);
  --bs-btn-border-color: var(--ss-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ss-primary-hover);
  --bs-btn-hover-border-color: var(--ss-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--ss-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ss-primary-active);
  --bs-btn-active-border-color: var(--ss-primary-active);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--ss-primary);
  --bs-btn-disabled-border-color: var(--ss-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--ss-primary);
  --bs-btn-border-color: var(--ss-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ss-primary);
  --bs-btn-hover-border-color: var(--ss-primary);
  --bs-btn-focus-shadow-rgb: var(--ss-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ss-primary);
  --bs-btn-active-border-color: var(--ss-primary);
  --bs-btn-disabled-color: var(--ss-primary);
  --bs-btn-disabled-border-color: var(--ss-primary);
}
/* The neutral button: Clubs' .btn-outline-secondary (and .btn-light, which looks the same) */
.btn-outline-secondary,
.btn-light {
  --bs-btn-color: #64748b;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #e2e8f0;
  --bs-btn-border-radius: 20px;
  --bs-btn-font-weight: 500;
  --bs-btn-font-size: .82rem;
  --bs-btn-hover-color: #0f172a;
  --bs-btn-hover-bg: #f1f5f9;
  --bs-btn-hover-border-color: #e2e8f0;
  --bs-btn-focus-shadow-rgb: 100, 116, 139;
  --bs-btn-active-color: #0f172a;
  --bs-btn-active-bg: #f1f5f9;
  --bs-btn-active-border-color: #e2e8f0;
  --bs-btn-disabled-color: #64748b;
  --bs-btn-disabled-border-color: #e2e8f0;
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  font-weight: var(--bs-btn-font-weight);
  font-size: var(--bs-btn-font-size);
}
.btn-light:hover, .btn-light:focus, .btn-light:active, .btn-light.active {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
/* A radio or check button group (btn-check) that is selected takes the theme colour */
.btn-check:checked + .btn-light,
.btn-check:checked + .btn-dark {
  background-color: var(--ss-primary);
  border-color: var(--ss-primary);
  color: #fff;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
/* Segmented pill tabs (Clubs' .nav-tabs). The active tab is the theme colour. */
.nav-tabs { border-bottom: none; flex-wrap: wrap; gap: .5rem; }
.nav-tabs .nav-item { margin-bottom: 0; }
.nav-tabs .nav-link {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 2px solid #e2e8f0; border-radius: 20px;
  background: #fff; color: #64748b;
  padding: .28rem .9rem; font-weight: 500; font-size: .82rem;
  transition: background-color .15s, color .15s, border-color .15s;
}
.nav-tabs .nav-link:hover { background: #f1f5f9; color: #0f172a; }
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover {
  background: var(--ss-primary); border-color: var(--ss-primary); color: #fff;
}

/* Pill tabs (Clubs' .nav-pills: the competition tabs, lake tabs and so on). Active = theme colour, filled.
   Not for the vertical side menu (.flex-column), which keeps its own look from site.css. */
.nav-pills:not(.flex-column) .nav-link {
  background: #f0f2f5; color: #999;
  border-radius: 50rem !important; font-size: .875rem;
}
.nav-pills:not(.flex-column) .nav-link:hover { background: #e9ecef; color: #666; }
.nav-pills:not(.flex-column) .nav-link.active,
.nav-pills:not(.flex-column) .show > .nav-link {
  background: var(--ss-primary) !important; color: #fff !important;
}


/* Bootstrap 5 gives a navbar no side padding of its own (4 did), so the fixed page title bar on the tournament pages touched both edges */
.navbar-example2.navbar { padding-left: 1.5rem; padding-right: 1.5rem; }   /* the title bar only, not the side menu */
.navbar-example2 .nav-pills { flex-wrap: nowrap; overflow-x: auto; }
.navbar-example2 .navbar-brand { margin-right: 1rem; }

/* page title bar pills (Comp. Name, Disciplines ...): a little smaller, with a gap between them */
.navbar-example2 .nav-pills { gap: 8px; }
.navbar-example2 .nav-pills .nav-link { padding: 0.25rem 0.8rem; font-size: 0.85rem; }


/* Side menu in the style of the Hub admin: a flat list, no box behind each item, a soft highlight for the current page, smaller sub-items */
.side-menu { padding: 3rem 0 1rem !important; overflow-y: auto; }
.side-menu .nav-pills .nav-link {
  display: flex; align-items: center; gap: .6rem; position: static;
  color: rgba(200, 207, 224, .85);
  background: transparent !important;
  padding: .5rem .9rem; margin: 1px .5rem;
  border-radius: 6px; font-size: .875rem;
  transition: background .15s, color .15s;
}
.side-menu .nav-pills .nav-link:hover { background: rgba(255, 255, 255, .1) !important; color: #fff; }
.side-menu .nav-pills .nav-link.nav-link-active,
.side-menu .nav-pills .nav-link.active,
.side-menu .nav-pills .show > .nav-link { background: rgba(255, 255, 255, .12) !important; color: #fff; }
.side-menu .nav-pills .bi { position: static !important; top: auto !important; left: auto !important; font-size: 1rem; opacity: .9; }
.side-menu .nav-pills .nav-link.sub-nav-link {
  color: rgba(200, 207, 224, .65); font-size: .8rem;
  padding: .32rem 1rem .32rem 2.4rem; margin: 1px .5rem;
}
.side-menu .nav-pills .nav-link.sub-nav-link:hover,
.side-menu .nav-pills .nav-link.sub-nav-link.active { background: rgba(255, 255, 255, .08) !important; color: #fff !important; }
.side-menu .nav-pills br { display: none; }
.side-menu .nav-pills > .py-4, .side-menu .nav-pills > .ps-1.py-4, .side-menu .nav-pills .py-4 { padding-top: .15rem !important; padding-bottom: .35rem !important; }
.side-menu .nav-pills .btn { margin: .4rem .5rem .4rem 1.4rem; align-self: flex-start; }
.side-menu .nav-pills .nav-link,
.side-menu .nav-pills .nav-link:hover,
.side-menu .nav-pills .nav-link:focus { text-decoration: none; }


/* remove-boat icon beside a tow boat row: just an icon, not a button */
.tow-remove { background: none; border: 0; padding: .25rem; line-height: 1; font-size: 1.05rem; color: #b42318; opacity: .65; cursor: pointer; }
.tow-remove:hover, .tow-remove:focus { opacity: 1; outline: none; }

/* a fixed (disabled) drop-down shows its value but no arrow, so it does not look selectable */
.edit-content-section select:disabled, .edit-content-section .form-select:disabled { background-image: none; padding-right: .75rem; color: #6b7280; }

/* Field labels, as on Clubs: small capitals, spaced out, close above the field. Not checkbox / radio labels (.form-check-label), not button labels,
   and not the description text beside a card (.col-form-label in a column of a row). */
label.form-label,
label:not([class]),
label.col-12.col-form-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ss-label-color);
    margin-bottom: .3rem;
}
label.col-12.col-form-label { padding: 0 0 .3rem; }

/* Table column headings in the same style as the field labels (small capitals, spaced out, semi-bold, grey-blue) */
table thead th,
.table > thead > tr > th,
table.dataTable > thead > tr > th {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #64748b;
}

/* Card sections (Competition Setup, Sanction Data ...): read-only values on a light grey, Clubs-style labels, rounded Edit buttons, light dividers.
   Used by the tournament pages whose cards have a .content-section (view) and an .edit-content-section (Edit form). */

/* read-only values: no border, a very light grey background, so they do not look like input fields (the Edit forms are unchanged) */
.content-section .form-control { border: 0; background-color: var(--ss-field-bg); background-image: none; box-shadow: none; border-radius: 6px; min-height: 38px; padding-top: .2rem; padding-bottom: .2rem; display: flex; align-items: center; flex-wrap: wrap; }
.content-section .input-group > .form-control { border-radius: 6px !important; }
/* row labels in the style of the Clubs form labels (small, capitals, spaced out) */
.content-section .input-group-text { background: transparent; border: 0; padding-left: 0; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #64748b; }
/* the labels of the Edit form's fields: same type style (their boxes stay) */
.edit-content-section .input-group-text { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #64748b; }
.content-section .table-bordered { border: 0; background: var(--ss-field-bg); border-radius: 6px; overflow: hidden; margin-bottom: 0; }
.content-section .table-bordered > :not(caption) > * > * { border-width: 0; background: transparent; }
/* badges that wrap onto a second line get a gap between them */
.content-section .form-control .badge { margin: .1rem .25rem .1rem 0; padding-top: .22em; padding-bottom: .22em; }
.content-section .table-bordered tr { border: 0; }
/* the tick / radio areas in the Edit forms: a rounded outer border, thin lines between cells */
.edit-content-section .table-bordered { border: 1px solid #dee2e6; border-radius: 6px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.edit-content-section .table-bordered > :not(caption) > * > * { border-width: 0 0 1px 0; border-style: solid; border-color: #dee2e6; }
.edit-content-section .table-bordered > :not(caption) > * > * + * { border-left-width: 1px; }
.edit-content-section .table-bordered > :last-child > :last-child > * { border-bottom-width: 0; }
.edit-content-section .table-bordered tr { border: 0; }
.content-section .table-bordered th { font-size: .75rem; font-weight: 600; color: #8a93a3; border-bottom: 1px solid #e6e8ec !important; }

/* card headings: smaller title, a smaller rounded Edit / Cancel / Update button, a lighter divider line */
.content-section h4, .edit-content-section h4 { font-size: 1.1rem; font-weight: 600; line-height: 30px; margin: 0; }
.content-section .btn, .edit-content-section .btn { padding: .2rem .85rem; font-size: .8rem; border-radius: 50rem; }
.content-section hr, .edit-content-section hr { border-color: #eceef1; opacity: 1; margin: .6rem 0 .9rem; }

/* definition lists (Sanction Details): the term is a label, the value sits on the light grey like the other cards */
.content-section dl.row > dt { display: flex; align-items: center; min-height: 38px; margin-bottom: .5rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #64748b; }
.content-section dl.row > dd { display: flex; align-items: center; flex-wrap: wrap; min-height: 38px; margin-bottom: .5rem; padding: .2rem .75rem; background: var(--ss-field-bg); border-radius: 6px; }

/* the title bar pills: no underline; a jump to a card stops below the fixed header */
.navbar-example2 .nav-pills .nav-link, .navbar-example2 .nav-pills .nav-link:hover, .navbar-example2 .nav-pills .nav-link:focus { text-decoration: none; white-space: nowrap; }
html { scroll-behavior: smooth; }
.rounded-xl[id] { scroll-margin-top: 130px; }

/* a field whose input is wrapped in extra divs (the officials search) is not reached by Bootstrap's "join the label and the input" rule: square off its left corners so it joins the label */
.edit-content-section .input-group > .flex-grow-1 .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }


/* countdown boxes on the tournament banner and the home cards */
.countdown-timer {
color: black;
}
.countdown-timer .digit {
display: inline-block;
margin: 0 1px;
background: #fff;
border-radius: 4px;
line-height: 40px;
min-height: 40px;
width: 28px;
min-width: 28px;
text-align: center;
color: black;
font-weight: bold;
font-size: 20px;
}


/* ── Small round icon button (Edit / Delete on a table row). Shown only while the row is hovered. ── */
.btn-icon {
  --bs-btn-padding-x: 0; --bs-btn-padding-y: 0; --bs-btn-font-size: .65rem; --bs-btn-border-width: 0;
  --bs-btn-border-radius: 50rem; --bs-btn-bg: #eef0f3; --bs-btn-color: #64748b;
  --bs-btn-hover-bg: #e2e5ea; --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: #64748b;
  --bs-btn-active-bg: #e2e5ea; --bs-btn-active-border-color: transparent;
  width: 20px; height: 20px; margin: -3px 0 -3px 4px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
}
.btn-icon.btn-outline-danger { --bs-btn-color: #c0392b; --bs-btn-hover-color: #c0392b; --bs-btn-hover-bg: #e2e5ea; --bs-btn-active-color: #c0392b; --bs-btn-active-bg: #e2e5ea; }
.table-hover > tbody > tr:not(:hover) .btn-icon { display: none; }

/* Tables with rows: thin lines between rows, no vertical lines (the participants list) */
#participantsTable.table-bordered > :not(caption) > * > * { border-width: 0 0 1px; border-color: #eef0f3; vertical-align: middle; }
#compactTable > :not(caption) > * > * { border-width: 0 0 1px; border-color: #eef0f3; }
.table-hover > tbody > tr:hover > * { --bs-table-hover-bg: #f6f7f9; }

/* Section headings inside a form or panel (h6) in the same style as the field labels */
h6 { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ss-label-color); }

/* Validated fields keep the green / red border but not Bootstrap's tick / cross icon: it sat on top of the clear and show-password buttons in the login boxes */
.was-validated .form-control:valid, .form-control.is-valid,
.was-validated .form-control:invalid, .form-control.is-invalid {
  background-image: none;
  padding-right: .75rem;
}