/* backend_custom.css - Standardized Spacing & Aesthetics for Rhodeum Beacon Backend */

/* 1. Global Container Standardization */
.dashboard-container,
.network-container,
.activation-container {
    flex: 1;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 2rem 2rem !important;
    box-sizing: border-box !important;
}

/* 2. Standardized Card System */
.card, 
.content-card,
.table-card,
.milestone-card,
.invite-bar-card,
.visual-tree-card,
.cyber-card {
    background: white !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 2rem !important;
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Dark Cyber Cards (Aesthetics maintained, layout standardized) */
.cyber-card {
    background: #050716 !important;
    border: 1px solid #00f0ff25 !important;
    color: #ffffff !important;
    font-family: 'Courier New', monospace !important;
}

/* 3. Header and Title Area Alignment */
.card-header,
.header-section,
.settings-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 0.5rem !important;
    margin-bottom: 1.5rem !important;
    margin-left: 0 !important; /* Align perfectly with cards */
    margin-right: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.card-header h1,
.header-section h1,
.settings-header h1 {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    color: var(--color-text) !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: -0.02em !important;
}

/* 4. Layout Responsiveness (Mobile Viewports) */
@media (max-width: 768px) {
    /* Page Container Mobile Padding */
    .dashboard-container,
    .network-container,
    .activation-container {
        padding: 1.25rem 1rem !important;
    }

    /* Unified Mobile Card Spacing & Padding */
    .card,
    .content-card,
    .table-card,
    .milestone-card,
    .invite-bar-card,
    .visual-tree-card,
    .cyber-card {
        padding: 1.25rem 1rem !important;
        margin-bottom: 1rem !important;
        border-radius: 12px !important;
    }

    /* Mobile Header Stack */
    .card-header,
    .header-section,
    .settings-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        margin-bottom: 1.25rem !important;
    }

    .card-header h1,
    .header-section h1,
    .settings-header h1 {
        font-size: 1.5rem !important;
    }
}

/* 5. Custom Grid & Utility Classes */
.telemetry-grid {
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 8px 12px !important;
}

.invoice-card {
    background: white !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 3rem !important;
    max-width: 680px !important;
    width: 100% !important;
    margin: 1rem auto 2rem !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .invoice-card {
        padding: 1.5rem 1.25rem !important;
        margin: 1rem auto !important;
    }
}

@media (max-width: 480px) {
    .telemetry-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
}