/*
 * SriJova app shell. Defines SriJova design tokens, light/dark theme via [data-theme-mode],
 * the .app-sidebar / .app-header / .main-content frame, and class shims for the
 * markup the focused prompts emit (.custom-card, .avatar, .bg-{tone}-transparent,
 * .side-menu__item, .slide__category, .crm-highlight-card, .btn-wave, etc.).
 *
 * Why a shim layer: the full SriJova Bootstrap admin template (Spruko derivative)
 * is not in this repo. We define just enough of its class surface so the focused
 * prompts' markup renders acceptably; visuals will approximate the template,
 * but structure / a11y / role gating are correct.
 */

/* ===== Design tokens (light defaults) ===== */
:root {
    /* InviteToJoin Theme v1 — navy nav, action blue, green success, purple accent.
       Aligned to srijova-design-system.css's --srijova-brand (#1E6FE0 action blue). */
    --primary-rgb: 30, 111, 224;    /* Action Blue #1E6FE0 */
    --secondary-rgb: 20, 40, 74;    /* Navy #14284A */
    --success-rgb: 67, 168, 59;     /* #43A83B */
    --warning-rgb: 245, 158, 11;    /* #F59E0B */
    --danger-rgb: 229, 57, 53;      /* #E53935 */
    --info-rgb: 0, 180, 219;        /* #00B4DB */
    --accent-rgb: 124, 58, 237;     /* Accent Purple #7C3AED */
    --navy: #14284A;

    --primary-color: rgb(var(--primary-rgb));
    --secondary-color: rgb(var(--secondary-rgb));
    --default-text-color: #4b5366;
    --default-text-color-rgb: 75, 83, 102;
    --default-background: #f6f8fc;
    --default-body-bg-rgb: 246, 248, 252;
    --custom-white: #ffffff;
    --custom-black: #0f172a;
    --default-border: #e6eaf2;
    --header-bg: #ffffff;
    --header-border-color: var(--default-border);
    --header-prime-color: #4b5366;
    /* Navy sidebar (sample look) */
    --menu-bg: #14284A;
    --menu-prime-color: #b8c4da;
    --menu-border-color: rgba(255, 255, 255, 0.08);
    --form-control-bg: #ffffff;
    --form-control-border: #e2e8f0;
    --muted: #475569;

    /* One control, everywhere. These are Quick Invite's values, which were the most
       considered of the three sets the app had grown: Bootstrap's defaults on the Custom
       and Premium pages, hand-rolled .qi-* here and slightly tighter .sd-* on SaveDate, so
       the same field was three different heights depending on which page you opened it in.
       Anything that wants to look like a text box now reads these rather than picking its
       own padding, and changing a control app-wide is changing one number. */
    --itj-control-pad-y: 12px;
    --itj-control-pad-x: 14px;
    --itj-control-radius: var(--itj-radius-md, 10px);
    --itj-control-border-color: var(--itj-border, #e2e8f0);
    --itj-control-focus-color: var(--itj-action, #1e6fe0);
    --itj-control-focus-ring: 0 0 0 4px rgba(30, 111, 224, .12);
    --itj-control-invalid-color: var(--itj-error, #e53935);
    --itj-control-invalid-ring: 0 0 0 4px rgba(229, 57, 53, .10);

    --default-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --display-font-family: var(--default-font-family);
}

/* ===== Dark mode =====
   Surfaces are TIERED so cards visually stand off the body:
       body bg     #14161f  ←  darkest
       sidebar     #1a1d29
       header      #1a1d29
       card        #252836  ←  lighter than body so it pops
       hover       #2d3142  ←  lighter still
   The srijova-design-system tokens are overridden here too so components from that layer
   (.card, .srijova-surface, .srijova-tile, .srijova-chip, .srijova-event-tile, .srijova-metric) flip cleanly. */
/* ===== Cream mode =====
   Warm cream page bg, white sidebar + cards, beige borders. Brand stays indigo.
   Mirrors the [data-theme-mode="cream"] block in srijova-design-system.css. */
/* InviteToJoin v1: "cream" repointed to the theme's cool palette (no more warm cream)
   so a persisted cream preference still renders the correct navy/blue theme. */
[data-theme-mode="cream"] {
    --default-text-color: #475569;
    --default-text-color-rgb: 71, 85, 105;
    --default-background: #f6f8fc;
    --default-body-bg-rgb: 246, 248, 252;
    --custom-white: #ffffff;
    --custom-black: #0f172a;
    --default-border: #e6eaf2;
    --header-bg: #ffffff;
    --header-border-color: var(--default-border);
    --header-prime-color: #475569;
    --menu-bg: #14284A;
    --menu-prime-color: #b8c4da;
    --menu-border-color: rgba(255, 255, 255, 0.08);
    --form-control-bg: #ffffff;
    --form-control-border: #e2e8f0;
    --muted: #64748b;
}

[data-theme-mode="dark"] {
    --default-text-color: #e2e6ee;
    --default-text-color-rgb: 226, 230, 238;
    --default-background: #14161f;
    --default-body-bg-rgb: 20, 22, 31;
    --custom-white: #252836;             /* card bg — distinctly lighter than body */
    --custom-black: #f1f5f9;             /* high-contrast headings */
    --default-border: rgba(255, 255, 255, 0.08);
    --header-bg: #1a1d29;
    --header-border-color: rgba(255, 255, 255, 0.06);
    --header-prime-color: #e2e6ee;
    --menu-bg: #1a1d29;
    --menu-prime-color: #cbd0dd;
    --menu-border-color: rgba(255, 255, 255, 0.06);
    --form-control-bg: #252836;
    --form-control-border: rgba(255, 255, 255, 0.12);
    --muted: #a3aac0;

    /* srijova-design-system token overrides for dark mode — keep tiles/chips/surfaces readable. */
    --srijova-bg: #14161f;
    --srijova-surface: #252836;
    --srijova-surface-hover: #2d3142;
    --srijova-border: rgba(255, 255, 255, 0.08);
    --srijova-border-strong: rgba(255, 255, 255, 0.18);
    --srijova-text: #e2e6ee;
    --srijova-text-muted: #a3aac0;
    --srijova-text-subtle: #7d8398;
    --srijova-brand-50: rgba(99, 102, 241, 0.18);
    --srijova-success-bg: rgba(16, 185, 129, 0.18);
    --srijova-danger-bg: rgba(239, 68, 68, 0.18);
    --srijova-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
    --srijova-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4),  0 2px 4px -2px rgba(0, 0, 0, 0.25);
    --srijova-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -4px rgba(0, 0, 0, 0.25);
}

[data-header-styles="dark"] {
    --header-bg: #2a2d3a;
    --header-prime-color: #cbd0dd;
}

/* ===== Base ===== */
html, body {
    font-family: var(--default-font-family);
    background: var(--default-background);
    color: var(--default-text-color);
}
h1, h2, h3, h4, h5, h6 { font-family: var(--display-font-family); color: var(--custom-black); }
a { color: var(--primary-color); }

/* ===== Layout frame ===== */
.page { display: flex; flex-direction: column; min-height: 100vh; }
.main-content { flex: 1; padding-top: 64px; }   /* clear the sticky header */
.app-content { padding-left: 248px; }            /* clear the sticky sidebar at md+ */

/* The sidebar and header are fixed, so they stay put when the page scrolls sideways - and
   whatever the page scrolled past ends up underneath them. That is how the rail came to
   cover the content: one over-wide element, and the whole page slid beneath it.

   overflow-x: clip stops the sideways scroll without making a scroll container, so sticky
   footers and fixed elements keep working. min-width: 0 lets the content column actually
   shrink; without it a wide grid or table pushes the column out instead of fitting in.
   Wide things that genuinely need room scroll inside their own box. */
.page { overflow-x: clip; }
.main-content, .app-content, .app-content > .container-fluid { min-width: 0; max-width: 100%; }
.container-fluid { padding-left: 1.5rem; padding-right: 1.5rem; }

/* ===== Header ===== */
.app-header {
    position: fixed; top: 0; left: 248px; right: 0;
    height: 64px;
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border-color);
    z-index: 1030;
    display: flex; align-items: center;
}
.main-header-container {
    display: flex; align-items: center; gap: 0.75rem;
    width: 100%; padding: 0 1rem;
}
.header-element { display: flex; align-items: center; }
.header-link {
    color: var(--header-prime-color);
    text-decoration: none;
    padding: 0.5rem;
    display: inline-flex; align-items: center; gap: 0.5rem;
    min-height: 40px; min-width: 40px; justify-content: center;
    border-radius: 6px;
}
.header-link:hover { background: rgba(var(--default-text-color-rgb), 0.06); color: var(--primary-color); }
.flex-fill { flex: 1; }

/* ===== Sidebar ===== */
.app-sidebar {
    position: fixed; top: 64px; left: 0; bottom: 0;
    width: 248px;
    background: var(--menu-bg);
    border-right: 1px solid var(--menu-border-color);
    overflow-y: auto;
    z-index: 1020;
    transition: transform 200ms ease;
}
.main-sidebar-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--menu-border-color);
}
.main-sidebar-header .header-logo {
    display: flex; align-items: center; gap: 0.5rem;
    font-family: var(--display-font-family);
    font-weight: 700; font-size: 1.05rem;
    color: var(--custom-black);
    text-decoration: none;
}
.main-sidebar { padding: 0.75rem 0.5rem 2rem; }

.main-menu-container, .main-menu {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.15rem;
}
.slide__category {
    padding: 1.1rem 0.75rem 0.35rem;
    color: var(--muted);
    font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.slide__category .category-name { display: inline; }
.slide { list-style: none; }
.side-menu__item {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    color: var(--menu-prime-color);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.92rem;
    min-height: 44px;
}
.side-menu__item:hover { background: rgba(var(--primary-rgb), 0.08); color: var(--primary-color); }
.side-menu__item.active {
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary-color);
    font-weight: 600;
}
.side-menu__icon { width: 18px; text-align: center; opacity: 0.85; }
.side-menu__label { flex: 1; }

/* Sidebar collapses on small screens (toggle adds .sidebar-open) */
@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); }
    html.sidebar-open .app-sidebar { transform: translateX(0); }
    .app-content { padding-left: 0; }
    .app-header { left: 0; }   /* header spans full width when sidebar is hidden */
}

/* ===== Footer ===== */
.footer {
    border-top: 1px solid var(--default-border);
    background: var(--header-bg);
    color: var(--muted);
    padding: 0.75rem 1rem;
    margin-top: auto;
    text-align: center;
}

/* ===== Cards ===== */
.custom-card {
    background: var(--custom-white);
    border: 1px solid var(--default-border);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.custom-card .card-header {
    border-bottom: 1px solid var(--default-border);
    background: transparent;
    padding: 0.85rem 1rem;
    display: flex; align-items: center; justify-content: space-between;
}
.custom-card .card-title { font-size: 0.95rem; font-weight: 600; margin: 0; color: var(--custom-black); }
.custom-card .card-body { padding: 1rem; }
.custom-card .card-footer { border-top: 1px solid var(--default-border); background: transparent; padding: 0.65rem 1rem; }

/* The signature CRM highlight card — used by the anonymous hero */
.crm-highlight-card {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 1), rgba(var(--secondary-rgb), 0.9));
    border: 0;
    color: #fff;
}
.crm-highlight-card .text-fixed-white,
.text-fixed-white { color: #fff !important; }

/* ===== Metric card (KPI) ===== */
.metric-card { transition: transform 120ms ease, box-shadow 120ms ease; }
.metric-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.metric-card h4 { color: var(--custom-black); }

/* ===== Event card ===== */
.event-card__cover { height: 160px; object-fit: cover; width: 100%; }
/* The nav-tile flavour of EventTile is an <a>, so without an explicit color
   its children would inherit var(--primary-color) (indigo) — invisible on a
   dark card. Force the default text color and let .text-muted handle the subtitle. */
.event-tile {
    transition: transform 120ms ease, box-shadow 120ms ease;
    color: var(--default-text-color);
}
.event-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    color: var(--default-text-color);
}
.event-tile .fw-semibold { color: var(--custom-black); }
.event-tile .text-muted  { color: var(--muted) !important; }

/* ===== Avatars ===== */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 6px; font-weight: 600; font-size: 0.85rem;
}
.avatar-sm { width: 28px; height: 28px; font-size: 0.75rem; }
.avatar-md { width: 36px; height: 36px; }
.avatar-rounded { border-radius: 50%; }

/* ===== Tone helpers (shim around Bootstrap's bg-*-subtle) ===== */
.bg-primary-transparent   { background-color: rgba(var(--primary-rgb), 0.12) !important; }
.bg-secondary-transparent { background-color: rgba(var(--default-text-color-rgb), 0.1) !important; }
.bg-success-transparent   { background-color: rgba(var(--success-rgb), 0.12) !important; }
.bg-warning-transparent   { background-color: rgba(var(--warning-rgb), 0.12) !important; }
.bg-danger-transparent    { background-color: rgba(var(--danger-rgb), 0.12) !important; }
.bg-info-transparent      { background-color: rgba(var(--info-rgb), 0.12) !important; }
.text-primary   { color: rgb(var(--primary-rgb)) !important; }
.text-secondary { color: var(--muted) !important; }
.text-success   { color: rgb(var(--success-rgb)) !important; }
.text-warning   { color: rgb(var(--warning-rgb)) !important; }
.text-danger    { color: rgb(var(--danger-rgb)) !important; }
.text-info      { color: rgb(var(--info-rgb)) !important; }
.text-muted     { color: var(--muted) !important; }

/* ===== Buttons (lightweight extensions on top of Bootstrap) ===== */
.btn-wave { position: relative; overflow: hidden; }
.btn-light {
    background: rgba(var(--default-text-color-rgb), 0.05);
    color: var(--default-text-color);
    border: 0;
}
.btn-icon { padding: 0.35rem 0.55rem; line-height: 1; min-height: 36px; min-width: 36px; }
.btn-list { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* ===== Accessibility — focus rings (SriJova rule 1.7) ===== */
:focus-visible,
.side-menu__item:focus-visible,
.header-link:focus-visible,
.btn:focus-visible,
.card a:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ===== Typography helpers used by prompts ===== */
.fs-11 { font-size: 0.6875rem !important; }
.fs-12 { font-size: 0.75rem !important; }
.fs-13 { font-size: 0.8125rem !important; }
.fs-14 { font-size: 0.875rem !important; }
.fs-16 { font-size: 1rem !important; }
.fs-18 { font-size: 1.125rem !important; }
.fs-20 { font-size: 1.25rem !important; }
.fs-32 { font-size: 2rem !important; }
.op-7 { opacity: 0.7; }
.op-8 { opacity: 0.85; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }

/* ===== Authentication shell (EmptyLayout) ===== */
.authentication-body { min-height: 100vh; background: var(--default-background); }
.authentication { min-height: 100vh; }
.authentication-brand {
    font-family: var(--display-font-family);
    font-weight: 700; font-size: 1.25rem;
    color: var(--primary-color);
}
.authentication-brand-link { text-decoration: none; }
.authentication-cover {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 1), rgba(var(--secondary-rgb), 0.9));
    height: 100vh;
}
.authentication-cover-content { height: 100%; display: flex; align-items: center; }

/* ===== Decorative rainbow strip (top of MainLayout) ===== */
.app-rainbow-strip {
    position: fixed; top: 0; left: 0; right: 0;
    height: 4px;
    z-index: 1040;
    background: linear-gradient(90deg,
        #ff8a00 0%, #ff5be0 25%, #8b5cf6 50%, #3b82f6 75%, #14b8a6 100%);
}
/* push header down a touch so the strip remains visible above it.
   Sidebar runs full-height (its own logo header sits at the top); the app header
   sits only over the content area (offset by the sidebar width). */
.app-header { top: 4px; }
.app-sidebar { top: 4px; }
.main-content { padding-top: 68px; }

/* ===== Sidebar brand block ===== */
.main-sidebar-header .header-logo {
    display: flex; align-items: center; gap: 0.7rem;
    text-decoration: none;
}
.main-sidebar-header .brand-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.18), rgba(var(--primary-rgb), 0.06));
    color: var(--primary-color);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
}
.main-sidebar-header .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.main-sidebar-header .brand-text__name {
    font-family: var(--display-font-family);
    font-size: 1rem; color: var(--custom-black); letter-spacing: -0.01em;
}
.main-sidebar-header .brand-text__name strong { font-weight: 700; }
.main-sidebar-header .brand-text__tld { font-weight: 500; opacity: 0.7; }
.main-sidebar-header .brand-text__tag {
    font-size: 0.7rem; color: var(--muted);
    margin-top: 2px; letter-spacing: 0.01em;
}

/* ===== Sidebar footer ===== */
/* The footer states the colour once and its contents inherit.
   Each child used to be coloured with --muted, which is a CONTENT-AREA token - #475569 and
   #64748b in the two light palettes - while the rail behind it is var(--sj-sidebar), a
   palette gradient that srijova-shell.css maps --menu-bg onto. The contact address came out
   near-invisible: dark grey on navy. --sj-sidebar-text follows each palette, including the two whose
   sidebar is light and whose text is therefore dark.

   Full strength rather than --sj-sidebar-muted, which is what the rest of the rail uses for
   secondary text. That token is a 65% mix and lands at 3.0-3.3:1 over these four gradients -
   fine for a UI element, short of the 4.5:1 that 0.7rem body text needs, and nothing short
   of 100% clears it in all four (terracotta still reads 4.4:1 at 90%). A contact address is
   there to be read, so it is coloured to be read. */
.main-sidebar-footer {
    position: sticky; bottom: 0;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--menu-border-color);
    background: var(--menu-bg);
    color: var(--sj-sidebar-text);
}
.sidebar-contact {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.7rem; color: inherit;
    letter-spacing: 0.02em; text-decoration: none;
    /* The address is longer than a collapsed rail and longer than some narrow
       sidebars, so it is allowed to break rather than widen the rail. */
    overflow-wrap: anywhere;
}
/* Underline alone on hover - the colour is already at full strength, and moving across to
   the brand accent would drop contrast again on a rail it was never chosen against. */
.sidebar-contact:hover, .sidebar-contact:focus-visible { text-decoration: underline; }
.sidebar-contact .bx { font-size: 0.95rem; flex: 0 0 auto; }
/* Privacy choices sits under the contact line and matches it, rather than arriving as a
   default-blue underlined link. Inheriting is deliberate: PrivacyChoicesLink declares
   color:inherit in its own style block, which is injected after this sheet and wins, so
   naming a colour here only ever looked like it applied. It is hidden when the sidebar
   collapses, like the contact text beside it. */
.sidebar-privacy { display: block; margin-top: 6px; font-size: 0.7rem;
                   color: inherit; letter-spacing: 0.02em; text-decoration: none; }
.sidebar-privacy:hover, .sidebar-privacy:focus-visible { text-decoration: underline; }
.app-sidebar.is-collapsed .sidebar-privacy { display: none; }
/* App sidebar uses flex column to push the footer down */
.app-sidebar { display: flex; flex-direction: column; }
.main-sidebar { flex: 1; }

/* ===== Header brand + signed-in pill ===== */
.app-header__brand {
    color: var(--custom-black) !important;
    font-size: 1rem;
}
.app-header__usertoggle { padding: 0.3rem 0.6rem; gap: 0.55rem; border-radius: 999px; }
.app-header__usertoggle:hover { background: rgba(var(--primary-rgb), 0.08); }
.app-header__user .dropdown-toggle::after { display: none; }
.app-header__avatar {
    width: 34px; height: 34px;
    background: linear-gradient(135deg, var(--navy, #14284A), rgb(var(--primary-rgb)));
    color: #fff;
    font-weight: 600;
}
.app-header__who { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.app-header__name { font-size: 0.85rem; font-weight: 600; color: var(--custom-black); }
.app-header__role { font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.app-header__caret { color: var(--muted); font-size: 1.1rem; }
@media (max-width: 575.98px) { .app-header__who, .app-header__caret { display: none; } }

/* ===== Welcome hero polish ===== */
.welcome-hero__title { font-size: 2rem; }
.welcome-hero .btn-light { color: var(--primary-color); font-weight: 600; }
.welcome-hero .btn-outline-light { border-color: rgba(255,255,255,0.6); color: #fff; }

/* ===== Event tile (Event-mode, used on /events) =====
   Icon-avatar left, title + chip header, description, meta row, action row.
   Overrides the cover-image-top markup that srijova-design-system.css ships. */
.srijova-event-tile {
    background: var(--srijova-surface);
    border: 1px solid var(--srijova-border);
    border-radius: var(--srijova-radius);
    box-shadow: var(--srijova-shadow-sm);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.srijova-event-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--srijova-shadow-md);
    border-color: var(--srijova-brand-light);
}
.srijova-event-tile__row {
    display: flex; gap: 1rem;
    padding: 1rem 1.1rem;
}
.srijova-event-tile__icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
}
.srijova-event-tile__icon--brand   { background: var(--srijova-brand-50);   color: var(--srijova-brand); }
.srijova-event-tile__icon--success { background: var(--srijova-success-bg); color: var(--srijova-success); }
.srijova-event-tile__icon--warning { background: #fffbeb;               color: #92400e; }
.srijova-event-tile__icon--danger  { background: var(--srijova-danger-bg);  color: var(--srijova-danger); }
.srijova-event-tile__icon--neutral { background: var(--srijova-surface-hover); color: var(--srijova-text-muted); }
.srijova-event-tile__body { flex: 1; min-width: 0; }
.srijova-event-tile__header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
    margin-bottom: 0.35rem;
}
.srijova-event-tile__title {
    font-size: 1.05rem; font-weight: 600;
    color: var(--srijova-text); margin: 0;
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.srijova-event-tile__desc {
    color: var(--srijova-text-muted);
    font-size: 0.875rem;
    margin: 0 0 0.5rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.srijova-event-tile__meta {
    display: flex; flex-wrap: wrap; gap: 0.75rem 1rem;
    font-size: 0.8125rem; color: var(--srijova-text-muted);
}
.srijova-event-tile__meta-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.srijova-event-tile__meta-item i.bx { font-size: 0.95rem; opacity: 0.85; }
.srijova-event-tile__actions {
    border-top: 1px solid var(--srijova-border);
    background: var(--srijova-bg);
    padding: 0.55rem 0.9rem;
    display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.srijova-event-tile__actions .btn { padding: 0.3rem 0.7rem; font-size: 0.8125rem; }
/* Grid wrapper used by Events.razor */
.srijova-event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1rem;
}

/* Definition-list grid used by EventDesigner detail card + EventSubmissions answer preview */
.srijova-event-meta-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1rem;
    margin: 0;
}
.srijova-event-meta-list dt {
    font-weight: 500; color: var(--srijova-text-muted);
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.875rem;
}
.srijova-event-meta-list dt i.bx { font-size: 1rem; opacity: 0.85; }
.srijova-event-meta-list dd { margin: 0; color: var(--srijova-text); font-size: 0.9rem; }

/* Stronger srijova-chip dark-theme variants used by event-tile header chips */
.srijova-chip--neutral { background: var(--srijova-surface-hover); color: var(--srijova-text-muted); }
.srijova-chip--brand   { background: var(--srijova-brand-50);   color: var(--srijova-brand-dark); }

/* ===== Anonymous shell polish (EmptyLayout) =====
   Styles the bare inputs + plain <button> the SriJova RCL components render inside
   the .srijova-signin__card. Scoped under .srijova-anon so they don't leak into the
   authenticated shell. */
.srijova-anon-brand__icon-wrap {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.18), rgba(var(--primary-rgb), 0.06));
    color: rgb(var(--primary-rgb));
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    margin-right: 0.7rem;
}
.srijova-anon-brand { align-items: center; }

.srijova-anon .srijova-signin__card .form-control,
.srijova-anon .srijova-signin__card input[type=email],
.srijova-anon .srijova-signin__card input[type=password],
.srijova-anon .srijova-signin__card input[type=text] {
    width: 100%;
    background: var(--form-control-bg, var(--srijova-surface));
    border: 1px solid var(--form-control-border, var(--srijova-border-strong));
    color: var(--srijova-text);
    border-radius: var(--srijova-radius-sm);
    padding: 0.6rem 0.85rem;
    font-size: 0.95rem;
    margin-bottom: 0.9rem;
}
.srijova-anon .srijova-signin__card input:focus {
    outline: 2px solid rgb(var(--primary-rgb));
    outline-offset: 1px;
    border-color: rgb(var(--primary-rgb));
}
.srijova-anon .srijova-signin__card label {
    display: block;
    font-size: 0.85rem; font-weight: 500;
    color: var(--srijova-text);
    margin-bottom: 0.35rem;
}
/* Style every <button> inside the card EXCEPT link-style buttons and Bootstrap close buttons. */
.srijova-anon .srijova-signin__card button {
    width: 100%;
    background: linear-gradient(135deg, rgb(var(--primary-rgb)), #8b5cf6);
    color: #fff;
    border: 0;
    border-radius: var(--srijova-radius-sm);
    padding: 0.65rem 1rem;
    font-weight: 600; font-size: 0.95rem;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25);
    margin-top: 0.25rem;
}
.srijova-anon .srijova-signin__card button.btn-link,
.srijova-anon .srijova-signin__card button.btn-close {
    background: none; box-shadow: none; padding: 0; width: auto; color: inherit;
}
.srijova-anon .srijova-signin__card button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.35); }
.srijova-anon .srijova-signin__card button:active { transform: translateY(0); }
.srijova-anon .srijova-signin__card button.btn-link:hover,
.srijova-anon .srijova-signin__card button.btn-close:hover { transform: none; box-shadow: none; }
.srijova-anon .srijova-signin__card h1,
.srijova-anon .srijova-signin__card h2,
.srijova-anon .srijova-signin__card h3 {
    font-size: 1.4rem; font-weight: 700; margin-bottom: 0.4rem;
    color: var(--srijova-text);
    font-family: var(--display-font-family);
}
.srijova-anon .app-rainbow-strip { position: fixed; }
.srijova-anon-top { padding-top: 1.6rem; }

/* ===== Two-column auth split (form left, cover right) ===== */
.srijova-anon--split { min-height: 100vh; display: flex; flex-direction: column; }
.srijova-anon-split {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 0;
}
.srijova-anon-split__form {
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem 2rem 3rem;
}
.srijova-anon-split__form .srijova-signin { width: 100%; max-width: 460px; }
.srijova-anon-split__form .srijova-signin__card {
    background: var(--srijova-surface);
    border: 1px solid var(--srijova-border);
    border-radius: var(--srijova-radius-lg);
    padding: 2.25rem 2rem;
    box-shadow: var(--srijova-shadow-lg);
}
.srijova-anon-split__cover {
    align-self: stretch;
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
}
.srijova-anon-cover {
    width: 100%; height: 100%;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18), transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,0.15), transparent 50%),
        linear-gradient(135deg, rgb(var(--primary-rgb)) 0%, #8b5cf6 55%, #ec4899 100%);
    border-radius: var(--srijova-radius-lg);
    display: flex; align-items: center; justify-content: center;
    padding: 3rem 2.5rem;
    color: #fff;
    box-shadow: var(--srijova-shadow-lg);
    position: relative;
    overflow: hidden;
    min-height: 540px;
}
.srijova-anon-cover__inner { max-width: 460px; }
.srijova-anon-cover__title {
    font-family: var(--display-font-family);
    font-size: 2.5rem; font-weight: 700; letter-spacing: -0.02em;
    color: #fff; margin-bottom: 1rem; line-height: 1.1;
}
.srijova-anon-cover__lede {
    font-size: 1.05rem; line-height: 1.55;
    color: rgba(255,255,255,0.92);
    margin-bottom: 1.75rem;
}
.srijova-anon-cover__bullets {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 0.65rem;
}
.srijova-anon-cover__bullets li {
    display: flex; align-items: center; gap: 0.55rem;
    font-size: 0.95rem; color: rgba(255,255,255,0.92);
}
.srijova-anon-cover__bullets i.bx {
    font-size: 1.1rem; color: rgba(255,255,255,0.9); opacity: 0.95; flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .srijova-anon-split { grid-template-columns: minmax(0, 1fr); }
    .srijova-anon-split__cover { display: none; }
}

/* ===== Anonymous landing extras (over srijova-design-system.css) ===== */
/* Big rounded logo tile centered in the hero. */
.srijova-landing__logo {
    width: 96px; height: 96px;
    margin: 0 auto 1rem;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.18), rgba(var(--primary-rgb), 0.06));
    color: rgb(var(--primary-rgb));
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
}
/* Accent chip under the logo. */
.srijova-landing__chip {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    margin-bottom: 1rem;
    font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.12em;
    color: #c2410c;
    background: #fff7ed;
    border-radius: 999px;
}
[data-theme-mode="dark"] .srijova-landing__chip {
    color: #fdba74;
    background: rgba(249, 115, 22, 0.16);
}
/* Center the CTA button row. */
.srijova-landing__cta { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
/* Feature-icon tone variants matching the home Quick-actions. */
.srijova-feature__icon--brand   { background: var(--srijova-brand-50);   color: var(--srijova-brand); }
.srijova-feature__icon--accent  { background: #fff7ed;               color: var(--srijova-accent); }
.srijova-feature__icon--success { background: var(--srijova-success-bg); color: var(--srijova-success); }
[data-theme-mode="dark"] .srijova-feature__icon--accent { background: rgba(249, 115, 22, 0.18); color: #fb923c; }
.srijova-feature__icon i.bx { font-size: 1.2rem; }
/* Tighten landing padding on the auth shell (which already has its own top brand). */
.srijova-anon .srijova-landing { padding: 1.5rem 1rem 3rem; }

/* ===== Public RSVP hero (prompt 07) ===== */
.public-hero {
    min-height: 220px;
    background-size: cover; background-position: center;
    background-color: rgb(var(--primary-rgb));
    display: flex; align-items: flex-end;
}
.public-hero__overlay {
    width: 100%; padding: 1.5rem 2rem;
    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
}

/* ===== InviteToJoin v1 — navy sidebar (default/light theme only) =====
   Cream/dark modes keep their own --menu-* values, so scope the light-on-navy
   text to the default theme (no data-theme-mode attribute). */
/* Animated backdrop on the public invitation — sits inside .hero-art, behind the
   scrim and hero copy. The component paints its own gradient, so it also covers
   the case where the organizer set an animation but no cover image. */
.hero-art { position: relative; }
.hero-anim { position: absolute; inset: 0; z-index: 0; }
.hero-anim .itj-anim { height: 100%; border-radius: 0; }
.hero-art__scrim, .hero-content { position: relative; z-index: 1; }

/* ── Sidebar — colours, spacing and collapse behaviour from the nav-menu design ──
   Deep navy gradient with a soft top-left glow; every row is an icon tile plus a
   label, so the rail still reads when collapsed to icons only. */
.app-sidebar {
    /* Colour comes from the palette. This rule used to force a navy gradient with
       !important, which beat every later stylesheet and pinned the sidebar to one
       look whatever palette was chosen - while its text colour, not being
       important, lost to the palette. Dark text on a dark rail was the result. */
    transition: width .22s ease;
}
.app-sidebar .main-sidebar-header { position: relative; border-bottom: 1px solid rgba(255,255,255,.07); }
.sidebar-collapse {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border: 0; border-radius: 8px;
    background: var(--sj-sidebar-hover); color: var(--sj-sidebar-text); font-size: 18px; line-height: 1;
    display: grid; place-items: center; cursor: pointer;
}
.sidebar-collapse:hover { background: rgba(255,255,255,.12); }

.app-sidebar .slide__category .category-name,
.app-sidebar .category-name {
    color: var(--sj-sidebar-muted); font-size: 9px; font-weight: 850; letter-spacing: .9px; text-transform: uppercase;
}

.app-sidebar .side-menu__item {
    min-height: 40px; display: grid; grid-template-columns: 32px 1fr auto; gap: 6px;
    align-items: center; margin: 1px 0; padding: 4px 8px; border-radius: 10px; color: var(--sj-sidebar-text);
}
.app-sidebar .side-menu__item:hover { background: var(--sj-sidebar-hover); color: var(--sj-sidebar-text); }
.app-sidebar .side-menu__tile {
    width: 29px; height: 29px; border-radius: 8px; background: var(--sj-sidebar-hover);
    color: var(--sj-sidebar-text); display: grid; place-items: center; font-size: 16px;
}
.app-sidebar .side-menu__label { font-size: 13px; }
.app-sidebar .side-menu__item.active {
    background: linear-gradient(135deg, rgba(35,91,171,.88), rgba(30,111,224,.67));
    box-shadow: inset 3px 0 0 #77B4FF; color: #fff;
}
.app-sidebar .side-menu__item.active .side-menu__tile { color: var(--sj-sidebar-text); background: var(--sj-active); }

/* Create Invite submenu — indented rail with a title/description pair per row. */
.app-sidebar .slide-menu { margin: 1px 0 3px 20px; padding-left: 8px; border-left: 1px solid rgba(125,177,240,.2); }
.app-sidebar .side-menu__sub { grid-template-columns: 28px 1fr; min-height: 38px; }
.app-sidebar .side-menu__subcopy b { display: block; font-size: 12px; font-weight: 700; }
.app-sidebar .side-menu__subcopy small { font-size: 8.5px; color: var(--sj-sidebar-muted); display: block; }
.app-sidebar .side-menu__sub.active .side-menu__subcopy small { color: var(--sj-sidebar-text); }

/* Collapsed: icons only. Labels, section titles, chevrons and sub copy fold away. */
.app-sidebar.is-collapsed { width: 72px; }
/* The sidebar is position:fixed and .app-content clears it with a matching padding,
   so collapsing the rail must move the content too — otherwise the page keeps a
   248px gutter against a 72px rail. Both react to .page.sidebar-collapsed. */
.page.sidebar-collapsed .app-content { padding-left: 72px; }
.app-content, .app-sidebar { transition: padding-left .22s ease, width .22s ease; }
.app-sidebar.is-collapsed .brand-text,
.app-sidebar.is-collapsed .category-name,
.app-sidebar.is-collapsed .side-menu__label,
.app-sidebar.is-collapsed .side-menu__angle,
.app-sidebar.is-collapsed .side-menu__subcopy,
.app-sidebar.is-collapsed .sidebar-contact__text { display: none; }
.app-sidebar.is-collapsed .side-menu__item { grid-template-columns: 1fr; justify-items: center; }
.app-sidebar.is-collapsed .slide-menu { margin-left: 0; padding-left: 0; border-left: 0; }
.app-sidebar.is-collapsed .main-sidebar-header { padding-inline: 14px; }
.app-sidebar.is-collapsed .sidebar-collapse { right: 8px; }

/* ── Template gallery: hero, controls, view toggle, category rows ──────────────
   Layout and colours from the gallery design. The same card component renders
   both views; only the variant class differs. */
.itj-gal-hero {
    background:
        radial-gradient(circle at 92% 10%, rgba(67,168,59,.12), transparent 25%),
        radial-gradient(circle at 8% 0%, rgba(30,111,224,.13), transparent 24%),
        linear-gradient(135deg, #fff, #f8fbff);
    border: 1px solid #e3eaf3; border-radius: 15px; padding: 18px;
    box-shadow: 0 9px 20px rgba(20,40,74,.08);
}
.itj-gal-hero h1 { margin: 0 0 5px; color: #14284A; font-size: 22px; }
.itj-gal-hero p { margin: 0; color: #6d7a90; font-size: 14px; line-height: 1.5; max-width: 620px; }
.itj-gal-controls { margin-top: 14px; display: grid; grid-template-columns: 1.4fr 1fr auto auto; gap: 8px; align-items: center; }
.itj-gal-controls .form-control, .itj-gal-controls .form-select {
    padding: 8px 10px; font-size: 14px; border: 1px solid #e3eaf3; border-radius: 9px; background: var(--itj-bg-surface);
}
.itj-view-toggle { display: flex; gap: 3px; padding: 4px; background: #edf3fa; border-radius: 9px; border: 1px solid #e1e9f3; }
.itj-view-toggle button { border: 0; border-radius: 7px; padding: 6px 10px; background: transparent;
                          color: #66758c; font-size: 13px; font-weight: 800; cursor: pointer; }
.itj-view-toggle button.active { background: var(--itj-bg-surface); color: #1E6FE0; box-shadow: 0 2px 6px rgba(20,40,74,.10); }

.itj-gal-sectiontitle { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin: 17px 0 10px; }
.itj-gal-sectiontitle h2 { margin: 0; color: #14284A; font-size: 17px; }
.itj-gal-count { font-size: 12px; color: #6d7a90; }

/* Category rows — horizontal scrollers with arrow controls. */
.itj-cat-row { margin-top: 18px; }
.itj-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.itj-cat-head h2 { margin: 0; color: #14284A; font-size: 15.5px; }
.itj-cat-head .sub { color: #6d7a90; font-size: 11.5px; margin-left: 7px; font-weight: 500; }
.itj-cat-arrows { display: flex; gap: 6px; }
.itj-cat-arrow { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #e3eaf3; background: var(--itj-bg-surface);
                 color: #14284A; font-size: 14px; cursor: pointer; box-shadow: 0 3px 8px rgba(20,40,74,.08);
                 display: grid; place-items: center; }
.itj-cat-scroller { display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth;
                    padding: 3px 2px 11px; scrollbar-width: none; }
.itj-cat-scroller::-webkit-scrollbar { display: none; }

/* Category tile: artwork first, detail revealed on hover. */
/* ---- Premium template card (PremiumTemplateCard.razor) ----------------------
   Base card styles live here, not in a page, because the component is rendered by
   the gallery and the manage screens. Scoping
   them to one page left the card unstyled everywhere else. The .srijova-gcard--cat
   rules below layer the horizontal-row variant on top of these. */
/* Gallery card — colours and treatment taken from the supplied gallery prototype:
   navy #14284A, blue #1E6FE0, line #e3eaf3, muted #6d7a90 on a #f4f8fd page. */
.srijova-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(209px, 1fr)); gap: 12px; }

.srijova-gcard { background: var(--itj-bg-surface); border: 1px solid #e3eaf3; border-radius: 12px; overflow: hidden;
                 box-shadow: 0 4px 14px rgba(20,40,74,.07); transition: .22s ease; display: flex; flex-direction: column; }
.srijova-gcard:hover { transform: translateY(-3px); border-color: #b9d4f8;
                       box-shadow: 0 10px 21px rgba(30,111,224,.16); }

/* Square tile. A 1:1 frame tracks the column width, so the tiles stay square at every
   breakpoint instead of turning into letterboxes the way a fixed height does. */
.srijova-gcard__thumb { aspect-ratio: 1 / 1; width: 100%; flex: 0 0 auto; box-sizing: border-box;
                        position: relative; display: flex; align-items: center;
                        justify-content: center; overflow: hidden; padding: 10px;
                        background: linear-gradient(135deg, #eaf2fe 0%, #f6fbff 48%, #eef8ec 100%); }
.srijova-gcard__thumb .itj-anim { position: absolute; inset: 10px; height: auto; border-radius: 10px; background: transparent; }
/* The artwork sits inset as a framed square rather than bleeding to the card edge.
   contain (not cover) so the whole design is visible — cover was cropping the sides off
   landscape envelope art, which is what made the thumbnail read as unclear. The frame
   stays square regardless; leftover space falls on a white mat, with the tinted wash
   outside it, so a non-square image still looks deliberately mounted. */
.srijova-gcard__img { position: absolute; inset: 10px; background-size: contain;
                      background-position: center; background-repeat: no-repeat;
                      background-color: var(--itj-bg-surface); border-radius: 10px; border: 1px solid #cfe0f4;
                      box-shadow: 0 1px 4px rgba(20,40,74,.08); }
/* Stand-in when a template has neither animation nor artwork. */
.srijova-gcard__placeholder { position: relative; z-index: 3; font: 700 17.5px Georgia, serif; text-align: center;
                              padding: 0 13px; color: #172640; text-shadow: 0 2px 8px rgba(255,255,255,.75); }
.srijova-gcard__badges { position: absolute; top: 18px; left: 18px; right: 18px; z-index: 6;
                         display: flex; justify-content: flex-end; }
.srijova-gcard__badge { font-size: 9.5px; font-weight: 900; padding: 3px 7px; border-radius: 999px;
                        background: rgba(255,255,255,.94); color: #8a6800;
                        border: 1px solid rgba(210,170,55,.28); box-shadow: 0 2px 7px rgba(20,40,74,.09); }

.srijova-gcard__body { padding: 11px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.srijova-gcard__title { margin: 0; font-size: 14.5px; color: #14284A; }
.srijova-gcard__meta { display: flex; gap: 5px; flex-wrap: wrap; }
.srijova-gcard__meta span { font-size: 10.5px; padding: 3px 7px; border-radius: 999px;
                            background: #eaf2fe; color: #1a5fc4; font-weight: 700; }
.srijova-gcard__meta span:nth-child(n+2) { background: #eaf6e8; color: #2f7d2a; }
.srijova-gcard__desc { font-size: 12px; line-height: 1.45; color: #6d7a90; min-height: 29px; margin: 0; }
.srijova-gcard__actions { display: flex; gap: 5px; margin-top: auto; }
/* The prototype's button pair, scoped to the card so the app's Bootstrap buttons are
   untouched elsewhere: a soft outline against a blue gradient fill. */
.srijova-gcard__actions .btn { flex: 1; min-width: 0; border: 0; border-radius: 8px; padding: 7px 8px;
                               font-weight: 800; font-size: 12.5px; line-height: 1.25; transition: .18s ease; }
.srijova-gcard__actions .btn:hover { transform: translateY(-1px); }
.srijova-gcard__actions .btn-outline-secondary { background: var(--itj-bg-surface); color: #14284A; border: 1px solid #e3eaf3; }
.srijova-gcard__actions .btn-outline-secondary:hover { background: var(--itj-bg-surface); color: #14284A; border-color: #cfdcec; }
.srijova-gcard__actions .btn-primary,
.srijova-gcard__actions .btn-primary:hover { background: linear-gradient(135deg, #1E6FE0, #4B8FF5);
                                             color: #fff; box-shadow: 0 4px 11px rgba(30,111,224,.20); }

/* Dark mode: the card chrome follows the app shell; the thumb keeps its authored colours. */
[data-theme-mode="dark"] .srijova-gcard { background: #252836; border-color: rgba(255,255,255,.10); }
[data-theme-mode="dark"] .srijova-gcard__title { color: #e2e6ee; }
[data-theme-mode="dark"] .srijova-gcard__meta span { background: rgba(30,111,224,.18); color: #9cc4fb; }
[data-theme-mode="dark"] .srijova-gcard__meta span:nth-child(n+2) { background: rgba(67,168,59,.18); color: #93d68c; }
[data-theme-mode="dark"] .srijova-gcard__thumb { background: linear-gradient(135deg, #222736, #1c2130); }
[data-theme-mode="dark"] .srijova-gcard__img { border-color: rgba(255,255,255,.10); }
[data-theme-mode="dark"] .srijova-gcard__actions .btn-outline-secondary { background: #2c3040; color: #e2e6ee; border-color: rgba(255,255,255,.14); }
[data-theme-mode="dark"] .srijova-gcard__desc { color: #a3aac0; }

.srijova-gcard--cat { flex: 0 0 165px; height: 165px; border-radius: 11px; position: relative; overflow: hidden; }
.itj-cat-row--top .srijova-gcard--cat { flex-basis: 204px; height: 204px; }
.srijova-gcard--cat:hover { transform: scale(1.045); z-index: 5; box-shadow: 0 9px 20px rgba(20,40,74,.18); }
.srijova-gcard--cat .srijova-gcard__thumb { height: 100%; aspect-ratio: auto; padding: 0; background-color: transparent; }
/* Full-bleed on the tile: no inset frame here, and the wash rather than a white mat
   behind the contained artwork so the tile does not read as a white box under the overlay. */
.srijova-gcard--cat .srijova-gcard__img { inset: 0; border: 0; border-radius: 0; box-shadow: none;
    background-color: transparent; }
.srijova-gcard--cat .srijova-gcard__thumb .itj-anim { inset: 0; border-radius: 0; }
.srijova-gcard--cat .srijova-gcard__badges { top: 8px; left: 8px; right: 8px; }
/* The overlay reveals by collapsing its own rows, not by sliding the whole panel down.
   A translateY only hides a fixed distance, so once this overlay carried a title, chips,
   a full description and two buttons it was far taller than a 165px tile and spilled up
   over the artwork and the badge. Height-based reveal cannot overflow whatever the text. */
.srijova-gcard--cat .srijova-gcard__overlay {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; padding: 9px; gap: 5px;
    background: linear-gradient(to top, rgba(12,25,45,.94), rgba(12,25,45,.55), transparent);
    color: #fff; transition: .22s; display: flex; flex-direction: column;
    max-height: 100%; overflow: hidden;
}
/* At rest the tile shows artwork plus a one-line title; detail arrives on intent. */
.srijova-gcard--cat .srijova-gcard__title { color: #fff; font-size: 12.5px; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* The chips repeat the row heading (occasion) and the price is in the detail line, so
   they earn no space on a tile this small. */
.srijova-gcard--cat .srijova-gcard__meta { display: none; }
.srijova-gcard--cat .srijova-gcard__desc { color: #d8e0eb; font-size: 10.5px; line-height: 1.35;
    min-height: 0; margin: 0; opacity: 0; max-height: 0; transition: .22s;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.srijova-gcard--cat:hover .srijova-gcard__desc { opacity: 1; max-height: 30px; }
.srijova-gcard--cat .srijova-gcard__actions { opacity: 0; max-height: 0; overflow: hidden; transition: .22s; }
.srijova-gcard--cat:hover .srijova-gcard__actions { opacity: 1; max-height: 36px; }
.srijova-gcard--cat .srijova-gcard__actions .btn { padding: 5px 6px; font-size: 11px; }

@media (max-width: 900px) { .itj-gal-controls { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
    .itj-gal-hero { padding: 13px; } .itj-gal-hero h1 { font-size: 19px; }
    .itj-gal-controls { grid-template-columns: 1fr; }
    .srijova-gcard--cat { flex-basis: 138px; height: 138px; }
}

/* Animation panel — shared look between the Custom Invite wizard step and the premium
   editor's Effects tab, so the same controls read the same in both places. */
.itj-animpanel { border: 1px solid var(--srijova-border, #e3eaf3); border-radius: 14px; padding: 18px; background: var(--srijova-surface, #fff); }
.itj-animpanel__h { font-size: .95rem; margin: 0 0 2px; color: var(--srijova-text, #14284A); }
.itj-animpanel__sub { font-size: .85rem; color: var(--srijova-text-muted, #6d7a90); margin: 0 0 14px; }


/* Full-page emoji overlay on the premium invitation. The shared --page rule dims other
   ambient effects to .5; the emoji layer carries its own per-sprite opacity, so dimming
   it twice washes it out. Sits behind the card and RSVP form and never takes clicks. */
.srijova-itj-ovl--page.srijova-itj-ovl--emoji { opacity: 1; pointer-events: none; z-index: 1; }
/* Content sits above the animation so the card and RSVP form stay readable. */
.srijova-itj-ovl--page.srijova-itj-ovl--emoji ~ * { position: relative; z-index: 2; }
/* The Backdrop choice paints this layer, so its own background must survive — forcing it
   transparent here meant Backdrop had no effect on the guest's page either. */
.srijova-itj-ovl--page.srijova-itj-ovl--emoji .itj-anim {
    position: fixed; inset: 0; height: 100vh; width: 100vw; border-radius: 0;
}

/* ── Animation stage ──────────────────────────────────────────────────────────
   Presents the purchased artwork the way the template gallery presents a card:
   framed, elevated, with the premium badge — so the organizer is tuning the
   animation against something that looks like the finished product. */
.itj-animstage { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.itj-animstage__frame {
    width: min(640px, 100%); background: var(--itj-bg-surface); border-radius: 22px; overflow: hidden;
    border: 1px solid var(--srijova-border, #e3eaf3);
    box-shadow: 0 20px 60px rgba(20,40,74,.16);
}
.itj-animstage__art {
    position: relative; aspect-ratio: 4 / 3; background-size: cover; background-position: center;
    display: grid; place-items: center; overflow: hidden;
}
/* The emoji layer keeps its own backdrop colour here — forcing it transparent meant the
   Backdrop choice had no visible effect anywhere in the editor. */
.itj-animstage__art .itj-anim { position: absolute; inset: 0; height: 100%; border-radius: 0; }
/* The purchased artwork, inset so the backdrop reads around it exactly as a guest sees it. */
.itj-animstage__card { position: absolute; inset: 9%; z-index: 2; border-radius: 10px;
                       background-size: cover; background-position: center;
                       box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.itj-animstage__badge {
    position: absolute; top: 12px; right: 12px; z-index: 6;
    background: linear-gradient(135deg, #161616, #8b6a18); color: #ffe59a;
    padding: 6px 11px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .6px;
    box-shadow: 0 4px 12px rgba(20,40,74,.18);
}
.itj-animstage__fallback { position: relative; z-index: 3; display: grid; gap: 4px; text-align: center;
                           color: var(--srijova-text, #14284A); }
.itj-animstage__fallback span { font-size: .85rem; color: var(--srijova-text-muted, #6d7a90); }
.itj-animstage__caption { padding: 14px 18px; text-align: center; border-top: 1px solid var(--srijova-border, #e3eaf3); }
.itj-animstage__caption strong { display: block; font: 700 20px Georgia, serif; color: var(--srijova-text, #172641); }
.itj-animstage__caption span { font-size: .8rem; color: var(--srijova-text-muted, #6d7a90); }

.itj-animstage__pages { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.itj-animstage__pages button { width: 32px; height: 32px; border-radius: 9px;
                               border: 1px solid var(--srijova-border, #e3eaf3); background: var(--itj-bg-surface);
                               color: #14284A; font-weight: 700; cursor: pointer; }
.itj-animstage__pages button.active { background: #14284A; color: #fff; border-color: #14284A; }

[data-theme-mode="dark"] .itj-animstage__frame { background: #252836; border-color: rgba(255,255,255,.10); }
[data-theme-mode="dark"] .itj-animstage__pages button { background: #252836; color: #e2e6ee; border-color: rgba(255,255,255,.12); }

/* ---- Multi-select dropdown (emoji picker in the premium Animation step) --------------
   A native <details> rather than a JS widget: it opens and closes on its own and keeps
   working without scripts, which matters on a Blazor Server circuit. */
.itj-multi { position: relative; }
.itj-multi__head { list-style: none; cursor: pointer; display: flex; align-items: center;
                   gap: 6px; min-height: 38px; }
.itj-multi__head::-webkit-details-marker { display: none; }
.itj-multi__menu { position: absolute; z-index: 40; left: 0; right: 0; margin-top: 4px;
                   max-height: 220px; overflow: auto; padding: 6px;
                   background: var(--srijova-surface, #fff); border: 1px solid var(--srijova-border, #e3eaf3);
                   border-radius: 10px; box-shadow: 0 10px 26px rgba(20,40,74,.16);
                   display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 4px; }
.itj-multi__item { display: flex; align-items: center; gap: 5px; padding: 5px 6px;
                   border-radius: 8px; cursor: pointer; font-size: 18px; }
.itj-multi__item:hover { background: var(--srijova-surface-hover, #f2f6fc); }

/* ---- Checkout "You're purchasing" summary ------------------------------------------- */
.pco-buying { display: flex; align-items: center; gap: 14px; padding: 14px;
              border: 1px solid var(--srijova-border, #e3eaf3); border-radius: 14px;
              background: var(--srijova-surface, #fff); margin-bottom: 18px; }
.pco-buying__art { width: 86px; height: 86px; flex: 0 0 86px; border-radius: 10px;
                   background-size: cover; background-position: center;
                   box-shadow: 0 4px 12px rgba(20,40,74,.16); }
.pco-buying__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pco-buying__copy strong { font-size: 1rem; color: var(--srijova-text, #14284A); }
.pco-buying__copy small { font-size: .8rem; color: var(--srijova-text-muted, #6d7a90); }
.pco-buying__price { margin-left: auto; font-weight: 800; font-size: 1.15rem;
                     color: var(--srijova-text, #14284A); white-space: nowrap; }

/* ---- Gallery demo: "Your uploaded photo" marker -------------------------------------
   Shows a shopper where their own picture lands on a page the designer opened up,
   sized and positioned like the real photo frame (centred, 38% wide). */
.itj-demo-photo { position: absolute; left: 50%; top: 50%; height: 38%; width: auto;
                  max-width: 95%; max-height: 95%; aspect-ratio: 1/1;
                  transform: translate(-50%, -50%); border-radius: 50%;
                  display: flex; flex-direction: column; align-items: center; justify-content: center;
                  gap: 4px; text-align: center; padding: 8px;
                  background: rgba(255,255,255,.82); border: 2px dashed rgba(20,40,74,.45);
                  color: #14284A; font-weight: 700; font-size: 12px;
                  box-shadow: 0 6px 16px rgba(20,40,74,.20); }
.itj-demo-photo i { font-size: 22px; }

/* ---- Design step: "Add image" slot -------------------------------------------------
   Sits where the buyer's picture will land, at the same centred 38% the photo defaults
   to, so the marker previews the real placement rather than just labelling the page. */
.itj-photo-slot { position: absolute; left: 50%; top: 50%; height: 38%; width: auto;
                  max-width: 95%; max-height: 95%; aspect-ratio: 1/1;
                  transform: translate(-50%, -50%); border-radius: 50%;
                  display: flex; flex-direction: column; align-items: center; justify-content: center;
                  gap: 4px; text-align: center; padding: 8px; cursor: pointer;
                  background: rgba(255,255,255,.80); border: 2px dashed rgba(20,40,74,.50);
                  color: #14284A; font-weight: 700; font-size: 12px;
                  box-shadow: 0 6px 16px rgba(20,40,74,.20); transition: .18s ease; }
.itj-photo-slot:hover { background: rgba(255,255,255,.94); border-color: #1E6FE0; color: #1E6FE0;
                        transform: translate(-50%, -50%) scale(1.04); }
.itj-photo-slot i { font-size: 22px; }


/* ---- Public invitation: right-hand ad rail ------------------------------------------
   The guest shell is a 760px single column, so the page has to widen to make room for a
   rail beside the invitation rather than under it. :has() scopes that widening to pages
   that actually carry a rail, leaving every other invitation page untouched. */
.srijova-invite-stage:has(.itj-invite-grid) { max-width: 1010px; }

.itj-invite-grid { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 24px;
                   align-items: start; position: relative; z-index: 2; }
.itj-invite-grid__main { min-width: 0; }
/* Sticky so the rail stays in view through a long RSVP form without chasing the guest. */
.itj-invite-rail { position: sticky; top: 1rem; display: grid; gap: 1rem; }

/* No room for a side rail on a narrow screen — the invitation keeps the width and the
   ads fall in underneath it. */
@media (max-width: 980px) {
    .srijova-invite-stage:has(.itj-invite-grid) { max-width: 760px; }
    .itj-invite-grid { grid-template-columns: 1fr; }
    .itj-invite-rail { position: static; max-width: 360px; margin: 1rem auto 0; }
}

/* ---- Checkout discount code --------------------------------------------------------- */
.pco-coupon { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.pco-coupon__input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px;
                     border: 1px solid var(--srijova-border, #e3eaf3); background: var(--itj-bg-surface); }
.pco-coupon__err { font-size: .82rem; color: #C62828; margin-bottom: 10px; }
.pco-coupon__ok  { font-size: .82rem; color: #2F7D2A; margin-bottom: 10px; font-weight: 600; }

/* ---- Checkout billing location ------------------------------------------------------ */
.pco-loc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.pco-loc label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-weight: 600; }
.pco-loc label small { font-weight: 400; color: var(--srijova-text-muted, #6d7a90); }
.pco-loc__input { padding: 10px 12px; border-radius: 10px; background: var(--itj-bg-surface);
                  border: 1px solid var(--srijova-border, #e3eaf3); font-weight: 400; }
@media (max-width: 560px) { .pco-loc { grid-template-columns: 1fr; } }

/* ---- Cover-image guidance ------------------------------------------------------------ */
.srijova-designer-cover__hint { margin-top: 8px; font-size: 12px; color: var(--srijova-text, #14284A); }
.srijova-designer-cover__hint2 { margin-top: 3px; font-size: 11px;
                                 color: var(--srijova-text-muted, #6d7a90); max-width: 460px; }

/* ---- Wizard step 0: event type + banner gallery ------------------------------------- */
.itj-etype { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.itj-etype__btn { padding: 8px 14px; border-radius: 999px; cursor: pointer; font-weight: 700;
                  font-size: 13px; background: var(--itj-bg-surface); color: var(--srijova-text, #14284A);
                  border: 1px solid var(--srijova-border, #e3eaf3); transition: .15s ease; }
.itj-etype__btn:hover { border-color: #1E6FE0; color: #1E6FE0; }
.itj-etype__btn.is-sel { background: #14284A; border-color: #14284A; color: #fff; }

.itj-bannergrid__head { font-size: .85rem; font-weight: 700; margin: 14px 0 8px;
                        color: var(--srijova-text-muted, #6d7a90); text-transform: uppercase;
                        letter-spacing: .04em; }
.itj-bannergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
/* The banner already chosen, shown above the grid. Wider than a card on purpose: it is one
   picture and the host is checking it, not scanning for it. */
.itj-bannerpick__current { position: relative; border: 2px solid #1E6FE0; border-radius: 10px;
    overflow: hidden; box-shadow: 0 0 0 3px rgba(30,111,224,.16); }
.itj-bannerpick__current img { display: block; width: 100%; aspect-ratio: 8 / 3; object-fit: cover; }
.itj-bannerpick__current.is-broken { min-height: 120px;
    background: repeating-linear-gradient(45deg,#f3f6fa 0 8px,#e9eef5 8px 16px); }
.itj-bannerpick__currentlabel { position: absolute; top: 8px; left: 8px; display: inline-flex;
    align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .78rem;
    background: rgba(255,255,255,.92); color: #1E6FE0; font-weight: 600; }

.itj-bannercard { padding: 0; overflow: hidden; cursor: pointer; text-align: left;
                  background: var(--itj-bg-surface); border: 2px solid var(--srijova-border, #e3eaf3);
                  border-radius: 12px; transition: .18s ease; display: block; }
.itj-bannercard:hover { border-color: #9cc0f6; transform: translateY(-2px);
                        box-shadow: 0 8px 18px rgba(20,40,74,.12); }
.itj-bannercard.is-sel { border-color: #1E6FE0; box-shadow: 0 0 0 3px rgba(30,111,224,.16); }
/* 8:3, matching the guest-facing hero, so the tile previews the real crop. */
.itj-bannercard img { display: block; width: 100%; aspect-ratio: 8 / 3; object-fit: cover; }
.itj-bannercard__name { display: flex; align-items: center; justify-content: space-between;
                        gap: 8px; padding: 7px 10px; font-size: 12px; font-weight: 600;
                        color: var(--srijova-text, #14284A); }
.itj-bannercard__tick { color: #1E6FE0; font-size: 16px; }
/* A blob whose SAS expired or that no longer exists: show a labelled placeholder rather
   than a broken-image icon and an empty tile. */
.itj-bannercard img.is-broken { background: repeating-linear-gradient(45deg,#f3f6fa 0 8px,#e9eef5 8px 16px); }
.itj-bannercard img.is-broken::after { content: "Image unavailable"; display: grid;
    place-items: center; height: 100%; font-size: 11px; color: #6d7a90; }

/* ---- Selected banner preview ---- */
.itj-bannerpreview { padding: 14px; border-radius: 12px;
                     background: var(--srijova-bg, #f6f8fc);
                     border: 1px solid var(--srijova-border, #e3eaf3); }
.itj-bannerpreview__chip { padding: 3px 10px; border-radius: 999px; font-size: 11px;
                           font-weight: 800; background: #eaf2fe; color: #1a5fc4; }
.itj-bannerpreview__frame { border-radius: 10px; overflow: hidden;
                            border: 1px solid var(--srijova-border, #e3eaf3); background: var(--itj-bg-surface); }
.itj-bannerpreview__frame img { display: block; width: 100%; aspect-ratio: 8 / 3; object-fit: cover; }
.itj-bannerpreview__frame.is-broken { min-height: 120px; display: grid; place-items: center; }
.itj-bannerpreview__frame.is-broken::after { content: "Preview unavailable — pick another banner";
    font-size: 12px; color: #6d7a90; }

/* ---- Banner batch-upload list -------------------------------------------------------- */
.itj-uploadlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px;
                  max-height: 190px; overflow: auto; font-size: 12px; }
.itj-uploadlist li { display: flex; justify-content: space-between; gap: 12px;
                     padding: 3px 8px; border-radius: 6px; background: var(--srijova-bg, #f6f8fc); }
.itj-uploadlist em { font-style: normal; font-weight: 600; white-space: nowrap; }

/* ===== Form controls, app-wide =================================================
   Every text box, text area and dropdown in the signed-in app reads one set of
   tokens, whichever styling system its page was written in - Bootstrap's
   .form-control, a page's own class, or a bare <input> with no class at all.
   A page that still declares its own control rule appears later in the document
   and so still wins; those rules now read the same tokens, so winning changes
   nothing. Checkboxes, radios, ranges, files and colours are left alone: they
   are not text boxes and sizing them like one breaks them.
   ============================================================================== */
.app-content input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]),
.app-content textarea,
.app-content select,
.app-content .form-control,
.app-content .form-select {
    padding: var(--itj-control-pad-y) var(--itj-control-pad-x);
    border: 1px solid var(--itj-control-border-color);
    border-radius: var(--itj-control-radius);
    font: inherit;
    color: var(--itj-text-primary, inherit);
    /* background-color, not background: a <select> carries Bootstrap's arrow as a
       background-image, and the shorthand would wipe it and leave a bare box. */
    background-color: var(--form-control-bg);
    box-sizing: border-box;
    width: 100%;
}

/* An input sitting inside a button group or an input group is sized by that group,
   not by this rule, and stretching it to 100% would break the row. */
.app-content .input-group > input,
.app-content .input-group > select,
.app-content .btn-group input { width: auto; }

.app-content textarea { min-height: 96px; resize: vertical; }

.app-content input:focus,
.app-content textarea:focus,
.app-content select:focus,
.app-content .form-control:focus,
.app-content .form-select:focus {
    outline: none;
    border-color: var(--itj-control-focus-color);
    box-shadow: var(--itj-control-focus-ring);
}

.app-content input.is-invalid,
.app-content textarea.is-invalid,
.app-content select.is-invalid,
.app-content .form-control.is-invalid,
.app-content .form-select.is-invalid {
    border-color: var(--itj-control-invalid-color);
    box-shadow: var(--itj-control-invalid-ring);
}

.app-content input:disabled,
.app-content textarea:disabled,
.app-content select:disabled,
.app-content .form-control:disabled,
.app-content .form-select:disabled { opacity: .6; cursor: not-allowed; }

/* The character counter that sits under a field. One place, so "0/100" looks the
   same wherever it appears. */
.itj-count, .qi-count, .sd-count, .rd-count { display: block; margin-top: 4px; font-size: 11px; color: var(--itj-text-muted, #6b7280); text-align: right; }
.itj-count--over { color: var(--itj-control-invalid-color); font-weight: 700; }

/* "0/1000" on its own reads like a word count to plenty of people. Saying so here,
   rather than in twenty-odd call sites, keeps the wording identical everywhere and
   means a field that gains a counter later gets the label for free.

   Generated content, so it is never selected, copied or translated as part of the
   value - and a screen reader announcing the number still reaches the same word. */
.itj-count::after, .qi-count::after, .sd-count::after, .rd-count::after { content: " characters"; }

/* ===== Invitations list (Shared.Components) ====================================
   Two corrections to a page this application hosts but does not own.
   ============================================================================== */

/* The search box has a magnifier laid over its left edge, and the page reserves
   room for it with `.ith-search input { padding-left:38px }`. The app-wide control
   rule above sets padding with the shorthand, and its :not() chain carries seven
   attribute selectors' worth of specificity - far more than one class and an
   element - so it won that fight and the placeholder ran under the icon.

   Matching the chain here rather than reaching for !important: same weight plus
   one class, so this wins on specificity and stays readable to whoever reads the
   cascade next. Only the left padding is restored; everything else stays as the
   app-wide rule sets it, which is the point of that rule. */
.app-content .ith-search input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]) {
    padding-left: 38px;
}

/* ===== Guest Book, and the guest selector in the designers (Shared.Components) =
   The same magnifier-under-the-placeholder fault as the Invitations list above,
   on the other two search boxes the RCL draws. Each already reserves the room it
   needs - `.gb-search input[type=search]` at 40px, `.itj-filter-row
   .itj-search-wrap input[type=search]` at 44px - but one or two classes carry far
   less weight than the app-wide control rule's seven :not() selectors, so that
   rule's padding shorthand overrode the left padding and the placeholder ran
   under the icon.

   Same remedy and same reasoning as above: match the chain, add the page's own
   class so this wins on specificity rather than on !important, and restore only
   padding-left. Each keeps its own offset, because the gap beside the icon is
   that page's decision and the icons are not the same size.

   Both classes appear exactly once in the RCL, each wrapping one icon and one
   search input, so neither selector can reach a field that has no icon. */
.app-content .gb-search input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]) {
    padding-left: 40px;
}

.app-content .itj-search-wrap input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]) {
    padding-left: 44px;
}

/* The row actions menu is absolutely positioned inside the panel, and the panel
   clips to its own rounded corners with overflow:hidden - so on the last row the
   menu was cut off mid-item rather than hanging over the edge of the card.

   Letting it overflow means the corners no longer clip their children, so the two
   rows that meet them are rounded directly: the header, which has its own
   background and would otherwise square off the top, and the last row, which
   draws the bottom edge. */
.app-content .ith-panel { overflow: visible; }
.app-content .ith-head { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.app-content .ith-row:last-of-type { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }