/* ===========================
   Taikai - Karate Tournament Management
   ===========================

   Responsive breakpoints — single source of truth.

   Mirrors Tailwind's default scale. Plain CSS can't put custom
   properties inside @media queries (the spec doesn't resolve var() in
   query conditions), so these are documented here as the canonical
   numeric values to use throughout. The codebase is desktop-first
   (max-width queries), so the "max-*" forms are the ones we use.

       sm:  min-width: 640px      max-sm:  max-width: 639px
       md:  min-width: 768px      max-md:  max-width: 767px
       lg:  min-width: 1024px     max-lg:  max-width: 1023px
       xl:  min-width: 1280px     max-xl:  max-width: 1279px
       2xl: min-width: 1536px     max-2xl: max-width: 1535px

   When adding a new @media query, pick the closest value from the
   table above rather than introducing a new threshold.
*/

/* --- CSS Variables (Light Theme) --- */
:root,
[data-theme="light"] {
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --secondary-color: #64748b;
    --danger-color: #dc2626;
    --danger-hover: #b91c1c;
    --success-color: #16a34a;
    --warning-color: #d97706;
    --bg-color: #f8fafc;
    --text-color: #1e293b;
    --heading-color: #0f172a;
    --card-bg: #ffffff;
    --border-color: #9ca3af;
    --input-bg: #ffffff;
    --input-border: #9ca3af;
    --link-color: #2563eb;
    --link-hover: #1d4ed8;
    --muted-text: #94a3b8;
    --table-stripe: #f1f5f9;

    /* Sidebar - blue-grey */
    --sidebar-bg: #e8edf4;
    --sidebar-text: #3b4a5c;
    --sidebar-heading: #6b7a8d;
    --sidebar-hover: #dae1eb;
    --sidebar-active-bg: #d1d5db;
    --sidebar-active-text: #1e293b;
    --sidebar-border: #cdd5e0;
    --sidebar-brand-color: #1e293b;
    --sidebar-user-bg: #dae1eb;

    /* Badge */
    --badge-kata-bg: #dbeafe;
    --badge-kata-text: #1e40af;
    --badge-kumite-bg: #fce7f3;
    --badge-kumite-text: #9d174d;
    --badge-pending-bg: #fef3c7;
    --badge-pending-text: #92400e;
    --badge-confirmed-bg: #d1fae5;
    --badge-confirmed-text: #065f46;

    /* Custom select arrow — Safari needs appearance:none + a manual chevron
       to render <select> consistently with Chrome. SVG colour matches the
       theme's --secondary-color so it stays legible in both modes. */
    --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/></svg>");
}

/* --- Dark Theme --- */
[data-theme="dark"] {
    --primary-color: #3b82f6;
    --primary-hover: #60a5fa;
    --secondary-color: #94a3b8;
    --danger-color: #ef4444;
    --danger-hover: #f87171;
    --success-color: #22c55e;
    --warning-color: #f59e0b;
    --bg-color: #0f172a;
    --text-color: #e2e8f0;
    --heading-color: #f1f5f9;
    --card-bg: #1e293b;
    --border-color: #334155;
    --input-bg: #1e293b;
    --input-border: #475569;
    --link-color: #60a5fa;
    --link-hover: #93bbfd;
    --muted-text: #64748b;
    --table-stripe: #1e293b;

    --sidebar-bg: #0b1120;
    --sidebar-text: #94a3b8;
    --sidebar-heading: #64748b;
    --sidebar-hover: #1e293b;
    --sidebar-active-bg: #334155;
    --sidebar-active-text: #f1f5f9;
    --sidebar-border: #1e293b;
    --sidebar-brand-color: #e2e8f0;
    --sidebar-user-bg: #1e293b;

    --badge-kata-bg: #1e3a5f;
    --badge-kata-text: #93c5fd;
    --badge-kumite-bg: #4a1942;
    --badge-kumite-text: #f9a8d4;
    --badge-pending-bg: #451a03;
    --badge-pending-text: #fcd34d;
    --badge-confirmed-bg: #052e16;
    --badge-confirmed-text: #6ee7b7;

    /* Lighter chevron colour for dark mode (matches --secondary-color). */
    --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/></svg>");
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color);
    background: var(--bg-color);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color);
    line-height: 1.3;
}

h1 { font-size: 1.75rem; margin-bottom: 1rem; }
h2 { font-size: 1.375rem; margin-bottom: 0.75rem; }
h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover);
}

/* --- Layout: App (sidebar + main) --- */
.app-layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 320px;
    min-width: 320px;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    transition: transform 0.3s ease;
}

.app-right-panel {
    flex: 1;
    min-width: 0;
    margin-left: 320px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.3s ease;
}

.app-main {
    flex: 1;
}

.content-area {
    padding: 2rem;
    overflow-x: hidden;
}

.content-middle {
    flex: 1;
    min-width: 0;
}

/* --- Top Navbar --- */
.top-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    height: 52px;
    min-height: 52px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 50;
}

.top-nav-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Wordmark in the topbar — only rendered when the sidebar is off-canvas
   and currently closed, so the brand is always visible to a logged-in
   user (the sidebar carries the brand otherwise). The default state hides
   it; the responsive block at max-xl reveals it, and an open overlay
   (body.sidebar-open) tucks it away again. */
.top-nav-brand {
    display: none;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--heading-color);
    text-decoration: none;
    /* Sits clear of the fixed sidebar-toggle hamburger. The 2.25rem leaves
       roughly the same gap on the left (between the hamburger's right
       edge and the brand) as the topbar's right padding, so the strip
       reads symmetrically. Applies at every viewport where the brand
       renders — the rule is intentionally outside any media query. */
    margin-left: 2.25rem;
    /* Mirror the resting horizontal padding of .top-nav-link so the gap
       between TAIKAI and the next item looks intentional even when no
       button is hovered. */
    padding: 0.4rem 0.65rem 0.4rem 0;
}
.top-nav-brand:hover { color: var(--primary-color); }

.top-nav-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.top-nav-right {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.top-nav-link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 0.375rem;
    transition: background 0.15s, color 0.15s;
}

.top-nav-link:hover {
    background: var(--bg-color);
    color: var(--text-color);
}

.top-nav-link.active {
    color: var(--primary-color);
}

.top-nav-link svg {
    width: 16px;
    height: 16px;
}

.top-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 0.375rem;
    transition: background 0.15s, color 0.15s;
}

.top-nav-btn:hover {
    background: var(--bg-color);
    color: var(--text-color);
}

.top-nav-btn svg {
    width: 18px;
    height: 18px;
}

/* User dropdown */
.top-nav-dropdown {
    position: relative;
}

.top-nav-user-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem 0.3rem 0.3rem;
    background: none;
    border: 1px solid transparent;
    color: var(--text-color);
    cursor: pointer;
    border-radius: 0.5rem;
    font: inherit;
    font-size: 0.85rem;
    transition: background 0.15s, border-color 0.15s;
}

.top-nav-user-btn:hover {
    background: var(--bg-color);
    border-color: var(--border-color);
}

.top-nav-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.top-nav-username {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 220px;
    white-space: nowrap;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.35rem 0;
    z-index: 200;
}

.top-nav-dropdown-menu.open {
    display: block;
}

.top-nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.825rem;
    color: var(--text-color);
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: 0.825rem;
    transition: background 0.1s;
}

.top-nav-dropdown-item:hover {
    background: var(--bg-color);
}

.top-nav-dropdown-item svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}

.top-nav-dropdown-danger {
    color: var(--danger-color);
}

.top-nav-dropdown-danger:hover {
    background: rgba(239, 68, 68, 0.08);
}

.top-nav-dropdown-danger svg {
    color: var(--danger-color);
}

.top-nav-dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.25rem 0;
}

/* --- Sidebar Components --- */
.sidebar-brand {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-logo {
    color: var(--sidebar-brand-color);
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.02em;
}

.sidebar-user-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    color: var(--sidebar-text);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.sidebar-user-toggle:hover {
    background: var(--sidebar-hover);
}

.sidebar-user-toggle .chevron {
    margin-left: auto;
    transition: transform 0.2s;
}

.sidebar-user-toggle.open .chevron {
    transform: rotate(180deg);
}

.sidebar-user-menu {
    display: none;
    background: var(--sidebar-user-bg);
    border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-user-menu.open {
    display: block;
}

.sidebar-user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--sidebar-text);
    font-size: 0.8rem;
    text-decoration: none;
    cursor: pointer;
}

.sidebar-user-menu-item:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text);
}

.sidebar-user-menu-item-danger:hover {
    color: var(--danger-color);
}

.sidebar-section {
    padding: 0.5rem 0;
}

.sidebar-heading {
    padding: 0.5rem 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sidebar-heading);
}

.sidebar-divider {
    border-top: 1px solid var(--sidebar-border);
    margin: 0 1rem;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--sidebar-text);
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: 0.375rem;
    margin: 0.125rem 0.5rem;
    transition: background 0.15s;
}

.sidebar-item:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text);
}

.sidebar-item.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
}

.sidebar-item svg,
.sidebar-user-toggle svg,
.sidebar-user-menu-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.sidebar-item-muted {
    color: var(--sidebar-heading);
    font-size: 0.8rem;
}

.sidebar-subheading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 1rem;
    margin: 0.25rem 0 0;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sidebar-heading);
    cursor: pointer;
    user-select: none;
}

.sidebar-subheading:hover {
    color: var(--sidebar-text);
}

.sidebar-chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.sidebar-subheading.collapsed .sidebar-chevron {
    transform: rotate(-90deg);
}

.chevron.rotated {
    transform: rotate(180deg);
}

.sidebar-collapsible {
    overflow: hidden;
    max-height: 500px;
    transition: max-height 0.25s ease;
}

.sidebar-collapsible.collapsed {
    max-height: 0;
}

/* --- Sidebar Toggle / Close --- */
.sidebar-toggle,
.sidebar-close {
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 200;
    background: var(--card-bg);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    padding: 0 0.5rem;
    cursor: pointer;
    transition: left 0.3s ease, opacity 0.2s ease;
}

.sidebar-toggle {
    display: none;
    top: 25px;
    left: 1px;
    width: auto;
    height: 48px;
    border-radius: 0 0.375rem 0.375rem 0;
}

.sidebar-close {
    display: flex;
    top: 25px;
    left: 280px;
    width: auto;
    height: 48px;
    border-radius: 0.375rem 0 0 0.375rem;
}

.sidebar-close svg,
.sidebar-toggle svg {
    width: 16px;
    height: 16px;
}

/* Desktop: collapsed sidebar */
body.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
}

body.sidebar-collapsed .sidebar-close {
    left: 0;
    opacity: 0;
    pointer-events: none;
}

body.sidebar-collapsed .sidebar-toggle {
    display: flex;
}

body.sidebar-collapsed .app-right-panel {
    margin-left: 0;
}

/* --- Auth Layout (pre-login) --- */
.auth-main {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.auth-container {
    width: 100%;
    max-width: 420px;
}

.auth-title {
    text-align: center;
    margin-bottom: 0.25rem;
}

.auth-subtitle {
    text-align: center;
    color: var(--secondary-color);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.auth-logo {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.auth-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
}

.auth-brand {
    text-align: center;
}

.auth-brand-title {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.auth-brand-tagline {
    font-size: 1.1rem;
    color: var(--secondary-color);
    margin-bottom: 2rem;
}

.auth-brand-image {
    width: 100%;
    max-width: 280px;
    border-radius: 40px;
}

/* --- Tournament card (public listing) --- */
.tournament-card {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.tournament-card-banner {
    flex: 0 1 40%;
    min-width: 180px;
    max-width: 500px;
}

.tournament-card-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tournament-card-body {
    flex: 1;
    display: flex;
    align-items: center;
}

.tournament-card-actions {
    flex-shrink: 0;
    margin-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.tournament-detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

/* Two-column page grids that stack on phones. Use .split-grid for equal
   columns, add .split-2-1 for an asymmetric primary/sidebar split. */
.split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.split-grid.split-2-1 {
    grid-template-columns: 2fr 1fr;
}
.split-grid > * { min-width: 0; }

/* Public schedule rings — count of columns is set per-day via inline
   --cols (1 or 2). Stacks to a single column on phones so individual
   ring cards aren't squeezed into <200px-wide cells. */
.schedule-rings {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
}

.tournament-banner-bleed {
    margin: -2rem -2rem 1.5rem -2rem;
    overflow: hidden;
    position: relative;
}

/* --- Home hero --- */
.home-hero {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3rem;
    align-items: center;
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.home-hero-image img {
    width: 280px;
    height: 280px;
    border-radius: 40px;
    display: block;
}

.home-hero-content h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.home-hero-tagline {
    font-size: 1.25rem;
    color: var(--secondary-color);
    margin-bottom: 2rem;
}

.home-hero-description {
    color: var(--secondary-color);
    margin-bottom: 2rem;
}

/* --- Public Layout --- */
.public-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.public-header {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    height: 52px;
    min-height: 52px;
}

.public-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.public-logo {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
    text-decoration: none;
}

.public-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.public-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    border-radius: 0.375rem;
    transition: background 0.15s, color 0.15s;
}

.public-nav-toggle:hover {
    background: var(--bg-color);
    color: var(--text-color);
}

.public-nav-toggle svg {
    width: 22px;
    height: 22px;
}

.public-nav-link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.65rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 0.375rem;
    transition: background 0.15s, color 0.15s;
}

.public-nav-button {
    background: none;
    border: none;
    cursor: pointer;
}

.public-nav-link:hover {
    background: var(--bg-color);
    color: var(--text-color);
}

.public-nav-link svg {
    width: 16px;
    height: 16px;
}

.public-main {
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    width: 100%;
    box-sizing: border-box;
}

/* --- Tab Navigation --- */
.tab-nav {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    /* A visible thin scrollbar gives a discoverable affordance that the
       strip is scrollable. Firefox: scrollbar-width; WebKit: ::-webkit-… */
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}
.tab-nav::-webkit-scrollbar { height: 4px; }
.tab-nav::-webkit-scrollbar-track { background: transparent; }
.tab-nav::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

/* Wrapper added by ui.js around every .tab-nav. The fade gradients on
   the left/right edges are toggled via .has-overflow-{left,right}
   classes so they only appear when there's actually content scrolled
   off-screen on that side. */
.tab-nav-wrap {
    position: relative;
}
.tab-nav-wrap::before,
.tab-nav-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0.25rem; /* clear the visible scrollbar */
    width: 1.75rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.tab-nav-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-color), transparent);
}
.tab-nav-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-color), transparent);
}
.tab-nav-wrap.has-overflow-left::before,
.tab-nav-wrap.has-overflow-right::after {
    opacity: 1;
}

.tab-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 0.375rem;
    border: 1px solid var(--border-color);
    background: transparent;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.tab-nav-item:hover {
    color: var(--text-color);
    background: var(--hover-bg);
    border-color: var(--text-muted);
}

.tab-nav-item.active {
    color: var(--primary-color);
    background: rgba(37, 99, 235, 0.1);
    border-color: var(--primary-color);
}

.tab-nav-item i,
.tab-nav-item svg {
    width: 15px;
    height: 15px;
}

.public-footer {
    text-align: center;
    padding: 2rem;
    color: var(--muted-text);
    font-size: 0.8rem;
    border-top: 1px solid var(--border-color);
}

.public-footer-links {
    margin-top: 0.5rem;
}

.public-footer-links a {
    color: var(--muted-text);
    text-decoration: none;
}

.public-footer-links a:hover {
    color: var(--text-color);
    text-decoration: underline;
}

.public-footer-sep {
    margin: 0 0.5rem;
}

/* --- Legal Pages --- */
.legal-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.legal-header {
    margin-bottom: 1.5rem;
}

.legal-header h1 {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

.legal-content h2 {
    font-size: 1.2rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border-color);
}

.legal-content h3 {
    font-size: 1.05rem;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.legal-content p {
    margin-bottom: 0.75rem;
    line-height: 1.7;
}

.legal-content ul {
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
}

.legal-content li {
    margin-bottom: 0.4rem;
    line-height: 1.6;
}

/* --- Cards --- */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    overflow: hidden;
}

.card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header h2,
.card-header h3 {
    margin: 0;
}

.card-body {
    padding: 1.25rem;
}

/* --- Forms --- */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--heading-color);
}

.form-group input:not([type="radio"]):not([type="checkbox"]),
.form-group select,
.form-group textarea,
select:not([multiple]),
.form-control {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--input-border);
    border-radius: 0.5rem;
    background: var(--input-bg);
    color: var(--text-color);
    font: inherit;
    font-size: 0.9rem;
    transition: border-color 0.15s;
}

/* Cross-browser <select> chrome — Safari (and Firefox) render native
   controls otherwise, so the dropdown looks visually distinct from the
   sibling <input>s. Strips native appearance and paints our own chevron
   via background-image. Applied globally to all single-value selects so
   bare/JS-injected ones (admin tables, modal dialogs) match too;
   [multiple] selects keep native rendering since their box height matters. */
select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: var(--select-arrow);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
    padding-right: 2.25rem;
}

.form-group input:not([type="radio"]):not([type="checkbox"]):focus,
.form-group select:focus,
.form-group textarea:focus,
.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-control-inline {
    width: auto;
    display: inline-block;
    padding: 0.2rem 0.5rem;
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
}

.radio-label input[type="radio"],
.form-group .radio-label input[type="radio"] {
    width: 18px !important;
    min-width: 18px;
    height: 18px;
    margin: 0 0.75rem 0 0;
    padding: 0;
    accent-color: var(--primary-color);
    cursor: pointer;
    flex-shrink: 0;
    border: none;
    background: none;
    box-shadow: none;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-row-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.form-hint {
    font-size: 0.8rem;
    color: var(--muted-text);
    margin-top: 0.25rem;
}

.help-panel {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.help-panel > summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--text-color);
    list-style: none;
    padding: 0.25rem 0;
}

.help-panel > summary::-webkit-details-marker {
    display: none;
}

.help-panel > summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform 0.15s;
    color: var(--muted-text);
}

.help-panel[open] > summary::before {
    transform: rotate(90deg);
}

.help-panel-body {
    padding: 0.5rem 0 0.25rem 0.25rem;
    color: var(--muted-text);
}

.help-panel-body ol,
.help-panel-body ul {
    margin: 0.25rem 0 0.25rem 1.25rem;
    padding: 0;
}

.help-panel-body li {
    margin-bottom: 0.35rem;
    line-height: 1.5;
}

.help-panel-body code {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 0.05rem 0.35rem;
    font-size: 0.8rem;
}

.help-panel-body a {
    color: var(--link-color);
}

.copy-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.35rem;
    max-width: 520px;
}

.copy-row input {
    flex: 1;
    font-family: monospace;
    font-size: 0.8rem;
    padding: 0.35rem 0.5rem;
    background: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* --- Rich Text Editor --- */
.rte-wrap {
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

.rte-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0.4rem;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 10;
}

.rte-toolbar.rte-toolbar-stuck {
    position: fixed;
    top: 52px;
    z-index: 60;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.rte-toolbar button {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-color);
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0;
}

.rte-toolbar button:hover {
    background: var(--border-color);
}

.rte-toolbar button svg {
    width: 16px;
    height: 16px;
}

.rte-toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    margin: 0 3px;
}

.rte-editor {
    min-height: 150px;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.75rem 1rem;
    outline: none;
    color: var(--text-color);
    font-size: 0.875rem;
    line-height: 1.6;
    background: var(--input-bg);
}

.rte-editor h1 { font-size: 1.5rem; margin: 0.75rem 0 0.35rem; }
.rte-editor h2 { font-size: 1.25rem; margin: 0.5rem 0; }
.rte-editor h3 { font-size: 1.1rem; margin: 0.5rem 0; }
.rte-editor p { margin: 0.25rem 0; }
.rte-editor ul,
.rte-editor ol { padding-left: 1.5rem; margin: 0.25rem 0; }
.rte-editor a { color: var(--link-color); text-decoration: underline; }
.rte-editor hr { border: none; border-top: 1px solid var(--border-color); margin: 0.75rem 0; }

.rte-content h1 { font-size: 1.5rem; margin: 1rem 0 0.5rem; }
.rte-content h2 { font-size: 1.25rem; margin: 0.75rem 0 0.35rem; }
.rte-content h3 { font-size: 1.1rem; margin: 0.5rem 0 0.25rem; }
.rte-content p { margin: 0.25rem 0; }
.rte-content ul,
.rte-content ol { padding-left: 1.5rem; margin: 0.25rem 0; }
.rte-content a { color: var(--link-color); text-decoration: underline; }
.rte-content a:hover { color: var(--link-hover); }
.rte-content hr { border: none; border-top: 1px solid var(--border-color); margin: 0.75rem 0; }

/* --- Autocomplete Dropdown --- */
.autocomplete-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.autocomplete-dropdown.open { display: block; }

.autocomplete-item {
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.1s;
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover,
.autocomplete-item.active { background: var(--hover-bg); }

.autocomplete-item-name { font-weight: 600; font-size: 0.95rem; }
.autocomplete-item-detail { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.1rem; }

.autocomplete-item-new {
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    color: var(--primary-color);
    font-weight: 500;
    font-size: 0.875rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.autocomplete-item-new:hover { background: var(--hover-bg); }

/* --- Drop Zone (image upload) --- */
.drop-zone {
    border: 2px dashed var(--border-color);
    border-radius: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    position: relative;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.drop-zone:hover,
.drop-zone-over {
    border-color: var(--primary-color);
    background: rgba(37, 99, 235, 0.04);
}

.drop-zone-square {
    aspect-ratio: 1;
}

.drop-zone-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.drop-zone-input {
    display: none;
}

.drop-zone-preview img {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0.375rem;
    display: block;
}

.drop-zone-preview {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drop-zone-remove {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--danger-color);
    color: #fff;
    border: none;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drop-zone-remove:hover {
    background: var(--danger-hover);
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: var(--card-bg);
    color: var(--text-color);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    line-height: 1.4;
}

.btn:hover {
    background: var(--bg-color);
    color: var(--text-color);
}

.btn-primary {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #ffffff;
}

.btn-secondary {
    background: transparent;
    color: var(--secondary-color);
    border-color: var(--border-color);
}

.btn-secondary:hover {
    background: var(--bg-color);
}

.btn-danger {
    background: var(--danger-color);
    color: #ffffff;
    border-color: var(--danger-color);
}

.btn-danger:hover {
    background: var(--danger-hover);
    border-color: var(--danger-hover);
    color: #ffffff;
}

.btn-success {
    background: var(--success-color);
    color: #ffffff;
    border-color: var(--success-color);
}
.btn-success:hover {
    background: #4ade80;
    border-color: #4ade80;
    color: #052e16;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
}

.btn-full {
    width: 100%;
}

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 0.5rem;
}

.btn-icon svg {
    width: 16px;
    height: 16px;
}

.btn-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* --- Alerts --- */
.alert {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.alert-danger {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.alert-warning {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.alert-info {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

[data-theme="dark"] .alert-danger {
    background: #450a0a;
    color: #fca5a5;
    border-color: #7f1d1d;
}

[data-theme="dark"] .alert-success {
    background: #052e16;
    color: #86efac;
    border-color: #166534;
}

[data-theme="dark"] .alert-warning {
    background: #451a03;
    color: #fcd34d;
    border-color: #78350f;
}

[data-theme="dark"] .alert-info {
    background: #172554;
    color: #93c5fd;
    border-color: #1e3a5f;
}

/* --- Badges --- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}

.badge-kata {
    background: var(--badge-kata-bg);
    color: var(--badge-kata-text);
}

.badge-kumite {
    background: var(--badge-kumite-bg);
    color: var(--badge-kumite-text);
}

.badge-pending {
    background: var(--badge-pending-bg);
    color: var(--badge-pending-text);
}

.badge-confirmed {
    background: var(--badge-confirmed-bg);
    color: var(--badge-confirmed-text);
}

.badge-draft {
    background: var(--table-stripe);
    color: var(--secondary-color);
}

.badge-waitlist {
    background: var(--badge-pending-bg);
    color: var(--badge-pending-text);
    border: 1px dashed var(--badge-pending-text);
}

.badge-active {
    background: var(--badge-confirmed-bg);
    color: var(--badge-confirmed-text);
}

/* --- Tables ---
 * Standard data-list pattern (see CLAUDE.md "Tables"):
 *   <div class="card">
 *     <div class="table-responsive">
 *       <table> ... </table>
 *     </div>
 *   </div>
 * Action columns (last column with edit/delete buttons) use `.table-actions`
 * on the <th>/<td> so they are right-aligned and don't wrap.
 */
.table-responsive {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 0.625rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
}

th {
    font-weight: 600;
    color: var(--heading-color);
    background: var(--bg-color);
    white-space: nowrap;
}

tr:hover {
    background: var(--table-stripe);
}

/* Right-aligned, no-wrap action column (Edit / Delete buttons, etc.).
 * Use on both the <th> and the <td>. The <th> is typically empty. */
.table-actions {
    text-align: right;
    white-space: nowrap;
}

/* --- Page Header --- */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.page-header h1 {
    margin: 0;
}

/* --- Stats Grid --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
}
.stat-value-sm {
    font-size: 1.25rem;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--secondary-color);
    margin-top: 0.25rem;
}

/* --- Empty State --- */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--secondary-color);
}

.empty-state svg {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state p {
    margin-bottom: 1rem;
}

/* --- Text Link --- */
.text-link {
    color: var(--link-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.text-link:hover {
    color: var(--link-hover);
}

/* --- Utility --- */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--muted-text); }
ol.event-list { margin: 0; padding-left: 1.25rem; }
ol.event-list::marker, ol.event-list li::marker { color: var(--muted-text); }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-danger { color: var(--danger-color); }
.text-success { color: var(--success-color); }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }

/* --- Toggle Options (radio styled as selectable cards) --- */
.toggle-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    white-space: nowrap;
    border: 1px solid var(--input-border);
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: border-color 0.15s, background 0.15s;
    background: var(--input-bg);
    flex: 1 1 0;
}
.toggle-option input[type="radio"] {
    width: auto;
}
.toggle-option:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-alpha, rgba(59, 130, 246, 0.08));
}

/* --- Confirm Modal --- */
.confirm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.confirm-modal {
    background: var(--card-bg);
    border-radius: 1rem;
    padding: 1.5rem;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* --- Schedule Builder --- */
.schedule-rings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.schedule-ring {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
}

.schedule-ring-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--sidebar-bg, rgba(0,0,0,0.02));
    border-radius: 0.5rem 0.5rem 0 0;
}

.schedule-ring-name {
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

.schedule-ring-name:hover {
    color: var(--primary-color);
}

.schedule-ring-name-input {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 2px 6px;
    width: 100%;
    border: 1px solid var(--primary-color);
    border-radius: 0.25rem;
    background: var(--card-bg);
    color: var(--text-color);
}

.schedule-ring-actions {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.schedule-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 0.35rem;
    border-radius: 0.375rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
    cursor: pointer;
}

.schedule-action-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-color);
}

.schedule-action-btn.text-danger:hover {
    color: var(--danger-color, #ef4444);
    background: rgba(239, 68, 68, 0.1);
}

.schedule-action-btn svg {
    width: 18px;
    height: 18px;
}

.schedule-ring-entries {
    min-height: 60px;
    padding: 0.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: background 0.15s;
}

.schedule-ring-entries.drag-over {
    background: rgba(37, 99, 235, 0.05);
    border-radius: 0 0 0.5rem 0.5rem;
}

.schedule-drop-placeholder {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 1rem;
    border: 2px dashed var(--border-color);
    border-radius: 0.375rem;
}

.schedule-entry {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    padding: 0.4rem 0.5rem;
    cursor: grab;
    transition: box-shadow 0.15s, opacity 0.15s;
    user-select: none;
}
.schedule-entry-completed {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
}
.schedule-entry-locked {
    cursor: default;
    opacity: 0.7;
}

.schedule-entry:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.schedule-entry.dragging {
    opacity: 0.4;
}

.schedule-entry-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.schedule-entry-main {
    flex: 1;
    min-width: 0;
}

.schedule-entry-title {
    font-size: 0.8rem;
    font-weight: 500;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-entry-times {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.schedule-entry-meta {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.schedule-pool {
    min-height: 40px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
    transition: background 0.15s;
}

.schedule-pool.drag-over {
    background: rgba(37, 99, 235, 0.05);
    border-radius: 0.375rem;
}

.badge-sm {
    font-size: 0.65rem;
    padding: 0.1rem 0.35rem;
}

/* Schedule settings dropdown */
.schedule-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100;
    min-width: 200px;
}

.schedule-dropdown-menu.show {
    display: block;
}

.schedule-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 0.25rem;
    white-space: nowrap;
}

.schedule-dropdown-item:hover {
    background: rgba(0,0,0,0.05);
}

/* Modal (generic) */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-content {
    background: var(--card-bg);
    border-radius: 1rem;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    line-height: 1;
}

.modal-body {
    padding: 1rem 1.25rem;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border-color);
}

/* --- Checkboxes --- */
input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
    cursor: pointer;
    flex-shrink: 0;
}

/* --- Round Robin Match Cards --- */
.rr-matches {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

.rr-match-card {
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--card-bg);
    width: 400px;
}

.rr-match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0.75rem;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
}

.rr-competitor {
    display: flex;
    align-items: center;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
    gap: 0.5rem;
}

.rr-competitor:last-of-type {
    border-bottom: none;
}

.rr-competitor.rr-winner {
    background: rgba(34, 197, 94, 0.15);
}

.rr-belt {
    width: 5px;
    min-height: 2.5rem;
    border-radius: 2px;
    flex-shrink: 0;
}

.rr-belt-red {
    background: #dc2626;
}

.rr-belt-white {
    background: #e5e7eb;
    border: 1px solid #d1d5db;
}

.rr-competitor-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.rr-competitor-name {
    font-weight: 700;
    font-size: 0.85rem;
}

.rr-country-code {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
    padding: 0 0.25rem;
}

.rr-score {
    font-size: 1.25rem;
    font-weight: 700;
    min-width: 2.5rem;
    text-align: center;
    flex-shrink: 0;
    padding: 0.25rem;
    border-left: 1px solid var(--border-color);
}

/* Standings table with borders */
.rr-standings-table {
    border-collapse: collapse;
}

.rr-standings-table th,
.rr-standings-table td {
    border: 1px solid var(--border-color);
    padding: 0.5rem 0.75rem;
}

/* --- Bracket --- */
.bracket-match-card.bracket-match-card {
    width: 400px;
    flex-shrink: 0;
    margin: 0;
}

/* --- Operator Topbar --- */
.operator-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: var(--card-bg);
    color: var(--text-color);
    border-bottom: 2px solid var(--border-color);
    font-size: 0.85rem;
    gap: 1rem;
}
.operator-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--secondary-color);
    flex-wrap: wrap;
}
.operator-nav {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* --- Bracket Click-to-Swap --- */
[data-swap-match]:hover {
    background: rgba(59, 130, 246, 0.08);
}

/* --- Bracket Overview (zoom out) --- */
.bracket-overview {
    overflow: visible !important;
}
.bracket-overview .rr-match-header {
    display: none;
}
.bracket-overview .rr-competitor-name,
.bracket-overview .rr-competitor .text-xs,
.bracket-overview .rr-country-code,
.bracket-overview .rr-score,
.bracket-overview .rr-competitor-info {
    display: none;
}
.bracket-overview .rr-match-card {
    cursor: pointer;
    border: 2px solid var(--border-color);
    border-radius: 0;
    overflow: visible;
}
.bracket-overview .rr-competitor {
    padding: 0;
    height: 12px;
    gap: 0;
    border: none !important;
    margin: 3px;
}
.bracket-overview .rr-competitor .rr-belt {
    display: none;
}
/* Aka = red, Shiro = grey — use belt class to identify */
.bracket-overview .rr-competitor:has(.rr-belt-red) {
    background: #dc2626 !important;
}
.bracket-overview .rr-competitor:has(.rr-belt-white) {
    background: #d1d5db !important;
}
/* Winner: bright green border around the bar */
.bracket-overview .rr-competitor.rr-winner {
    outline: 3px solid #00AA00;
    outline-offset: 0;
}
.bracket-overview .bracket-match-card.bracket-match-card,
.bracket-overview .rr-match-card {
    width: 100px;
}
.bracket-overview .bracket-grid {
    column-gap: 0;
}
.bracket-overview h3,
.bracket-overview .alert {
    display: none;
}

/* --- Sortable Table Headers --- */
.sortable-th {
    cursor: pointer;
    user-select: none;
}

.sortable-th:hover {
    color: var(--primary-color);
}

/* --- Seeding Rules --- */
.seeding-rule-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    margin-bottom: 0.35rem;
    background: var(--card-bg);
    cursor: grab;
    transition: box-shadow 0.15s, opacity 0.15s;
}

.seeding-rule-item.dragging {
    opacity: 0.4;
}

.seeding-rule-handle {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    cursor: grab;
}

.seeding-rule-handle svg {
    width: 14px;
    height: 14px;
}

.seeding-rule-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.seeding-rule-item > .text-xs {
    margin-left: auto;
}

.competitor-seed-list {
    padding: 0.5rem;
    background: var(--bg-color);
}

.competitor-seed-list table {
    margin: 0;
}

/* --- Responsive --- */
@media (max-width: 1279px) { /* max-xl — sidebar off-canvas; covers iPad landscape (1024) and narrower */
    .sidebar {
        transform: translateX(-100%);
        width: 320px;
        min-width: 320px;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .app-right-panel {
        margin-left: 0;
    }

    .sidebar-close {
        display: none;
    }

    .sidebar-toggle {
        display: flex;
    }

    body.sidebar-open .sidebar-toggle {
        display: none;
    }

    body.sidebar-open .sidebar-close {
        display: flex;
        left: 280px;
    }

    .top-navbar {
        padding: 0 0.75rem;
    }

    .top-nav-brand {
        display: inline-flex;
        align-items: center;
    }

    body.sidebar-open .top-nav-brand {
        display: none;
    }

    .top-nav-username {
        display: none;
    }

    .top-nav-breadcrumb {
        display: none;
    }

    .content-area {
        padding: 1rem;
    }

    .form-row-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-row-4 .form-group[style*="span 2"] {
        grid-column: span 2;
    }
}

/* By default, the folded copies of the topbar items live in the user
   dropdown but stay hidden — the real items in the topbar are visible.
   The max-sm rule below flips both. */
.top-nav-dropdown-foldable { display: none; }

@media (max-width: 639px) { /* max-sm — phone-only navbar compression */
    .top-nav-link-label { display: none; }
    .top-nav-link { padding: 0.4rem 0.5rem; }
    /* Move Tournaments / Help / Theme out of the topbar into the user
       dropdown so iPhone-SE-class widths fit comfortably. */
    .top-nav-foldable { display: none !important; }
    .top-nav-dropdown-foldable { display: flex; }
    /* The divider is rendered as a 1px-tall block, not flex. */
    .top-nav-dropdown-divider.top-nav-dropdown-foldable { display: block; }
}

@media (max-width: 639px) {
    /* max-sm — phones only */
    .hide-mobile { display: none !important; }

    .form-row {
        grid-template-columns: 1fr;
    }

    .form-row-4 {
        grid-template-columns: 1fr;
    }

    .form-row-4 .form-group[style*="span 2"],
    .form-row-4 .form-group[style*="span 3"] {
        grid-column: span 1 !important;
    }
    h1 { font-size: 1.375rem; }
    h2 { font-size: 1.125rem; }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .public-header-inner {
        padding: 0 1rem;
    }

    .public-main {
        padding: 1rem;
    }

    .tournament-card {
        flex-direction: column;
    }

    .tournament-card-banner {
        flex: 0 0 auto;
        min-width: 0;
        max-width: none;
        width: 100%;
        aspect-ratio: 32 / 9;
    }

    .tournament-card-body {
        flex-direction: column;
        align-items: stretch;
    }

    .tournament-card-actions {
        margin-left: 0;
        margin-top: 1rem;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .tournament-card-actions > * {
        flex: 1 1 auto;
    }

    .tournament-detail-grid {
        grid-template-columns: 1fr;
    }

    .split-grid,
    .split-grid.split-2-1 {
        grid-template-columns: 1fr;
    }

    .schedule-rings {
        grid-template-columns: 1fr;
    }

    .tournament-banner-bleed {
        margin: -1rem -1rem 1rem -1rem;
    }
}

/* Public header collapses to a hamburger before the nav links would wrap. */
@media (max-width: 767px) { /* max-md */
    .public-header {
        height: auto;
        min-height: 52px;
    }

    .public-header-inner {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0 1rem;
        height: auto;
        min-height: 52px;
        align-content: center;
    }

    .public-nav-toggle {
        display: inline-flex;
    }

    .public-nav {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        padding: 0.5rem 0;
        border-top: 1px solid var(--border-color);
    }

    .public-nav.open {
        display: flex;
    }

    .public-nav-link {
        padding: 0.6rem 0.75rem;
        font-size: 0.95rem;
    }

    .home-hero {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 2rem 1rem;
        text-align: center;
    }

    .home-hero-image {
        display: flex;
        justify-content: center;
    }

    .home-hero-image img {
        width: 180px;
        height: 180px;
        border-radius: 28px;
    }

    .home-hero-content h1 {
        font-size: 2rem;
    }

    .home-hero-tagline {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .home-hero .btn-group {
        justify-content: center;
    }

    .auth-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .auth-brand-image {
        display: none;
    }

    .auth-brand-title {
        font-size: 1.75rem;
        margin-bottom: 0.25rem;
    }

    .auth-brand-tagline {
        margin-bottom: 1rem;
    }
}

/* --- Scoreboard (fullscreen) --- */
.scoreboard-body {
    background: #000;
    color: #fff;
    overflow: hidden;
}

/* --- Kata Scoring --- */
.kata-performer-card {
    border-left: 4px solid var(--primary-color);
}

.kata-judge-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.kata-judge-score .form-control {
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    transition: border-color 0.2s;
}

.kata-judge-score .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.kata-judge-dropped {
    opacity: 0.35;
    text-decoration: line-through;
    color: var(--muted-text);
}

.kata-score-final {
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}

.kata-standings-table th,
.kata-standings-table td {
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
}

.kata-standings-table tr:hover {
    background: var(--bg-hover);
}

/* --- Toast Notifications --- */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.3;
    max-width: 420px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: toastIn 0.25s ease-out;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}
.toast.toast-error { border-left: 4px solid var(--danger-color); }
.toast.toast-success { border-left: 4px solid var(--success-color); }
.toast.toast-info { border-left: 4px solid var(--primary-color); }
.toast.toast-warning { border-left: 4px solid var(--warning-color); }
.toast-close {
    background: none; border: none; cursor: pointer; padding: 0.2rem;
    color: var(--muted-text); font-size: 1.1rem; line-height: 1; margin-left: auto;
}
.toast.toast-out { animation: toastOut 0.2s ease-in forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: none; } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(1rem); } }

/* --- Confirm Modal --- */
.confirm-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45); z-index: 99998;
    display: flex; justify-content: center; align-items: center;
    animation: fadeIn 0.15s ease-out;
}
.confirm-box {
    background: var(--card-bg); border-radius: 0.5rem;
    padding: 1.5rem; max-width: 420px; width: 90%;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.confirm-box p { margin: 0 0 1.25rem; font-size: 0.95rem; line-height: 1.4; white-space: pre-line; }
.confirm-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --- Help & Guide pages --- */
.help-landing {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}
.help-landing-header {
    text-align: center;
    margin-bottom: 2rem;
}
.help-landing-header h1 {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}
.help-landing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}
.help-landing-card {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.help-landing-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
}
.help-landing-icon {
    width: 3rem; height: 3rem;
    display: flex; align-items: center; justify-content: center;
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary-color, #2563eb);
    border-radius: 0.75rem;
    margin-bottom: 1rem;
}
.help-landing-icon i { width: 1.5rem; height: 1.5rem; }
.help-landing-card h2 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.help-landing-card p { color: var(--muted-text); margin: 0 0 1.25rem; line-height: 1.5; }
.help-landing-cta {
    margin-top: auto;
    color: var(--primary-color, #2563eb);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.help-landing-cta i { width: 1rem; height: 1rem; }

.help-page {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 2.5rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
    align-items: start;
}
/* Grid cells default to min-content sizing; force them to allow shrink so
   long TOC anchors / wide content can't push the grid wider than the
   viewport. */
.help-page > * { min-width: 0; }
.help-toc nav a { word-break: break-word; }
.help-toc {
    position: sticky;
    top: 1rem;
    align-self: start;
}
.help-toc-inner {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem;
}
.help-toc-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--muted-text);
    text-decoration: none;
    margin-bottom: 0.75rem;
}
.help-toc-back i { width: 0.9rem; height: 0.9rem; }
.help-toc-back:hover { color: var(--primary-color, #2563eb); }
.help-toc h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-text);
    margin: 0 0 0.5rem;
}
.help-toc nav { display: flex; flex-direction: column; gap: 0.15rem; }
.help-toc nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.35rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1.3;
}
.help-toc nav a:hover { background: rgba(37, 99, 235, 0.08); color: var(--primary-color, #2563eb); }

.help-content header h1 { margin-top: 0; }
.help-content section {
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    scroll-margin-top: 1rem;
}
.help-content section:first-of-type { border-top: 0; margin-top: 0.5rem; padding-top: 0.5rem; }
.help-content h2 { font-size: 1.4rem; margin: 0 0 0.75rem; }
.help-content h3 { font-size: 1.05rem; margin: 1.25rem 0 0.5rem; }
.help-content p, .help-content li { line-height: 1.65; }
.help-content ul, .help-content ol { padding-left: 1.25rem; margin: 0.5rem 0 1rem; }
.help-content li { margin-bottom: 0.35rem; }
.help-content code {
    background: rgba(37, 99, 235, 0.08);
    color: var(--primary-color, #2563eb);
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.85em;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}
.help-badge-new {
    display: inline-block;
    background: #16a34a;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    margin-left: 0.35rem;
    vertical-align: middle;
}

@media (max-width: 1023px) { /* max-lg — help layout collapses with the sidebar */
    .help-page { grid-template-columns: 1fr; }
    .help-toc { position: static; }
}

/* --- Email status toggle (switch) --- */
.email-status-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}
.email-status-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.email-status-toggle-track {
    position: relative;
    display: inline-block;
    width: 2.25rem;
    height: 1.25rem;
    background: var(--input-border);
    border-radius: 999px;
    transition: background 0.15s;
}
.email-status-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1rem;
    height: 1rem;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.15s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.email-status-toggle input:checked + .email-status-toggle-track {
    background: var(--success-color);
}
.email-status-toggle input:checked + .email-status-toggle-track .email-status-toggle-thumb {
    transform: translateX(1rem);
}
.email-status-toggle input:focus-visible + .email-status-toggle-track {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
.email-status-toggle-label {
    font-size: 0.85rem;
    color: var(--text-muted, #64748b);
}