/* ============================================================
   MODERN DESKTOP APP UTILITIES
   ============================================================
   Utility classes for achieving modern desktop application look.
   Inspired by reference design: dark canvas, soft surfaces, 
   green accents, subtle borders, backdrop blur effects.
   
   Import in app.css via: @import url('./utilities-modern.css');
   
   NOTE: CSS variables now defined in app.css :root for centralization.
   This file contains only utility classes that reference those variables.
============================================================ */

/* ============================================================
   LAYOUT UTILITIES
============================================================ */

/* AppBar with backdrop blur (glassmorphism) */
.gp-appbar {
    border-bottom: 1px solid var(--gp-border-translucent) !important;
    backdrop-filter: saturate(120%) var(--gp-blur) !important;
    -webkit-backdrop-filter: saturate(120%) var(--gp-blur) !important;
}

/* Left drawer (navigation) */
.gp-leftdrawer {
    width: 260px !important;
    border-right: 1px solid var(--gp-border-translucent) !important;
}

/* Right drawer (tools/context panel) */
.gp-rightdrawer {
    width: 320px !important;
    border-left: 1px solid var(--gp-border-translucent) !important;
}

/* Main content wrapper */
.gp-content {
    padding: 24px !important;
}

/* Centered card for welcome/empty states */
.gp-centercard {
    max-width: 880px;
    margin: 32px auto;
    padding: 32px;
    border-radius: var(--radius-12);
    box-shadow: 0 2px 12px rgba(2, 6, 23, 0.08);
}

body.theme-dark .gp-centercard {
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   COMPONENT UTILITIES
============================================================ */

/* Card with modern rounded corners */
.gp-card {
    border-radius: var(--radius-12) !important;
}

/* Button with no text transform, semi-bold weight */
.gp-btn {
    text-transform: none !important;
    font-weight: 600 !important;
}

/* Input with rounded corners */
.gp-input {
    border-radius: 10px !important;
}

/* Dense table with modern styling */
.gp-table {
    border-radius: var(--radius-12) !important;
}

/* Tab styling (if needed for custom tabs) */
.gp-tabs {
    border-radius: var(--radius-12) !important;
}

/* ============================================================
   TEXT UTILITIES
============================================================ */

/* Text muted (secondary text color) */
.text-muted {
    color: var(--mud-palette-text-secondary) !important;
}

/* Text primary (main text color) */
.text-primary-color {
    color: var(--mud-palette-primary) !important;
}

/* Text success (green accent) */
.text-success {
    color: var(--mud-palette-success) !important;
}

/* ============================================================
   VISUAL EFFECTS
============================================================ */

/* Gradient logo (uses theme primary color) */
.gp-logo {
    background: var(--mud-palette-primary) !important;
}

/* Gradient background for feature cards */
.gp-gradient-primary {
    background: linear-gradient(120deg, var(--mud-palette-primary), var(--mud-palette-secondary)) !important;
}

/* Soft shadow for cards */
.gp-soft-shadow {
    box-shadow: 0 2px 12px rgba(2, 6, 23, 0.08) !important;
}

body.theme-dark .gp-soft-shadow {
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35) !important;
}

/* Medium shadow for elevated elements */
.gp-medium-shadow {
    box-shadow: 0 4px 16px rgba(2, 6, 23, 0.1) !important;
}

body.theme-dark .gp-medium-shadow {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Backdrop blur effect */
.gp-blur {
    backdrop-filter: var(--gp-blur) !important;
    -webkit-backdrop-filter: var(--gp-blur) !important;
}

/* Backdrop blur with saturation */
.gp-blur-saturate {
    backdrop-filter: saturate(120%) var(--gp-blur) !important;
    -webkit-backdrop-filter: saturate(120%) var(--gp-blur) !important;
}

/* ============================================================
   BORDER UTILITIES
============================================================ */

/* Soft translucent border */
.gp-border {
    border: 1px solid var(--gp-border-translucent) !important;
}

/* Soft border top only */
.gp-border-top {
    border-top: 1px solid var(--gp-border-translucent) !important;
}

/* Soft border bottom only */
.gp-border-bottom {
    border-bottom: 1px solid var(--gp-border-translucent) !important;
}

/* Light border (more subtle) */
.gp-border-light {
    border: 1px solid var(--gp-border-translucent-light) !important;
}

/* ============================================================
   SPACING UTILITIES (Extended MudBlazor)
============================================================ */

/* Gap utilities using CSS custom property */
.gp-gap {
    gap: var(--gp-gap) !important;
}

.gp-gap-sm {
    gap: calc(var(--gp-gap) / 2) !important;
}

.gp-gap-lg {
    gap: calc(var(--gp-gap) * 1.5) !important;
}

/* ============================================================
   CHIP STYLING (Success accent)
============================================================ */

/* Success chip with vibrant color */
.mud-chip.mud-chip-color-success {
    background: var(--mud-palette-success) !important;
    color: var(--mud-palette-success-contrast-text) !important;
    font-weight: 500 !important;
}

/* Success chip outlined variant */
.mud-chip.mud-chip-color-success.mud-chip-outlined {
    border-color: var(--mud-palette-success) !important;
    color: var(--mud-palette-success) !important;
    background: transparent !important;
}

/* ============================================================
   THEME-SPECIFIC OVERRIDES
============================================================ */

/* Dark mode adjustments */
body.theme-dark .gp-appbar {
    border-bottom-color: rgba(148, 163, 184, 0.12) !important;
}

body.theme-dark .gp-leftdrawer,
body.theme-dark .gp-rightdrawer {
    border-color: rgba(148, 163, 184, 0.12) !important;
}

body.theme-dark .gp-border {
    border-color: rgba(148, 163, 184, 0.12) !important;
}

body.theme-dark .gp-border-light {
    border-color: rgba(148, 163, 184, 0.08) !important;
}

/* Light mode adjustments */
body.theme-light .gp-appbar {
    border-bottom-color: rgba(148, 163, 184, 0.15) !important;
}

body.theme-light .gp-leftdrawer,
body.theme-light .gp-rightdrawer {
    border-color: rgba(148, 163, 184, 0.15) !important;
}

body.theme-light .gp-border {
    border-color: rgba(148, 163, 184, 0.15) !important;
}

body.theme-light .gp-border-light {
    border-color: rgba(148, 163, 184, 0.10) !important;
}

/* ============================================================
   RESPONSIVE UTILITIES
============================================================ */

/* Tablet and below */
@media (max-width: 960px) {
    .gp-leftdrawer {
        width: 240px !important;
    }

    .gp-rightdrawer {
        width: 280px !important;
    }

    .gp-content {
        padding: 16px !important;
    }

    .gp-centercard {
        margin: 16px auto;
        padding: 24px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .gp-leftdrawer {
        width: 200px !important;
    }

    .gp-rightdrawer {
        width: 100% !important;
    }

    .gp-content {
        padding: 12px !important;
    }

    .gp-centercard {
        margin: 12px auto;
        padding: 16px;
    }

    /* Reduce border radius on mobile */
    .gp-card,
    .gp-centercard {
        border-radius: 8px !important;
    }
}

/* ============================================================
   HOVER STATES
============================================================ */

/* Subtle hover for interactive cards */
.gp-card-hover:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 16px rgba(2, 6, 23, 0.12) !important;
}

body.theme-dark .gp-card-hover:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
}

/* Subtle button hover */
.gp-btn:hover {
    transform: scale(1.02);
    transition: transform 0.15s ease;
}

/* ============================================================
   USAGE EXAMPLES (Comment out in production)
============================================================ */

/*
EXAMPLE 1: Modern AppBar
<MudAppBar Elevation="0" Class="gp-appbar">
    <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" />
    <MudSpacer />
    <MudIconButton Icon="@Icons.Material.Filled.LightMode" />
</MudAppBar>

EXAMPLE 2: Centered Welcome Card
<MudMainContent Class="gp-content">
    <MudPaper Class="gp-centercard">
        <MudStack AlignItems="Center" Spacing="2">
            <MudAvatar Size="Size.Large" Class="gp-logo" />
            <MudText Typo="Typo.h5">Welcome Message</MudText>
            <MudText Class="text-muted">Subtitle text</MudText>
        </MudStack>
    </MudPaper>
</MudMainContent>

EXAMPLE 3: Success Chips
<MudChip Color="Color.Success" Variant="Variant.Filled">Active</MudChip>

EXAMPLE 4: Soft Shadow Card
<MudPaper Class="gp-card gp-soft-shadow pa-4">
    Content
</MudPaper>
*/