/*
 * Český tenis (cesky-tenis.cz) color re-theme.
 * Overrides the Metronic --tw-primary / --tw-brand custom properties defined
 * in assets/css/styles.css (:root/.light and .dark blocks) — every component
 * in that vendor stylesheet reads color through these variables, so this is
 * the single place to swap the palette. Future sport-specific subdomain
 * themes can follow the same pattern with their own override block.
 */
:root, .light {
  --tw-primary: #FF6032;
  --tw-primary-active: #d34117;
  --tw-primary-light: #E6ECEF;
  --tw-primary-clarity: rgba(4, 51, 73, 0.20);
  --tw-primary-inverse: #ffffff;

  --tw-brand: #FF6032;
  --tw-brand-active: #D34117;
  --tw-brand-light: #FFEFEA;
  --tw-brand-clarity: rgba(255, 96, 50, 0.20);
  --tw-brand-inverse: #ffffff;

  --tw-primary-box-shadow: 0px 4px 12px 0px rgba(4, 51, 73, 0.35);

  --tw-page-bg: rgb(4, 51, 73);
  --tw-page-bg-dark: rgb(1, 22, 32);
  --tw-content-bg: rgb(223, 234, 227);
}

/*
 * The sidebar (#sidebar) keeps the navy --tw-page-bg regardless of light/dark
 * mode, but its text/icon/hover colors come from the same --tw-gray-* and
 * --tw-light vars the rest of the light theme uses for a white background —
 * unreadable on navy. Re-point them at the vendor's own .dark palette
 * (assets/css/styles.css) scoped to #sidebar, so sidebar contrast stays
 * correct in both light and dark mode without duplicating color choices.
 */
#sidebar {
  --tw-gray-100: #1B1C22;
  --tw-gray-200: #26272F;
  --tw-gray-300: #363843;
  --tw-gray-400: #464852;
  --tw-gray-500: #636674;
  --tw-gray-600: #808290;
  --tw-gray-700: #9A9CAE;
  --tw-gray-800: #B5B7C8;
  --tw-gray-900: #F5F5F5;
  --tw-light: #1F212A;
}

.dark {
  --tw-primary: #d34117;
  --tw-primary-active: #FF6032;
  --tw-primary-light: #12303D;
  --tw-primary-clarity: rgba(27, 144, 208, 0.20);
  --tw-primary-inverse: #ffffff;

  --tw-brand: #FF7A50;
  --tw-brand-active: #FF6032;
  --tw-brand-light: #2B1F1A;
  --tw-brand-clarity: rgba(255, 122, 80, 0.20);
  --tw-brand-inverse: #ffffff;

  --tw-primary-box-shadow: 0px 4px 12px 0px rgba(27, 144, 208, 0.35);
}

.text-red-700 {
    background-color: brown;
    color: white;
    font-weight: bold;
    padding: 3pt;
    border-radius: 5px;
    text-align: center;
    margin: 2pt 0;
    font-size: 10pt;
}

.user-search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin-top: 2px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
    max-height: 240px;
    overflow-y: auto;
}

.user-search-suggestion {
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.85rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.user-search-suggestion:last-child {
    border-bottom: none;
}

.user-search-suggestion:hover {
    background: #f8fafc;
}

.user-search-suggestion__name {
    font-weight: 600;
    color: #0f172a;
}

.user-search-suggestion__email {
    font-size: 0.8rem;
    color: #475569;
}

.user-search-suggestion--empty,
.user-search-suggestion--loading,
.user-search-suggestion--error {
    cursor: default;
    font-style: italic;
    color: #475569;
}

.user-search-suggestion--error {
    color: #b91c1c;
}
/* Marketing template previews: portrait/square/landscape thumbnails keep their aspect ratio. */
.marketing-preview {
    object-fit: contain;
}