/*
 * Club Editorial
 * --------------------------------------------------------------------------
 * A late, presentation-only layer for the application shell. It deliberately
 * leaves the blue navigation system in sidebar.css untouched; all selectors
 * below are scoped to the editorial surfaces beside it.
 */
:root {
    --app-font-family: "Poppins", sans-serif;
    --app-bg: #fcfcfa;
    --app-surface: #ffffff;
    --app-surface-rgb: 255 255 255;
    --app-surface-raised: #f5f7f8;
    --app-border: #d9dee7;
    --app-control-border: #cbd3df;
    --app-text: #10243e;
    --app-text-secondary: #304965;
    --app-text-muted: #66768b;
    --app-accent: #005db8;
    --app-accent-strong: #10243e;
    --app-accent-hover: #004a94;
    --app-accent-text: #005db8;
    --app-accent-soft: #eaf3fb;
    --app-accent-border: #b9d2e9;
}

html,
body {
    background: var(--app-bg);
    color: var(--app-text);
    font-family: var(--app-font-family);
}

body.club-editorial,
.club-editorial :is(button, input, select, textarea, optgroup, code, kbd, pre, samp) {
    font-family: var(--app-font-family);
}

/* The application canvas -------------------------------------------------- */
.club-editorial.platform-ui #app-container > main {
    background: var(--app-bg) !important;
    color: var(--app-text);
    padding: 48px !important;
}

.club-editorial .content-section {
    width: min(100%, 1720px);
    margin: 0 auto;
}

.club-editorial .content-section > :first-child {
    min-width: 0;
}

.club-editorial .page-title,
.club-editorial .agenda-page-title,
.club-editorial #planning .planning-page-header h2 {
    position: relative;
    margin-top: 0;
    padding-left: 0;
    color: var(--app-text) !important;
    font-size: clamp(2.45rem, 3.55vw, 3rem) !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
    line-height: 1.12 !important;
}

/* Replaces the former vertical title rule with the single club editorial cue. */
.club-editorial .page-title::before,
.club-editorial .agenda-page-title::before {
    position: static !important;
    display: block;
    width: 32px !important;
    height: 3px !important;
    margin: 0 0 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--app-accent) !important;
    box-shadow: none !important;
}

.club-editorial :is(.page-title + p, .page-description, .agenda-description, .planning-page-header p:not(.planning-eyebrow), .tm-page-heading > div > p:last-child) {
    max-width: 70ch;
    color: var(--app-text-muted) !important;
    font-size: 16px !important;
    font-weight: 400;
    line-height: 1.7;
}

.club-editorial :is(.tm-eyebrow, .agenda-eyebrow, .planning-eyebrow, .scouting-map-eyebrow, .scouting-competitions-filter-modal-kicker) {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--app-accent) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    line-height: 1.35;
    text-transform: uppercase;
}

.club-editorial :is(.tm-eyebrow, .agenda-eyebrow, .planning-eyebrow, .scouting-map-eyebrow)::before {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    content: "";
    background: var(--app-accent);
}

.club-editorial #app-container > main :is(h1, h2, h3, h4, h5, h6) {
    color: var(--app-text);
}

.club-editorial #app-container > main :is(p, small, .text-gray-400, .text-gray-500, .text-gray-600) {
    color: var(--app-text-muted);
}

.club-editorial #app-container > main :is(.text-gray-700, .text-gray-800, .text-gray-900) {
    color: var(--app-text) !important;
}

/* Panels and cards -------------------------------------------------------- */
.club-editorial #app-container > main > .content-section:not(#videos) :is(.navigation-card, .weather-card, .agenda-panel, .planning-toolbar, .planning-table-shell, .tm-employee-card, .tm-conversation-item, .tm-modal-card, .scouting-competitions-table-card, .scouting-competition-detail-card, .scouting-profile-panel, .scouting-player-search-card, .scouting-country-tile, .scouting-team-tile, .scouting-player-tile, .scouting-competitions-filter-modal),
.club-editorial #app-container > main > .content-section:not(#videos) [class*="rounded"][class*="border"] {
    border-color: var(--app-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.club-editorial #app-container > main > .content-section:not(#videos) :is(.navigation-card, .weather-card, .agenda-panel, .planning-toolbar, .planning-table-shell, .tm-employee-card, .tm-conversation-item, .tm-modal-card, .scouting-competitions-table-card, .scouting-competition-detail-card, .scouting-profile-panel, .scouting-player-search-card, .scouting-country-tile, .scouting-team-tile, .scouting-player-tile) {
    background: var(--app-surface) !important;
}

.club-editorial #app-container > main .navigation-card {
    min-height: 0;
    padding: 24px;
}

.club-editorial #app-container > main .navigation-card:hover,
.club-editorial #app-container > main :is(.tm-employee-card, .tm-conversation-item, .scouting-player-search-card):hover {
    border-color: var(--app-accent-border) !important;
    background: #fff !important;
    box-shadow: 0 3px 10px rgb(16 36 62 / .05) !important;
    transform: none !important;
}

.club-editorial #app-container > main :is(.tm-employee-avatar, .navigation-card > div:first-child:not(:has(h3))) {
    border: 1px solid var(--app-accent-border);
    border-radius: 6px !important;
    background: var(--app-accent-soft) !important;
    color: var(--app-accent) !important;
}

/* Forms ------------------------------------------------------------------- */
.club-editorial :is(.content-section, .app-shell-modal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea),
.club-editorial :is(.tm-search, .agenda-filter-row select, .scouting-competitions-filter-options) {
    border-color: var(--app-control-border) !important;
    border-radius: 7px !important;
    background-color: var(--app-surface) !important;
    color: var(--app-text) !important;
    box-shadow: none !important;
}

.club-editorial :is(.content-section, .app-shell-modal) :is(input, select, textarea):hover {
    border-color: #aebdce !important;
}

.club-editorial :is(.content-section, .app-shell-modal) :is(input, select, textarea):focus,
.club-editorial :is(.content-section, .app-shell-modal) :is(input, select, textarea):focus-visible,
.club-editorial :is(.content-section, .app-shell-modal) .tm-search:focus-within {
    border-color: var(--app-accent) !important;
    outline: 2px solid rgb(0 93 184 / .18) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}

.club-editorial :is(.content-section, .app-shell-modal) :is(input, textarea)::placeholder {
    color: #8a97a8 !important;
}

.club-editorial :is(.content-section, .app-shell-modal) label,
.club-editorial :is(.content-section, .app-shell-modal) label.uppercase {
    color: var(--app-text-secondary) !important;
    font-size: 12px;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
}

/* Buttons ----------------------------------------------------------------- */
.club-editorial #app-container > main :is(button, a)[class*="bg-red-"],
.club-editorial #app-container > main :is(button, a)[class*="bg-blue-"],
.club-editorial #app-container > main :is(button, a)[class*="bg-emerald-"],
.club-editorial #app-container > main :is(button, a)[class*="bg-green-"],
.club-editorial :is(.tm-add-button, .tm-button-primary, .agenda-button-primary, .planning-button-primary, .planning-save-button) {
    border-color: var(--app-accent-strong) !important;
    border-radius: 7px !important;
    background: var(--app-accent-strong) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.club-editorial #app-container > main :is(button, a)[class*="bg-red-"]:hover,
.club-editorial #app-container > main :is(button, a)[class*="bg-blue-"]:hover,
.club-editorial #app-container > main :is(button, a)[class*="bg-emerald-"]:hover,
.club-editorial #app-container > main :is(button, a)[class*="bg-green-"]:hover,
.club-editorial :is(.tm-add-button, .tm-button-primary, .agenda-button-primary, .planning-button-primary, .planning-save-button):hover {
    border-color: var(--app-accent-hover) !important;
    background: var(--app-accent-hover) !important;
    box-shadow: none !important;
    transform: none !important;
}

.club-editorial #app-container > main :is(button, a)[class*="bg-gray-"],
.club-editorial #app-container > main :is(button, a)[class*="bg-white"],
.club-editorial :is(.tm-button-secondary, .agenda-button, .planning-button-dark) {
    border-color: var(--app-border) !important;
    border-radius: 7px !important;
    background: var(--app-surface) !important;
    color: var(--app-text-secondary) !important;
    box-shadow: none !important;
}

.club-editorial #app-container > main :is(button, a)[class*="bg-gray-"]:hover,
.club-editorial #app-container > main :is(button, a)[class*="bg-white"]:hover,
.club-editorial :is(.tm-button-secondary, .agenda-button, .planning-button-dark):hover {
    border-color: var(--app-accent-border) !important;
    background: var(--app-accent-soft) !important;
    color: var(--app-accent) !important;
}

.club-editorial :is(button, a, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--app-accent) !important;
    outline-offset: 3px;
}

/* Data tables ------------------------------------------------------------- */
.club-editorial #app-container > main table:not(.fc-scrollgrid) {
    color: var(--app-text);
}

.club-editorial #app-container > main table:not(.fc-scrollgrid) :is(th, td) {
    border-color: var(--app-border) !important;
}

.club-editorial #app-container > main table:not(.fc-scrollgrid) th {
    background: #f4f6f8;
    color: var(--app-text-secondary) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase;
}

.club-editorial #app-container > main table:not(.fc-scrollgrid) tbody tr:hover td {
    background: #f8fafb !important;
}

/* Compact, quiet empty states -------------------------------------------- */
.club-editorial #app-container > main :is(.tm-empty-state, .scouting-countries-empty, .scouting-teams-empty, .scouting-teams-loading, .scouting-player-search-empty, .scouting-standings-empty, .planning-table-state),
.club-editorial #app-container > main [class*="empty"][class*="border"] {
    border: 1px solid var(--app-border) !important;
    border-radius: 8px !important;
    background: #f5f8fa !important;
    box-shadow: none !important;
    color: var(--app-text-muted) !important;
}

.club-editorial #app-container > main :is(.tm-empty-state, .scouting-countries-empty, .scouting-teams-empty, .scouting-teams-loading, .scouting-player-search-empty, .planning-table-state) :is(h3, p) {
    color: var(--app-text-muted) !important;
}

.club-editorial #app-container > main :is(.tm-empty-state, .scouting-countries-empty, .scouting-teams-empty, .scouting-teams-loading, .scouting-player-search-empty, .planning-table-state) i {
    color: var(--app-accent) !important;
}

/* Status tags remain small and legible, without the pill treatment. */
.club-editorial #app-container > main :is([class*="status"], [class*="badge"], [class*="tag"])[class*="rounded"] {
    border-radius: 5px !important;
}

/* Agenda: retain the data model, replace the graphite presentation. -------- */
.club-editorial #agenda,
.club-editorial #planning,
.club-editorial .planning-export-clone {
    --app-bg: #fcfcfa;
    --app-surface: #fff;
    --app-surface-rgb: 255 255 255;
    --app-surface-raised: #f5f7f8;
    --app-border: #d9dee7;
    --app-text: #10243e;
    --app-text-secondary: #304965;
    --app-text-muted: #66768b;
    --app-accent: #005db8;
    --app-accent-strong: #10243e;
    --app-accent-hover: #004a94;
    --app-accent-text: #005db8;
    --app-accent-soft: #eaf3fb;
    --app-accent-border: #b9d2e9;
    --planning-line: #d9dee7;
    --schedule-today: #edf5fb;
}

.club-editorial #agenda .agenda-panel,
.club-editorial #agenda .fc,
.club-editorial #agenda .fc :is(.fc-scrollgrid-section-header > *, .fc-list, .fc-list-day-cushion),
.club-editorial #agenda .fc .fc-popover {
    border-color: var(--app-border) !important;
    background: var(--app-surface) !important;
    box-shadow: none !important;
}

.club-editorial #agenda :is(.agenda-step-controls, .agenda-view-controls) {
    border-color: var(--app-border) !important;
    border-radius: 7px !important;
    background: #f4f6f8 !important;
}

.club-editorial #agenda :is(.agenda-icon-button, .agenda-view-controls button) {
    border-radius: 5px !important;
    color: var(--app-text-muted) !important;
}

.club-editorial #agenda .agenda-view-controls button[aria-pressed="true"] {
    border-color: var(--app-accent-border) !important;
    background: #fff !important;
    color: var(--app-accent) !important;
}

.club-editorial #agenda .fc {
    --fc-border-color: #d9dee7;
    --fc-page-bg-color: #fff;
    --fc-neutral-bg-color: #f4f6f8;
    --fc-neutral-text-color: #66768b;
    --fc-today-bg-color: #edf5fb;
    color: var(--app-text) !important;
}

.club-editorial #agenda .fc-theme-standard :is(td, th) {
    border-color: var(--app-border) !important;
}

.club-editorial #agenda .fc :is(.fc-col-header-cell-cushion, .fc-timegrid-axis-cushion, .fc-timegrid-slot-label-cushion, .fc-daygrid-day-number, .fc-daygrid-more-link, .fc-list-day-text, .fc-list-event-title) {
    color: var(--app-text-secondary) !important;
}

.club-editorial #agenda .fc .fc-day-today,
.club-editorial #agenda .fc .fc-col-header .fc-day-today {
    background: #edf5fb !important;
    box-shadow: inset 0 3px 0 var(--app-accent) !important;
}

.club-editorial #agenda .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    border: 0 !important;
    border-radius: 4px !important;
    background: var(--app-accent) !important;
    color: #fff !important;
}

.club-editorial #agenda .fc .fc-event {
    --event-surface: #edf5fb;
    --event-border: #b9d2e9;
    --event-accent: #005db8;
    --event-ink: #10243e;
    border: 1px solid var(--event-border) !important;
    border-left: 3px solid var(--event-accent) !important;
    border-radius: 5px !important;
    background: var(--event-surface) !important;
    color: var(--event-ink) !important;
    box-shadow: none !important;
}

.club-editorial #agenda .fc .fc-event.agenda-event-training { --event-surface: #f1f6ef; --event-border: #c9dbc2; --event-accent: #688452; --event-ink: #36552f; }
.club-editorial #agenda .fc .fc-event.agenda-event-match { --event-surface: #fcf5e9; --event-border: #e3cda8; --event-accent: #a1742c; --event-ink: #6b4b1e; }
.club-editorial #agenda :is(.agenda-event-meta, .agenda-event-title, .agenda-event-place, .agenda-event-type) { color: var(--event-ink, var(--app-text-secondary)) !important; }

/* Planning keeps its working-table behaviour but receives the same palette. */
.club-editorial #planning :is(.planning-import-panel, .planning-toolbar, .planning-table-shell) {
    border-color: var(--app-border) !important;
    background: var(--app-surface) !important;
    box-shadow: none !important;
}

.club-editorial #planning .planning-table tbody tr:nth-child(even) td { background: #f8fafb !important; }
.club-editorial #planning .planning-table tbody tr:hover td { background: #edf5fb !important; }
.club-editorial #planning .planning-table :is(th, td).is-today,
.club-editorial #planning .planning-table tbody tr td.is-today { background: #edf5fb !important; }
.club-editorial #planning .planning-table th.is-today { box-shadow: inset 0 3px 0 var(--app-accent) !important; color: var(--app-text) !important; }

/* Custom technical-manager and scouting components ----------------------- */
.club-editorial :is(.tm-page-heading, .agenda-page-header, .planning-page-header) { margin-bottom: 32px; }
.club-editorial .tm-search { max-width: 420px; padding: 10px 12px; }
.club-editorial .tm-modal-backdrop { background: rgb(16 36 62 / .36); }
.club-editorial .tm-modal-card,
.club-editorial .scouting-competitions-filter-modal { border-color: var(--app-border) !important; border-radius: 8px !important; box-shadow: 0 18px 44px rgb(16 36 62 / .16) !important; }
.club-editorial .tm-timeline::before { background: var(--app-border) !important; }
.club-editorial .tm-conversation-item::before { background: var(--app-accent) !important; box-shadow: 0 0 0 2px var(--app-accent-border) !important; }
.club-editorial .tm-conversation-outcome { border-left-color: var(--app-accent) !important; border-radius: 0 !important; background: #f3f7fa !important; }

.club-editorial :is(.scouting-competitions-table-card, .scouting-competition-detail-card, .scouting-profile-panel, .scouting-player-search-card) {
    border-color: var(--app-border) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
}

.club-editorial :is(.scouting-competitions-table, .scouting-standings-table) :is(th, td) { border-color: var(--app-border) !important; }
.club-editorial :is(.scouting-competitions-table, .scouting-standings-table) th { background: #f4f6f8 !important; color: var(--app-text-secondary) !important; }

/* App modals are outside <main>, so they get their own surface treatment. */
.club-editorial .app-shell-modal > :first-child {
    border-color: var(--app-border) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 18px 44px rgb(16 36 62 / .16) !important;
}

.club-editorial .app-shell-modal { background: rgb(16 36 62 / .42) !important; }
.club-editorial .app-shell-modal :is([class*="rounded-xl"], [class*="rounded-2xl"], [class*="rounded-3xl"]) { border-radius: 7px !important; }

/* Standalone login, invitation and QR screens ---------------------------- */
.club-editorial .login-page,
.club-editorial .bulk-invite-page,
.club-editorial .qr-signup-page {
    background:
        radial-gradient(circle at 18% 12%, rgb(106 194 246 / .34), transparent 31%),
        radial-gradient(circle at 88% 91%, rgb(0 36 106 / .34), transparent 34%),
        linear-gradient(155deg, #0870c6 0%, #0057a8 52%, #00417f 100%) !important;
    color: var(--app-text);
}

.club-editorial .login-background-image { display: none !important; }
.club-editorial :is(.login-card, .bulk-invite-panel, .qr-signup-panel) {
    border-color: var(--app-border) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 12px 30px rgb(16 36 62 / .08) !important;
    backdrop-filter: none !important;
}

.club-editorial :is(.login-primary-button, .bulk-invite-button, .qr-signup-button) {
    border-color: var(--app-accent-strong) !important;
    border-radius: 7px !important;
    background: var(--app-accent-strong) !important;
    box-shadow: none !important;
}

.club-editorial :is(.login-primary-button, .bulk-invite-button, .qr-signup-button):hover {
    border-color: var(--app-accent-hover) !important;
    background: var(--app-accent-hover) !important;
}

.club-editorial .login-title { padding-left: 0; font-size: 36px; font-weight: 700; letter-spacing: -.02em; }
.club-editorial .login-title::before { position: static; display: block; width: 32px; height: 3px; margin: 0 0 12px; background: var(--app-accent); box-shadow: none; }
.club-editorial :is(.login-input, .bulk-invite-input, .qr-signup-input) { border-color: var(--app-control-border) !important; border-radius: 7px !important; box-shadow: none !important; }

/* The presentation player stays purposefully dark around slide media, but its
   chrome adopts the editorial ink/blue cues instead of the former generic UI. */
.club-editorial .viewer-header,
.club-editorial .viewer-sidebar { border-color: #253b57; background: #10243e; }
.club-editorial :is(.viewer-icon-button, .viewer-header-button, .viewer-controls button) { border-color: #3a5373; border-radius: 7px; background: #173150; }
.club-editorial :is(.viewer-icon-button, .viewer-header-button, .viewer-controls button):hover { background: #005db8; }
.club-editorial .viewer-thumbnail { border-radius: 6px; }

@media (max-width: 767px) {
    .club-editorial.platform-ui #app-container > main { padding: 28px 20px 36px !important; }
    .club-editorial .page-title,
    .club-editorial .agenda-page-title,
    .club-editorial #planning .planning-page-header h2 { font-size: clamp(2rem, 10vw, 2.5rem) !important; }
    .club-editorial :is(.tm-page-heading, .agenda-page-header, .planning-page-header) { gap: 18px; margin-bottom: 24px; }
    .club-editorial .tm-page-heading { align-items: flex-start; }
    .club-editorial #app-container > main .navigation-card { padding: 20px; }
    .club-editorial #app-container > main :is(.agenda-page-actions, .planning-header-actions) { width: 100%; }
    .club-editorial #app-container > main :is(.agenda-page-actions, .planning-header-actions) > :is(button, a, details) { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .club-editorial *,
    .club-editorial *::before,
    .club-editorial *::after { transition: none !important; }
}

/*
 * Clean platform pass
 * Keep the interface practical and familiar: content should read as product
 * UI, not as a themed landing page. Accent blue is reserved for actions and
 * active states; it is not repeated as decoration in every header.
 */
.club-editorial.platform-ui #app-container > main {
    padding: 40px 44px 48px !important;
}

.club-editorial .page-title,
.club-editorial .agenda-page-title,
.club-editorial #planning .planning-page-header h2 {
    font-size: clamp(2rem, 2.7vw, 2.35rem) !important;
    font-weight: 650 !important;
    letter-spacing: -.025em !important;
    line-height: 1.2 !important;
}

.club-editorial .page-title::before,
.club-editorial .agenda-page-title::before,
.club-editorial .login-title::before,
.club-editorial :is(.tm-eyebrow, .agenda-eyebrow, .planning-eyebrow, .scouting-map-eyebrow)::before {
    display: none !important;
    content: none !important;
}

.club-editorial :is(.tm-eyebrow, .agenda-eyebrow, .planning-eyebrow, .scouting-map-eyebrow, .scouting-competitions-filter-modal-kicker) {
    display: block;
    margin: 0 0 6px;
    color: var(--app-text-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
}

.club-editorial :is(.page-title + p, .page-description, .agenda-description, .planning-page-header p:not(.planning-eyebrow), .tm-page-heading > div > p:last-child) {
    margin-top: 6px;
    font-size: 15px !important;
    line-height: 1.6;
}

.club-editorial :is(.tm-page-heading, .agenda-page-header, .planning-page-header) {
    margin-bottom: 24px;
}

.club-editorial #app-container > main > .content-section:not(#videos) :is(.navigation-card, .weather-card, .agenda-panel, .planning-toolbar, .planning-table-shell, .tm-employee-card, .tm-conversation-item, .tm-modal-card, .scouting-competitions-table-card, .scouting-competition-detail-card, .scouting-profile-panel, .scouting-player-search-card, .scouting-country-tile, .scouting-team-tile, .scouting-player-tile, .scouting-competitions-filter-modal),
.club-editorial #app-container > main > .content-section:not(#videos) [class*="rounded"][class*="border"] {
    border-radius: 6px !important;
}

.club-editorial #app-container > main .navigation-card:hover,
.club-editorial #app-container > main :is(.tm-employee-card, .tm-conversation-item, .scouting-player-search-card):hover {
    border-color: var(--app-border) !important;
    box-shadow: none !important;
}

.club-editorial #app-container > main :is(.tm-employee-avatar, .navigation-card > div:first-child:not(:has(h3))) {
    border-color: var(--app-border);
    border-radius: 5px !important;
    background: #f4f6f8 !important;
    color: var(--app-text-secondary) !important;
}

.club-editorial :is(.content-section, .app-shell-modal) label,
.club-editorial :is(.content-section, .app-shell-modal) label.uppercase {
    font-size: 11px;
    font-weight: 600 !important;
    letter-spacing: .055em !important;
}

.club-editorial #app-container > main table:not(.fc-scrollgrid) th {
    background: #f6f7f8;
    font-size: 10px !important;
    letter-spacing: .065em !important;
}

.club-editorial :is(.login-title, .bulk-invite-title, .qr-signup-title) {
    font-size: 30px !important;
    font-weight: 650 !important;
    letter-spacing: -.02em !important;
}

@media (max-width: 767px) {
    .club-editorial.platform-ui #app-container > main {
        padding: 24px 20px 32px !important;
    }

    .club-editorial .page-title,
    .club-editorial .agenda-page-title,
    .club-editorial #planning .planning-page-header h2 {
        font-size: 32px !important;
    }
}

/*
 * De Graafschap blue content system
 * --------------------------------------------------------------------------
 * The navigation establishes the club palette.  These final, content-only
 * rules carry its #0870c6 → #0057a8 → #00417f progression into the workspace
 * in progressively lighter tones, so the page reads as one application rather
 * than a blue navigation next to a neutral canvas.
 */
:root {
    --app-bg: #ffffff;
    --app-surface: #fafdff;
    --app-surface-rgb: 250 253 255;
    --app-surface-raised: #e4f2fd;
    --app-border: #b8d8ee;
    --app-control-border: #a8cce7;
    --app-text: #073861;
    --app-text-secondary: #1a547e;
    --app-text-muted: #587b98;
    --app-accent: #005cad;
    --app-accent-strong: #00417f;
    --app-accent-hover: #00356a;
    --app-accent-text: #005cad;
    --app-accent-soft: #dcefff;
    --app-accent-border: #84bee6;
}

html,
body,
body.club-editorial {
    background: #ffffff !important;
}

.club-editorial.platform-ui #app-container > main {
    background: #ffffff !important;
}

.club-editorial .page-title,
.club-editorial .agenda-page-title,
.club-editorial #planning .planning-page-header h2,
.club-editorial #app-container > main :is(h1, h2, h3, h4, h5, h6) {
    color: var(--app-text) !important;
}

.club-editorial .page-title::before,
.club-editorial .agenda-page-title::before,
.club-editorial .login-title::before {
    display: block !important;
    width: 46px !important;
    height: 4px !important;
    margin: 0 0 12px !important;
    content: "" !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #0870c6 0%, #0057a8 55%, #00417f 100%) !important;
}

.club-editorial :is(.tm-eyebrow, .agenda-eyebrow, .planning-eyebrow, .scouting-map-eyebrow, .scouting-competitions-filter-modal-kicker) {
    color: var(--app-accent) !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
}

.club-editorial #app-container > main > .content-section:not(#videos) :is(.navigation-card, .weather-card, .agenda-panel, .planning-toolbar, .planning-table-shell, .tm-employee-card, .tm-conversation-item, .tm-modal-card, .scouting-competitions-table-card, .scouting-competition-detail-card, .scouting-profile-panel, .scouting-player-search-card, .scouting-country-tile, .scouting-team-tile, .scouting-player-tile),
.club-editorial #app-container > main > .content-section:not(#videos) :is([class*="bg-white"], [class*="bg-gray-50"], [class*="bg-gray-100"])[class*="rounded"]:not(button):not(a) {
    border-color: var(--app-border) !important;
    background: linear-gradient(135deg, rgb(255 255 255 / .96) 0%, #f3faff 62%, #e8f4fd 100%) !important;
    box-shadow: 0 8px 24px rgb(0 65 127 / .055) !important;
}

.club-editorial #app-container > main .navigation-card:hover,
.club-editorial #app-container > main :is(.tm-employee-card, .tm-conversation-item, .scouting-player-search-card):hover {
    border-color: var(--app-accent-border) !important;
    background: linear-gradient(135deg, #fff 0%, #e6f4ff 100%) !important;
    box-shadow: 0 12px 28px rgb(0 87 168 / .12) !important;
}

.club-editorial #app-container > main :is(.tm-employee-avatar, .navigation-card > div:first-child:not(:has(h3))) {
    border-color: var(--app-accent-border) !important;
    background: linear-gradient(145deg, #e8f5ff 0%, #d3ebfb 100%) !important;
    color: var(--app-accent) !important;
}

.club-editorial :is(.content-section, .app-shell-modal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea),
.club-editorial :is(.tm-search, .agenda-filter-row select, .scouting-competitions-filter-options) {
    border-color: var(--app-control-border) !important;
    background: rgb(255 255 255 / .86) !important;
}

.club-editorial :is(.content-section, .app-shell-modal) :is(input, select, textarea):hover {
    border-color: #72b3df !important;
}

.club-editorial :is(.content-section, .app-shell-modal) :is(input, select, textarea):focus,
.club-editorial :is(.content-section, .app-shell-modal) :is(input, select, textarea):focus-visible,
.club-editorial :is(.content-section, .app-shell-modal) .tm-search:focus-within {
    border-color: var(--app-accent) !important;
    outline-color: rgb(0 92 173 / .22) !important;
}

.club-editorial #app-container > main :is(button, a)[class*="bg-red-"],
.club-editorial #app-container > main :is(button, a)[class*="bg-blue-"],
.club-editorial #app-container > main :is(button, a)[class*="bg-emerald-"],
.club-editorial #app-container > main :is(button, a)[class*="bg-green-"],
.club-editorial :is(.tm-add-button, .tm-button-primary, .agenda-button-primary, .planning-button-primary, .planning-save-button),
.club-editorial :is(.login-primary-button, .bulk-invite-button, .qr-signup-button) {
    border-color: #00417f !important;
    background: linear-gradient(155deg, #0870c6 0%, #0057a8 56%, #00417f 100%) !important;
    box-shadow: 0 6px 14px rgb(0 76 148 / .18) !important;
}

.club-editorial #app-container > main :is(button, a)[class*="bg-red-"]:hover,
.club-editorial #app-container > main :is(button, a)[class*="bg-blue-"]:hover,
.club-editorial #app-container > main :is(button, a)[class*="bg-emerald-"]:hover,
.club-editorial #app-container > main :is(button, a)[class*="bg-green-"]:hover,
.club-editorial :is(.tm-add-button, .tm-button-primary, .agenda-button-primary, .planning-button-primary, .planning-save-button, .login-primary-button, .bulk-invite-button, .qr-signup-button):hover {
    border-color: #00356a !important;
    background: linear-gradient(155deg, #0057a8 0%, #00417f 100%) !important;
    box-shadow: 0 8px 18px rgb(0 65 127 / .26) !important;
}

.club-editorial #app-container > main :is(button, a)[class*="bg-gray-"],
.club-editorial #app-container > main :is(button, a)[class*="bg-white"],
.club-editorial :is(.tm-button-secondary, .agenda-button, .planning-button-dark) {
    border-color: var(--app-border) !important;
    background: rgb(255 255 255 / .78) !important;
    color: var(--app-text-secondary) !important;
}

.club-editorial #app-container > main table:not(.fc-scrollgrid) th,
.club-editorial :is(.scouting-competitions-table, .scouting-standings-table) th {
    background: linear-gradient(90deg, #dcefff 0%, #edf7ff 100%) !important;
    color: var(--app-text-secondary) !important;
}

.club-editorial #app-container > main table:not(.fc-scrollgrid) tbody tr:hover td,
.club-editorial #planning .planning-table tbody tr:nth-child(even) td,
.club-editorial #planning .planning-table tbody tr:hover td,
.club-editorial #planning .planning-table :is(th, td).is-today,
.club-editorial #planning .planning-table tbody tr td.is-today {
    background: #eaf6ff !important;
}

.club-editorial #app-container > main :is(.tm-empty-state, .scouting-countries-empty, .scouting-teams-empty, .scouting-teams-loading, .scouting-player-search-empty, .scouting-standings-empty, .planning-table-state),
.club-editorial #app-container > main [class*="empty"][class*="border"] {
    border-color: var(--app-border) !important;
    background: linear-gradient(135deg, #f6fbff 0%, #e2f2ff 100%) !important;
}

.club-editorial #agenda,
.club-editorial #planning,
.club-editorial .planning-export-clone {
    --app-bg: #ffffff;
    --app-surface: #fafdff;
    --app-surface-rgb: 250 253 255;
    --app-surface-raised: #e4f2fd;
    --app-border: #b8d8ee;
    --app-text: #073861;
    --app-text-secondary: #1a547e;
    --app-text-muted: #587b98;
    --app-accent: #005cad;
    --app-accent-strong: #00417f;
    --app-accent-hover: #00356a;
    --app-accent-text: #005cad;
    --app-accent-soft: #dcefff;
    --app-accent-border: #84bee6;
    --planning-line: #b8d8ee;
    --schedule-today: #e2f2ff;
}

.club-editorial #agenda .agenda-panel,
.club-editorial #agenda .fc,
.club-editorial #agenda .fc :is(.fc-scrollgrid-section-header > *, .fc-list, .fc-list-day-cushion),
.club-editorial #agenda .fc .fc-popover,
.club-editorial #planning :is(.planning-import-panel, .planning-toolbar, .planning-table-shell),
.club-editorial :is(.scouting-competitions-table-card, .scouting-competition-detail-card, .scouting-profile-panel, .scouting-player-search-card),
.club-editorial .app-shell-modal > :first-child,
.club-editorial :is(.login-card, .bulk-invite-panel, .qr-signup-panel) {
    border-color: var(--app-border) !important;
    background: linear-gradient(135deg, #fff 0%, #eef8ff 100%) !important;
}

.club-editorial #agenda :is(.agenda-step-controls, .agenda-view-controls),
.club-editorial #agenda .fc {
    --fc-border-color: #b8d8ee;
    --fc-page-bg-color: #fafdff;
    --fc-neutral-bg-color: #e7f4fd;
    --fc-neutral-text-color: #587b98;
    --fc-today-bg-color: #e2f2ff;
    background: #e7f4fd !important;
}

.club-editorial #agenda .fc .fc-day-today,
.club-editorial #agenda .fc .fc-col-header .fc-day-today {
    background: #e2f2ff !important;
    box-shadow: inset 0 3px 0 #005cad !important;
}

.club-editorial .tm-conversation-outcome {
    border-left-color: var(--app-accent) !important;
    background: #e9f5ff !important;
}