/* ============================================
   V+M Design System v3.2.0 - Layout Helpers
   ============================================
   Common layout patterns extracted from inline styles
   Per validation requirements
   ============================================ */

/* Logo filter for brand color consistency */
.logo-filter-red {
    filter: invert(8%) sepia(98%) saturate(4534%) hue-rotate(3deg) brightness(91%) contrast(112%);
}

/* Centered logo container */
.logo-container-centered {
    text-align: center;
    margin-bottom: var(--space-xl);
}

/* Auth form containers */
.auth-form-container {
    max-width: 600px;
    margin: var(--space-lg) auto 0 auto;
}

/* Spacing utilities for specific layouts */
.section-header {
    margin-bottom: var(--space-lg);
}

.section-description {
    margin-top: var(--space-sm);
    font-size: var(--vm-font-size-sm);
    color: var(--vm-gray-600);
}

.info-box {
    background: var(--vm-gray-50);
    padding: var(--space-md);
    border-radius: var(--vm-radius-md);
    border: 1px solid var(--vm-border-color);
}

.info-box-title {
    color: var(--vm-gray-800);
    display: block;
    margin-bottom: var(--space-sm);
    font-weight: 600;
}

.info-box-list {
    margin: 0;
    padding-left: var(--space-lg);
    color: var(--vm-gray-700);
}

.info-box-list li {
    margin-bottom: var(--space-xs);
}

/* Footer links */
.auth-footer {
    text-align: center;
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--vm-border-color);
}

.auth-footer-link {
    color: var(--vm-gray-600);
    text-decoration: none;
    transition: var(--transition-base);
}

.auth-footer-link:hover {
    color: var(--vm-red);
    text-decoration: underline;
}

/* Relative positioning helper */
.position-relative {
    position: relative;
}

/* Absolute positioning helper */
.position-absolute {
    position: absolute;
}

/* Grid full width */
.grid-full-width {
    grid-column: 1 / -1;
}

/* Inline link within text */
.inline-link {
    display: inline;
    padding: 0;
    text-decoration: underline;
    color: var(--vm-red);
    background: none;
    border: none;
}

.inline-link:hover {
    color: var(--vm-red-dark);
}

/* Flex item with icon spacing */
.flex-with-icon {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Icon positioning in relative container */
.icon-right-centered {
    position: absolute;
    right: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
}

/* Status banner (gradient header) */
.status-banner {
    background: linear-gradient(135deg, var(--vm-gray-50) 0%, var(--vm-gray-100) 100%);
    padding: var(--space-xl);
    border-radius: var(--vm-radius-md);
    margin-bottom: var(--space-xl);
}

.status-banner-title {
    margin: 0;
    font-size: var(--vm-font-size-xl);
    font-weight: 700;
    color: var(--vm-gray-900);
}

.status-banner-subtitle {
    margin: var(--space-sm) 0 0 0;
    font-size: var(--vm-font-size-md);
    color: var(--vm-gray-600);
}

/* Info card */
.info-card {
    padding: var(--space-md);
    background: var(--vm-white);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius-md);
    margin-bottom: var(--space-md);
}

.info-card-header {
    font-size: var(--vm-font-size-md);
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--vm-gray-900);
}

.info-card-label {
    color: var(--vm-gray-600);
    font-size: var(--vm-font-size-sm);
    display: block;
    margin-bottom: var(--space-xs);
}

.info-card-value {
    font-size: var(--vm-font-size-md);
    font-weight: 500;
    color: var(--vm-gray-900);
}

/* Highlight box */
.highlight-box {
    background: var(--vm-blue-light);
    padding: var(--space-md);
    border-radius: var(--vm-radius-md);
    margin-top: var(--space-md);
}

/* Indented help text */
.help-text-indented {
    margin: var(--space-sm) 0 0 var(--space-lg);
    line-height: var(--vm-typography-line-height-relaxed);
    color: var(--vm-gray-600);
    font-size: var(--vm-font-size-sm);
}

/* Whitespace no-wrap */
.text-nowrap {
    white-space: nowrap;
}

/* Hidden utility */
.hidden {
    display: none !important;
}

/* Tab content container */
.tab-content-panel {
    padding: var(--space-xl);
    background: var(--vm-white);
    border: 1px solid var(--vm-border-color);
    border-top: none;
    border-radius: 0 0 var(--vm-radius-md) var(--vm-radius-md);
}

/* Empty state message */
.empty-state {
    text-align: center;
    padding: var(--space-2xl);
    color: var(--vm-gray-600);
}

.empty-state-title {
    font-size: var(--vm-font-size-lg);
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--vm-gray-700);
}

.empty-state-description {
    font-size: var(--vm-font-size-md);
    color: var(--vm-gray-600);
}

/* Password input with toggle */
.password-input-wrapper {
    position: relative;
}

.password-input-wrapper input {
    padding-right: 2.5rem;
}

.password-toggle-btn {
    position: absolute;
    right: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--vm-gray-500);
    cursor: pointer;
    padding: var(--space-xs);
    line-height: 1;
}

.password-toggle-btn:hover {
    color: var(--vm-gray-700);
}