/**
 * Cyber-Vault RWA - Shareholder & Legal Beneficiary Portal Stylesheet
 * Contains modular component classes for form inputs, responsive beneficiary grid, and portal cards.
 */

/* ==========================================================================
   Form Input & Control Standards
   ========================================================================== */
.cyber-input {
    width: 100%;
    background-color: var(--vault-card, #0D1117);
    border: 1px solid var(--vault-border, #1E2638);
    border-radius: 8px;
    padding: 0.625rem 0.75rem;
    color: #FFFFFF;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.75rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cyber-input:focus {
    border-color: var(--cyber-purple, #A855F7);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.25);
}

.cyber-input-green:focus {
    border-color: var(--cyber-green, #10B981);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}

.cyber-select {
    width: 100%;
    background-color: var(--vault-card, #0D1117);
    border: 1px solid var(--vault-border, #1E2638);
    border-radius: 8px;
    padding: 0.625rem 0.75rem;
    color: #FFFFFF;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.75rem;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cyber-select:focus {
    border-color: var(--cyber-purple, #A855F7);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.25);
}

.cyber-textarea {
    width: 100%;
    background-color: var(--vault-bg, #0B0E14);
    border: 1px solid var(--vault-border, #1E2638);
    border-radius: 8px;
    padding: 0.625rem 0.75rem;
    color: #FFFFFF;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.75rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cyber-textarea:focus {
    border-color: var(--cyber-green, #10B981);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.cyber-label {
    display: block;
    color: #9CA3AF;
    font-size: 11px;
    margin-bottom: 0.25rem;
    font-family: 'Roboto Mono', monospace;
    font-weight: 500;
}

/* ==========================================================================
   Beneficiary & Designated Legal Heir Responsive Proportional Grid
   ========================================================================== */
.heir-row, .varis-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .heir-row, .varis-row {
        flex-direction: row;
    }

    /* Row 1 Proportions: 20% - 30% - 30% - 20% */
    .heir-col-20, .varis-col-20 {
        flex: 20 20 0%;
        min-width: 0;
        width: 100%;
    }

    .heir-col-30, .varis-col-30 {
        flex: 30 30 0%;
        min-width: 0;
        width: 100%;
    }

    /* Row 3 Proportions: 65% - 17.5% - 17.5% */
    .heir-col-65, .varis-col-65 {
        flex: 65 65 0%;
        min-width: 0;
        width: 100%;
    }

    .heir-col-17, .varis-col-17 {
        flex: 17.5 17.5 0%;
        min-width: 0;
        width: 100%;
    }
}

/* ==========================================================================
   Beneficiary & Designated Legal Heir Cards & Badges
   ========================================================================== */
.heir-card, .varis-card {
    padding: 1.25rem;
    border-radius: 0.75rem;
    background-color: rgba(11, 14, 20, 0.95);
    border: 1px solid var(--vault-border, #1E2638);
    transition: all 0.25s ease;
}

.heir-card-primary, .varis-card-primary {
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.12);
}

.heir-badge-primary, .varis-badge-primary {
    background-color: rgba(168, 85, 247, 0.2);
    color: #D8B4FE;
    border: 1px solid rgba(168, 85, 247, 0.4);
    font-size: 9px;
    font-weight: 700;
    font-family: 'Roboto Mono', monospace;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
}

.heir-badge-secondary, .varis-badge-secondary {
    background-color: var(--vault-bg, #0B0E14);
    color: #9CA3AF;
    border: 1px solid var(--vault-border, #1E2638);
    font-size: 9px;
    font-weight: 700;
    font-family: 'Roboto Mono', monospace;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
}