/*
 * Č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;
}

/* ------------------------------------------------------------------
 * Alert (notice boxes, flash messages)
 * Metronic Tailwind does not ship an .alert component; templates use it
 * for flash messages and inline notices. Colors come from Metronic tokens,
 * so light/dark mode follows the theme.
 * ------------------------------------------------------------------ */
.alert {
    display: block;
    padding: 0.875rem 1rem;
    border: 1px solid var(--tw-gray-200);
    border-radius: 0.75rem;
    background-color: var(--tw-gray-100);
    color: var(--tw-gray-900);
    font-size: 0.875rem;
    line-height: 1.375rem;
}
.alert a { color: inherit; font-weight: 600; text-decoration: underline; }
.alert-success { background-color: var(--tw-success-light); border-color: var(--tw-success-clarity); }
.alert-danger  { background-color: var(--tw-danger-light);  border-color: var(--tw-danger-clarity); }
.alert-warning { background-color: var(--tw-warning-light); border-color: var(--tw-warning-clarity); }
.alert-info    { background-color: var(--tw-info-light);    border-color: var(--tw-info-clarity); }

/* ------------------------------------------------------------------
 * Tailwind utility fallbacks
 * The Metronic CSS is precompiled (no Tailwind build step), so utilities
 * that the demo never used are missing. These are the ones our templates
 * rely on, with Tailwind's own values and breakpoints.
 * Check before using a new utility:  grep 'my-class' htdocs/assets/css/styles.css
 * ------------------------------------------------------------------ */
.overflow-x-auto { overflow-x: auto; }
.m-4 { margin: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-6 { margin-top: 1.5rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
.self-start { align-self: flex-start; }
.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-3xl { max-width: 48rem; }
.font-bold { font-weight: 700; }
.text-5xl { font-size: 3rem; line-height: 1; }
.tracking-wide { letter-spacing: 0.025em; }
.list-disc { list-style-type: disc; padding-left: 1.25rem; }
.opacity-60 { opacity: 0.6; }
.transition-colors { transition-property: color, background-color, border-color; transition-duration: 150ms; }
.hover\:border-primary:hover { border-color: var(--tw-primary); }
.w-\[150px\] { width: 150px; }

@media (min-width: 768px) {
    .md\:table-cell { display: table-cell; }
    .md\:items-end { align-items: flex-end; }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-\[1fr_auto\] { grid-template-columns: 1fr auto; }
}
@media (min-width: 1024px) {
    .lg\:table-cell { display: table-cell; }
}
@media (min-width: 1280px) {
    .xl\:col-span-2 { grid-column: span 2 / span 2; }
}