/*
   Add-On Marketplace styles. Global (not scoped) so the page + sub-components
   (AddOnCard, AddOnDetailsModal, AddOnActionButton) all use the same classes
   without Blazor's per-component scope-hash isolation getting in the way.

   Referenced from _Host.cshtml via <link rel="stylesheet" href="css/addons.css">.
   Bumped with the global cache-bust version when edited.
*/

/* ─── Category accordion (2026-06-07) ───
   The marketplace right-pane groups cards into collapsible sections, one per
   Category. Header is a button-styled bar (chevron + title + count badge);
   body is the existing .addons-grid scoped to that group. Hover gives a
   subtle background lift to telegraph that the header is clickable. */
.addons-category-section { border: 1px solid var(--ras-border, #e5e7eb); border-radius: 12px; overflow: hidden; background: #fff; }
.addons-category-header {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 14px 18px;
    background: #f8fafc; border: none; border-bottom: 1px solid transparent;
    cursor: pointer; transition: background-color 120ms ease;
    text-align: left;
}
.addons-category-header:hover { background: #f1f5f9; }
.addons-category-header:focus-visible { outline: 2px solid #0d57b5; outline-offset: -2px; }
.addons-category-chevron { color: #6b7280; font-size: 14px; width: 14px; text-align: center; }
.addons-category-title { font-weight: 600; font-size: 1rem; color: #1a1a1a; letter-spacing: -0.01em; }
.addons-category-body {
    padding: 16px 18px 20px;
    border-top: 1px solid #f1f5f9;
}

/* ─── Layout shell ─── Inherit General_Settings typography for the title +
   description column on the right of the header so the page feels native. */
.addons-page .field-name {
    color: #202020; font-weight: 500; font-size: 1.2rem;
    line-height: 1.143; margin-bottom: 0.5rem;
}
.addons-page .label-value {
    color: #838383; font-weight: 400; font-size: 0.9rem;
    line-height: 1.34; margin: 0;
}
.addons-page .label-name {
    color: #646464; font-weight: 500; font-size: 1rem; line-height: 1.143;
}

/* ─── Sidebar (sticky on desktop) ───
   Left rail of categories + status/dev filters. Stays visible while the right
   pane scrolls. Items use a left accent bar + tinted background when active. */
.addons-sidebar {
    position: sticky; top: 86px; max-height: calc(100vh - 110px); overflow-y: auto;
}
.addons-sidebar-header {
    font-size: 0.75rem; font-weight: 700; color: #838383;
    text-transform: uppercase; letter-spacing: 0.06em;
    padding: 6px 10px 8px;
}
.addons-sidebar-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; border-radius: 6px; cursor: pointer; color: #202020;
    font-size: 0.95rem; font-weight: 500;
    border-left: 3px solid transparent;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.addons-sidebar-item:hover { background: #f5f7fa; color: #0d57b5; }
.addons-sidebar-item.active {
    background: #eef4fb; color: #0d57b5; border-left-color: #0d57b5;
}
.addons-sidebar-divider { height: 1px; background: #e5e7eb; margin: 8px 6px; }

/* Count badge appears on every sidebar row + each card status pill.
   Solid blue when its parent sidebar row is active. */
.addons-count-badge {
    font-size: 0.7rem; font-weight: 700;
    background: #eef2f7; color: #646464;
    padding: 1px 8px; border-radius: 999px; line-height: 1.4;
}
.addons-sidebar-item.active .addons-count-badge { background: #0d57b5; color: #fff; }

/* ─── Card grid ─── auto-fill at ~320px → 2 cols desktop, 1 col mobile. */
.addons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}
.addon-card {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 16px; display: flex; flex-direction: column;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
    /* Lock card height so the grid renders as an even matrix regardless of how
       many lines the tagline runs to or how long the price string is. Footer
       always pins to the bottom via margin-top:auto below. Tweak min-height
       only if you add new fields ABOVE the footer (description was already
       moved to the Details modal so the card stays compact). */
    min-height: 240px;
}
.addon-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
    border-color: #cbd5e1;
}
/* Installed card uses the RAS brand blue family (not green) so "installed at
   this venue" reads as a Spectrum-owned thing visually, consistent with the
   sidebar active-item highlight and the topbar accents. */
.addon-installed { border-color: #0d57b5; background: #eef4fb; }

/* Coming Soon cards skip the min-height + margin-top:auto layout — there's
   no actionable button to pin to the bottom, so the card should size to its
   natural content height (icon + name + tagline + dimmed footer). Shorter
   cards in the row let the grid breathe instead of leaving big whitespace
   gaps below an unclickable Coming Soon button. */
.addon-coming-soon { min-height: 0; }
.addon-coming-soon .addon-footer { margin-top: 12px; }

.addon-card-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.addon-icon {
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px;
}
/* Logo variant — branded third-party integrations. White background with a soft
   border instead of the colored fill so the company logo reads true. img is
   constrained to fit the tile with a small inner padding. */
.addon-icon.addon-icon-logo {
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 4px;
}
/* Editable state — RAS-staff-only affordance. Pointer cursor + subtle ring on
   hover signal that the tile is interactive. Not rendered for non-RAS users. */
.addon-icon.addon-icon-editable {
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}
.addon-icon.addon-icon-editable:hover {
    box-shadow: 0 0 0 3px rgba(13, 87, 181, 0.25);
    transform: scale(1.05);
}
.addon-icon.addon-icon-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ─── Status pill + dev badge ───
   Pill = customer-facing (Installed / Available / Coming Soon / Beta).
   Dev badge = internal workload state (check / truck / hammer). */
.addon-status-group { display: flex; align-items: center; gap: 8px; }
.addon-status-pill {
    font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.addon-status-available     { background: #eff6ff; color: #1d4ed8; }
.addon-status-installed     { background: #dbeafe; color: #0d57b5; }  /* matches RAS-blue card tint */
.addon-status-coming-soon   { background: #fef3c7; color: #b45309; }
.addon-status-beta          { background: #fae8ff; color: #86198f; }
/* Purchased = this venue specifically has an active subscription. Amber tint
   matches the sidebar Purchased filter icon so the visual story is consistent. */
.addon-status-purchased     { background: #fef3c7; color: #b45309; }
/* Pre-Ordered = venue is on the waitlist for an unbuilt feature. Purple matches
   the PreOrder dev-badge color so the visual story stays consistent across
   the dev badge + status pill + sidebar filter icon. */
.addon-status-pre-ordered   { background: #f3e8ff; color: #7c3aed; }
.addon-dev-badge { font-size: 18px; line-height: 1; cursor: help; }

/* Name + tagline both wrap naturally — no clamping. Card height is held
   consistent by .addon-card min-height + margin-top:auto on the footer, so a
   short-text card has whitespace above its footer instead of looking cramped.
   Whitespace beats butchered ellipsis. */
.addon-name {
    font-size: 16px; font-weight: 700; color: #1f2937;
    margin-bottom: 4px; line-height: 1.25;
}
/* Tagline reads as a regular sub-heading, not italics — at 12px italic on
   a grey color it was getting hard to scan. Normal weight, slightly darker. */
.addon-tagline {
    font-size: 12px; color: #4b5563;
    margin-bottom: 12px; line-height: 1.45;
}
.addon-description { font-size: 13px; color: #374151; line-height: 1.5; margin-bottom: 10px; }

.addon-highlights {
    list-style: none; padding-left: 0; margin-bottom: 10px;
    font-size: 12px; color: #4b5563;
}
.addon-highlights li {
    display: flex; align-items: flex-start; gap: 6px; margin-bottom: 4px;
}
.addon-highlights i {
    color: #4ecca3; font-size: 11px; margin-top: 3px; flex-shrink: 0;
}

/* Footer = two stacked rows: pricing on top, action buttons full-width below.
   margin-top:auto pushes the whole footer to the bottom of the flex column
   so prices + buttons line up across the grid row even with uneven tagline
   lengths. */
.addon-footer {
    display: flex; flex-direction: column;
    gap: 12px;
    padding-top: 12px; border-top: 1px solid #f1f5f9;
    margin-top: auto;
}
/* Pricing row — price + price-sub on one line, baseline-aligned so the small
   "/mo" sits next to the big "$249" cleanly. */
.addon-pricing {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.addon-price { font-size: 18px; font-weight: 700; color: #1f2937; line-height: 1.1; }
.addon-price-sub { font-size: 12px; color: #6b7280; }
/* Action row — every button (Details, Install, Order, Manage) hugs its own
   text + icon and the whole group anchors to the bottom-right of the card.
   Compact buttons let multiple cards in a row stay visually balanced even
   when one card's primary action label is longer than another's. */
.addon-actions {
    display: flex; gap: 8px; width: 100%;
    justify-content: flex-end; align-items: center;
}
.addon-actions .addon-btn {
    flex: 0 0 auto;        /* intrinsic width — never stretch */
    justify-content: center;
}

/* ─── Buttons ───
   Primary = filled blue (Install/Order); Secondary = neutral grey (Manage);
   Ghost = transparent outline (Details — visually quiet so it doesn't compete);
   Disabled = grey-on-grey, no hover. */
.addon-btn {
    border: none; border-radius: 6px; padding: 8px 14px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .15s ease;
}
.addon-btn-primary   { background: #0d57b5; color: #fff; }
.addon-btn-primary:hover { background: #0a4690; }
.addon-btn-secondary { background: #f1f5f9; color: #1f2937; }
.addon-btn-secondary:hover { background: #e2e8f0; }
.addon-btn-disabled  { background: #f1f5f9; color: #9ca3af; cursor: not-allowed; }
.addon-btn-ghost     { background: transparent; color: #646464; border: 1px solid #e5e7eb; }
.addon-btn-ghost:hover { background: #f5f7fa; color: #0d57b5; border-color: #cbd5e1; }
/* Cancel-subscription ghost button — subtle red hover so it's clearly the
   destructive action without screaming for attention in the resting state. */
.addon-btn-cancel:hover { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

.addons-footer-note {
    padding: 12px 16px; border-radius: 8px;
    background: #f1f5f9; font-size: 13px; color: #4b5563;
}
.addons-footer-note a { color: #0d57b5; text-decoration: none; font-weight: 600; }
.addons-footer-note a:hover { text-decoration: underline; }

/* ─── Details modal ───
   Center-screen overlay opened by per-card Details button. Backdrop click closes;
   panel stopPropagation keeps clicks inside from bubbling. */
.addons-modal-overlay {
    position: fixed; inset: 0; z-index: 4000;
    background: rgba(15, 23, 42, 0.45);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: addonsFadeIn 0.15s ease-out forwards;
}
@keyframes addonsFadeIn { from { opacity: 0; } to { opacity: 1; } }
.addons-modal {
    background: #fff; border-radius: 12px;
    width: 100%; max-width: 560px; max-height: calc(100vh - 64px);
    display: flex; flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,0.25);
    overflow: hidden;
}
.addons-modal-header {
    display: flex; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid #eef0f3;
}
.addons-modal-title { font-size: 1.2rem; font-weight: 700; color: #1f2937; line-height: 1.2; }
/* Modal subtitle (the tagline echoed at the top of the popup) — same readability
   reason: italic at small size on grey was hard to scan. Normal weight. */
.addons-modal-subtitle { font-size: 0.85rem; color: #4b5563; margin-top: 2px; }
.addons-modal-meta {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 20px; border-bottom: 1px solid #f1f5f9;
    background: #fafbfc;
}
.addons-modal-category { font-size: 0.8rem; color: #6b7280; font-weight: 500; }
.addons-modal-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
.addons-modal-section-title {
    font-size: 0.75rem; font-weight: 700; color: #6b7280;
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;
}
.addons-modal-footer {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 10px; padding: 14px 20px; border-top: 1px solid #eef0f3;
    background: #fafbfc;
}