/* ==========================================================================
   WinTool App Store — Color & Branding Overrides
   Scoped via .appstore-page wrapper to keep TCM brown theme on admin pages
   Only changes: WinTool blue (#5887AD) colors + logo styling
   ========================================================================== */

/* Override TCM root colors for AppStore pages */
.appstore-page {
    --tcm-primary: #5887AD;
    --tcm-primary-dark: #4a7599;
    --tcm-primary-light: #7da8c8;
    --mud-palette-primary: #5887AD;
    --mud-palette-primary-hover: #4a7599;
}

/* MudBlazor filled primary buttons */
.appstore-page .mud-button-filled-primary {
    background-color: #5887AD !important;
}

.appstore-page .mud-button-filled-primary:hover {
    background-color: #4a7599 !important;
}

/* MudBlazor outlined primary buttons */
.appstore-page .mud-button-outlined-primary {
    border-color: #5887AD !important;
    color: #5887AD !important;
}

.appstore-page .mud-button-outlined-primary:hover {
    background-color: rgba(88, 135, 173, 0.08) !important;
}

/* MudBlazor text primary buttons */
.appstore-page .mud-button-text-primary {
    color: #5887AD !important;
}

/* MudBlazor links */
.appstore-page .mud-link.mud-primary-text {
    color: #5887AD !important;
}

/* MudBlazor chips with primary color */
.appstore-page .mud-chip-primary {
    background-color: #5887AD !important;
}

.appstore-page .mud-chip-outlined-primary {
    border-color: #5887AD !important;
    color: #5887AD !important;
}

/* MudBlazor icons with primary color */
.appstore-page .mud-primary-text {
    color: #5887AD !important;
}

/* Active nav item within appstore */
.appstore-page .mud-nav-item.mud-nav-item-active {
    background-color: #5887AD;
}

/* MudBlazor avatar with primary color */
.appstore-page .mud-avatar-primary {
    background-color: #5887AD !important;
}

/* Progress bars */
.appstore-page .mud-progress-linear-bar-primary {
    background-color: #5887AD !important;
}

.appstore-page .mud-progress-circular-primary circle {
    stroke: #5887AD !important;
}

/* MudBlazor breadcrumb link color */
.appstore-page .mud-breadcrumbs li a {
    color: #5887AD !important;
}

/* Card header accent border — WinTool blue instead of TCM brown */
.appstore-page .mud-card-header {
    border-bottom-color: #5887AD;
}

/* Featured banner — blue accent instead of brown */
.appstore-page .mud-paper[style*="border-left"] {
    border-left-color: #5887AD !important;
}

/* Company section gradient — blue tones */
.appstore-page .mud-paper[style*="linear-gradient"] {
    background: linear-gradient(135deg, #e3f0f8 0%, #eaf4fd 100%) !important;
    border-left: 4px solid #5887AD !important;
}

/* WinTool Logo styling */
.appstore-page .wt-logo {
    height: 40px;
    width: auto;
}

/* Category tiles on home page — lift + tint on hover */
.appstore-page .category-tile {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid rgba(0,0,0,0.06);
}
.appstore-page .category-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(88,135,173,0.15);
    border-color: #5887AD;
}

/* ==========================================================================
   WinTool-branded host variant — applied on appstore.wintool.com.
   Reaches elements outside the .appstore-page wrapper (especially the AppBar
   at the top of MainLayout) so the brand blue wins against MainLayout's
   per-host TCM-gold rule. body.wintool-brand is set by MainLayout.OnAfterRenderAsync.
   ========================================================================== */

/* NOTE: these rules intentionally skip the `.appstore-page` intermediate
   step so they ALSO reach the detail pages (WinToolDetail, PluginDetail,
   ToolbaseDetail, *MobileDetail) which do not wrap their content in the
   .appstore-page div. body.wintool-brand only exists on appstore.wintool.com —
   a dedicated host that serves only AppStore content — so a broader scope
   is safe and is needed for the download buttons on version-detail pages. */
body.wintool-brand {
    --mud-palette-primary: #5887AD;
    --mud-palette-primary-hover: #4a7599;
}
body.wintool-brand .mud-appbar {
    background-color: #5887AD !important;
}
body.wintool-brand .mud-button-filled-primary {
    background-color: #5887AD !important;
}
body.wintool-brand .mud-button-filled-primary:hover {
    background-color: #4a7599 !important;
}
body.wintool-brand .mud-button-outlined-primary {
    border-color: #5887AD !important;
    color: #5887AD !important;
}
body.wintool-brand .mud-button-outlined-primary:hover {
    background-color: rgba(88, 135, 173, 0.08) !important;
}
body.wintool-brand .mud-button-text-primary {
    color: #5887AD !important;
}
body.wintool-brand .mud-link.mud-primary-text {
    color: #5887AD !important;
}
body.wintool-brand .mud-chip-primary {
    background-color: #5887AD !important;
}
body.wintool-brand .mud-chip-outlined-primary {
    border-color: #5887AD !important;
    color: #5887AD !important;
}
body.wintool-brand .mud-primary-text {
    color: #5887AD !important;
}
body.wintool-brand .mud-progress-linear-bar-primary {
    background-color: #5887AD !important;
}
body.wintool-brand .mud-progress-circular-primary circle {
    stroke: #5887AD !important;
}
body.wintool-brand .mud-breadcrumbs li a {
    color: #5887AD !important;
}

/* ==========================================================================
   Toolbase-branded variant — applied on appstore.toolbase.de.
   Overrides WinTool blue with Toolbase red (#D52B1E).
   Wrapper class is added by the host detection in each AppStore page.
   ========================================================================== */

/* Same scoping note as the body.wintool-brand block above — selectors skip
   `.appstore-page` so they reach detail pages (ToolbaseDetail, PluginDetail,
   etc.) which don't wrap content in that div. body.toolbase-brand only exists
   on appstore.toolbase.de, a dedicated AppStore host. */
body.toolbase-brand {
    --tcm-primary: #D52B1E;
    --tcm-primary-dark: #B52419;
    --tcm-primary-light: #F4D2CF;
    --mud-palette-primary: #D52B1E;
    --mud-palette-primary-hover: #B52419;
}

body.toolbase-brand .mud-appbar {
    background-color: #D52B1E !important;
}
body.toolbase-brand .mud-button-filled-primary {
    background-color: #D52B1E !important;
}
body.toolbase-brand .mud-button-filled-primary:hover {
    background-color: #B52419 !important;
}
body.toolbase-brand .mud-button-outlined-primary {
    border-color: #D52B1E !important;
    color: #D52B1E !important;
}
body.toolbase-brand .mud-button-outlined-primary:hover {
    background-color: rgba(213, 43, 30, 0.08) !important;
}
body.toolbase-brand .mud-button-text-primary {
    color: #D52B1E !important;
}
body.toolbase-brand .mud-link.mud-primary-text {
    color: #D52B1E !important;
}
body.toolbase-brand .mud-chip-primary {
    background-color: #D52B1E !important;
}
body.toolbase-brand .mud-chip-outlined-primary {
    border-color: #D52B1E !important;
    color: #D52B1E !important;
}
body.toolbase-brand .mud-primary-text {
    color: #D52B1E !important;
}
body.toolbase-brand .mud-nav-item.mud-nav-item-active {
    background-color: #D52B1E;
}
body.toolbase-brand .mud-avatar-primary {
    background-color: #D52B1E !important;
}
body.toolbase-brand .mud-progress-linear-bar-primary {
    background-color: #D52B1E !important;
}
body.toolbase-brand .mud-progress-circular-primary circle {
    stroke: #D52B1E !important;
}
body.toolbase-brand .mud-breadcrumbs li a {
    color: #D52B1E !important;
}
body.toolbase-brand .mud-card-header {
    border-bottom-color: #D52B1E;
}
body.toolbase-brand .mud-paper[style*="border-left"] {
    border-left-color: #D52B1E !important;
}
body.toolbase-brand .mud-paper[style*="linear-gradient"] {
    background: linear-gradient(135deg, #fbe4e2 0%, #fdeeed 100%) !important;
    border-left: 4px solid #D52B1E !important;
}
body.toolbase-brand .category-tile:hover {
    box-shadow: 0 4px 12px rgba(213, 43, 30, 0.15);
    border-color: #D52B1E;
}