/* TaborNavigator – minimal theme overrides (layout via AntBlazor) */

:root {
    --primary: #059669;
    --primary-dark: #047857;
    --primary-light: #d1fae5;
    --accent: #f59e0b;
    --danger: #ef4444;
    --bg: #f9fafb;
    --header-h: 64px;
    /* Egy helyen kezelt betűtípus (rendszerfont, nincs külső webfont) és az
       auth-oldalak háttere. */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --auth-bg: #f0fdf4;
}

*, *::before, *::after { box-sizing: border-box; }

/* When switching Camps ↔ Categories, body height changes (shorter content while
   loading), and the scrollbar appearing/disappearing shifts the centered header by
   ~15px. Stable gutter always reserves this space. */
html { scrollbar-gutter: stable; }

body {
    /* Rendszer betűtípus (nincs külső webfont) → a szöveg azonnal, betű-villanás
       (FOIT/FOUT swap) nélkül renderel az egész oldalon, egységesen. */
    font-family: var(--font-sans);
    margin: 0;
    background: var(--bg);
}

/* Page width container applied to Row/Col.
   !important is required: the guttered ant Row writes inline negative margin on the
   row, which would otherwise override centering (header/footer would shift left). */
.tn-page-width {
    max-width: 1200px;
    margin: 0 auto !important;
    padding: 0 24px;
    width: 100%;
}

/* Layout */
.tn-layout { min-height: 100vh; background: var(--bg) !important; }
.tn-content { background: var(--bg) !important; padding: 0 !important; }

.tn-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    height: var(--header-h) !important;
    line-height: normal !important;
    padding: 0 !important;
}

/* Header menu – real links (NavLink) so they always work on first click */
.tn-header-menu { display: flex; align-items: center; gap: 4px; height: var(--header-h); }
.tn-nav-link {
    display: inline-flex; align-items: center; height: var(--header-h);
    padding: 0 16px; color: rgba(0,0,0,.75); font-weight: 500;
    text-decoration: none; border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.tn-nav-link:hover { color: var(--primary); }
.tn-nav-link.active { color: var(--primary); border-bottom-color: var(--primary); }

.tn-logo { display: inline-flex; align-items: center; height: var(--header-h); color: var(--primary); text-decoration: none; }
.tn-logo:hover { color: var(--primary-dark); }
.tn-logo-icon { display: block; width: 32px; height: 32px; }
/* Align brand icon and label on one vertical line in the header. */
.tn-logo .ant-space { align-items: center; }
.tn-logo .ant-space-item { display: inline-flex; align-items: center; }

.tn-footer { background: #1f2937 !important; color: #d1d5db; padding: 48px 0 16px !important; }
.tn-footer-link { color: #9ca3af; }
.tn-footer-link:hover { color: #fff; }

/* Hero & CTA gradients (Ant Card bodies) */
.tn-hero {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 45%, #0d9488 100%) !important;
    border: none !important;
    border-radius: 0 !important;
}
.tn-hero .ant-card-body { padding: 80px 24px !important; }
.tn-hero .ant-statistic-title { color: rgba(255,255,255,.7) !important; }
/* Double class selector to beat the .ant-btn-primary theme rule */
.tn-hero .tn-hero-search-btn { background: var(--accent) !important; border-color: var(--accent) !important; }
.tn-hero .tn-hero-search-btn:hover { background: #d97706 !important; border-color: #d97706 !important; }

.tn-section-alt { background: #f0fdf4; }

/* Clickable cards: Ant Card does not accept OnClick, so either a link wraps
   the card or a "stretched link" covers it. */
.tn-card-link-wrap { display: block; height: 100%; color: inherit; }
.tn-card-link-wrap:hover { color: inherit; }
.tn-category-card { height: 100%; }

.tn-camp-card { position: relative; height: 100%; }
.tn-camp-card .tn-card-link { position: absolute; inset: 0; z-index: 1; }
.tn-camp-card .tn-fav-btn { position: relative; z-index: 2; }

/* Camp list: vertical gap between stacked cards (mobile + desktop) */
.tn-camp-grid > .ant-col { margin-bottom: 24px; }

.tn-file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* My Account dropdown menu */
.tn-account-menu { width: 280px; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.tn-account-menu-head { padding: 16px; width: 100%; border-bottom: 1px solid #f0f0f0; }
.tn-account-menu .ant-menu { border-right: none; }

/* Header message bell: keep badge count from overlapping the My Account button */
.tn-msg-bell { margin-right: 12px; }

/* My Camps admin cards */
.tn-camp-admin-card .ant-card-body { display: flex; flex-direction: column; height: 100%; }
.tn-camp-admin-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    align-items: center;
}
.tn-camp-admin-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.65);
    line-height: 1.4;
}
.tn-camp-admin-meta-item .anticon { color: rgba(0, 0, 0, 0.45); flex-shrink: 0; }
.tn-camp-admin-meta-price { font-weight: 600; color: rgba(0, 0, 0, 0.88); }

/* Gallery */
.tn-gallery-card { overflow: hidden; }
.tn-gallery-card .ant-card-cover { margin: 0; }

/* Gallery cover picker (camp form) */
.tn-cover-pick { width: 84px; height: 60px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 3px solid transparent; transition: border-color .15s; }
.tn-cover-pick:hover { border-color: var(--primary-light); }
.tn-cover-pick-selected { border-color: var(--primary); }

/* Messaging UI */
.tn-conv-list { overflow: hidden; }
.tn-conv-item { padding: 12px 16px; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background .15s; }
.tn-conv-item:hover { background: #f6fdfb; }
.tn-conv-active { background: var(--primary-light); }
.tn-conv-active:hover { background: var(--primary-light); }

.tn-booking-panel { padding: 16px; background: #f9fafb; border-bottom: 1px solid #f0f0f0; }

.tn-thread { padding: 16px; max-height: 460px; overflow-y: auto; background: #fafafa; }
.tn-bubble .ant-card-body { border-radius: 12px; }
.tn-bubble { border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.tn-bubble-me { background: var(--primary-light); }
.tn-bubble-me .ant-card-body { background: var(--primary-light); }

.tn-composer { padding: 12px 16px; border-top: 1px solid #f0f0f0; }

.tn-cta {
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%) !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Sticky elements: Ant Affix used position:fixed on mobile and overlapped content
   (filter panel covered results and footer), so we use CSS sticky instead — filter/
   sidebar sticks only in desktop view. */
.tn-search-bar {
    background: #fff !important;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 0 !important;
    position: sticky;
    top: var(--header-h);
    z-index: 50;
}

@media (min-width: 992px) {
    .tn-filter-card { position: sticky; top: 152px; }
    .tn-side-sticky { position: sticky; top: 88px; }
}

.tn-detail-hero { border-radius: 0 !important; overflow: hidden; }
.tn-detail-hero .ant-breadcrumb a,
.tn-detail-hero .ant-breadcrumb-separator { color: rgba(255,255,255,.7) !important; }

/* Ant Design theme alignment */
.ant-btn-primary { background: var(--primary) !important; border-color: var(--primary) !important; }
.ant-btn-primary:hover { background: var(--primary-dark) !important; border-color: var(--primary-dark) !important; }

/* Auth pages (Razor Pages – Identity) */
.auth-page {
    min-height: 100vh;
    background: var(--auth-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}
.auth-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 8px 32px rgba(0,0,0,.14);
}
.auth-logo { font-size: 1.2rem; font-weight: 800; color: var(--primary); text-align: center; margin-bottom: 8px; }
.auth-title { font-size: 1.5rem; font-weight: 800; text-align: center; margin: 0 0 24px; }
.auth-footer { text-align: center; margin-top: 20px; font-size: 0.875rem; color: #6b7280; }
.auth-footer a { color: var(--primary); font-weight: 600; }
.form-field { margin-bottom: 16px; display: flex; flex-direction: column; }
.form-field label { font-size: 0.8rem; font-weight: 600; margin-bottom: 6px; }
.auth-input {
    width: 100%; height: 42px; padding: 0 14px;
    border: 1px solid #e5e7eb; border-radius: 8px; font-size: 0.95rem;
}
.auth-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.auth-submit {
    width: 100%; height: 46px; margin-top: 8px;
    background: var(--primary); color: #fff; border: none; border-radius: 8px;
    font-size: 1rem; font-weight: 600; cursor: pointer;
}
.auth-submit:hover { background: var(--primary-dark); }
.auth-alert-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.auth-alert-success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; line-height: 1.5; }
.auth-field-error { color: #b91c1c; font-size: 0.78rem; margin-top: 4px; }
/* Login: "Remember me" + "Forgot your password?" on one row */
.auth-login-row { flex-direction: row; align-items: center; justify-content: space-between; }
.auth-forgot-link { font-size: 0.85rem; color: var(--primary); font-weight: 600; }
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.role-card { border: 2px solid #e5e7eb; border-radius: 12px; padding: 20px; cursor: pointer; text-align: center; }
.role-card.selected, .role-card:hover { border-color: var(--primary); background: var(--primary-light); }

/* Blazor error UI */
#blazor-error-ui {
    background: #ffe0e0; bottom: 0; left: 0; width: 100%;
    padding: 0.6rem 1.25rem; position: fixed; z-index: 1000; display: none;
}

/* Category icon box: plain CSS-flex centering instead of AntDesign Avatar. The
   Avatar measures and transforms its child AFTER render (via JS), which makes the
   icon visibly jump to center on load. A flex box keeps it centered from the first
   paint, with no JS. */
.tn-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1;
}
.tn-icon-box .anticon { line-height: 1; }

/* Legal / policy pages (Adatvédelem): readable long-form document layout. */
.tn-legal { color: rgba(0,0,0,.72); font-size: 1rem; line-height: 1.8; }
.tn-legal h2.ant-typography { font-size: 1.2rem; margin: 32px 0 12px; }
.tn-legal .ant-typography { color: inherit; }
.tn-legal a { color: var(--primary); font-weight: 600; }
.tn-legal-list { margin: 0 0 16px; padding-left: 1.25rem; }
.tn-legal-list li { margin-bottom: 8px; }

@media (max-width: 768px) {
    /* Hide menu links but keep the column as a spacer so right-side buttons
       (Messages, My Account) stay at the header's right edge. */
    .tn-header-menu { display: none; }
    /* Keep header on one row (don't wrap My Account under the logo). */
    .tn-header .ant-row { flex-wrap: nowrap; }
    /* On narrow screens show only the ⛺ icon, hide the long wordmark — so
       right-side buttons fit for every role. */
    .tn-logo-text { display: none; }
    /* Dashboard is also in the My Account menu; remove it from the header on mobile. */
    .tn-dash-btn { display: none; }
    .role-grid { grid-template-columns: 1fr; }
}