/* Billetsalg.dk - Shared CSS for all apps
 * Base styles used by both ServerWeb and ServerAdmin
 * Avoid inline styles - use MudBlazor utilities or these classes
 */

/* Prevent double-tap zoom on all buttons and interactive elements (mobile) */
button,
a,
[role="button"] {
    touch-action: manipulation;
}

/* Hero banner styling - shared across apps */
.hero-banner {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

/* Architecture diagram containers - used in both apps */
.mermaid-diagram-container {
    min-height: 800px;
}

/* Status indicators using MudBlazor theme colors */
.mud-success-text {
    color: var(--mud-palette-success);
}

.mud-error-text {
    color: var(--mud-palette-error);
}

/* Clickable table rows - consistent interaction pattern */
.mud-table-clickable-row {
    cursor: pointer;
}

.mud-table-clickable-row:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* Generic cursor pointer utility - for clickable elements */
.cursor-pointer {
    cursor: pointer;
}

.cursor-pointer:hover {
    opacity: 0.9;
}

/* Error box border - form validation styling */
.error-danger-border {
    border: 1px solid var(--mud-palette-error);
}

/* Code preview styling - used in documentation and debugging */
.code-preview {
    background: #1e1e1e;
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
}

.code-preview-text {
    color: #d4d4d4;
    font-family: 'Courier New', monospace;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Main content min height - ensures footer stays at bottom */
body.admin .mud-main-content-min-height {
    min-height: 100vh;
}

body.web .mud-main-content-min-height {
    min-height: calc(100vh - 64px);
}

/* Checkout PublicSiteChrome — sticky footer below fixed site header (not header-only browse chrome).
   Full chrome keeps header + main in one MudLayout; main must fill 100vh (padding-top clears the fixed bar). */
body.web .mud-layout.public-site-chrome-layout,
body.web .mud-layout:has(> .site-header):has(> .mud-main-content > [data-presentation-scope-shell]) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.web .mud-layout.public-site-chrome-layout > .mud-main-content.mud-main-content-min-height,
body.web .mud-layout:has(> .site-header):has(> .mud-main-content > [data-presentation-scope-shell]) > .mud-main-content.mud-main-content-min-height {
    flex: 1 1 auto;
    min-height: 0;
}

body.web .mud-main-content.mud-main-content-min-height {
    display: flex;
    flex-direction: column;
}

body.web .mud-main-content.mud-main-content-min-height > [data-presentation-scope-shell] {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 100%;
    width: 100%;
}

body.web .mud-main-content.mud-main-content-min-height > [data-presentation-scope-shell] > .flex-grow-1 {
    flex: 1 1 auto !important;
}

/* Feature-specific CSS lives in wwwroot/css/features/<feature>.css
 * See: docs/00-nerd-rules/01-project-rules/33-css-standards.md */