mikrofront/src/app/views/vault/vault.scss

// Compact Navigation Styles
.nav-underline {
    border-bottom: 2px solid var(--cui-nav-underline-border-color, #c4c9d0);
    
    .nav-item {
        margin-bottom: -2px;
        cursor: pointer;
    }
    
    .nav-link {
        color: var(--cui-nav-underline-link-color, #768192);
        border-style: none none solid!important;
        border-width: 2px;
        position: relative;
        bottom: -1px;
        cursor: pointer;
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
        
        &:hover, &:focus {
            border-color: var(--cui-nav-underline-link-active-border-color, #321fdb);
        }
        
        &.active, .show > & {
            color: var(--cui-nav-underline-link-active-color, #321fdb);
            background: transparent;
            border-color: var(--cui-nav-underline-link-active-border-color, #321fdb);
        }
    }
}

// Compact Form Styles
.form-label.small {
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.25rem;
}

.form-select-sm {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
}

// Card Header Improvements
.c-card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 0.75rem 1rem;
    
    h6 {
        font-size: 0.9rem;
        font-weight: 600;
        color: #495057;
        
        i {
            color: #6c757d;
        }
    }
    
    .text-muted {
        font-size: 0.75rem;
    }
}


// Input Group Compact
.input-group-sm {
    .form-control, .input-group-text {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
}

// Alert Improvements
.alert {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    
    i {
        margin-right: 0.5rem;
    }
}

// Button Improvements
.btn {
    font-size: 0.85rem;
    
    &.btn-sm {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
    
    i {
        font-size: 0.8rem;
    }
}

// Modal Improvements
.c-modal-header {
    padding: 0.75rem 1rem;
    
    h6 {
        font-size: 0.95rem;
        font-weight: 600;
    }
}

.c-modal-body {
    padding: 1rem;
    font-size: 0.9rem;
}

.c-modal-footer {
    padding: 0.75rem 1rem;
}

// Responsive Design
@media (max-width: 768px) {
    .c-card-header {
        .nav-underline {
            margin-bottom: 0.5rem;
        }
        
        .text-end {
            text-align: left !important;
        }
    }
    
    .input-group-sm {
        flex-direction: column;
        
        .form-control {
            margin-bottom: 0.25rem;
        }
        
        .btn {
            width: 100%;
        }
    }
    
    .c-modal-dialog {
        margin: 0.5rem;
    }
    
    .c-card-footer {
        .btn {
            width: 100%;
            margin-bottom: 0.5rem;
            
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

@media (max-width: 576px) {
    .nav-underline .nav-link {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    .c-card-header h6 {
        font-size: 0.85rem;
    }
    
    .form-label.small {
        font-size: 0.75rem;
    }
    
    .btn {
        font-size: 0.8rem;
        
        &.btn-sm {
            font-size: 0.75rem;
            padding: 0.2rem 0.4rem;
        }
    }
}

// Material Form Field Compact
::ng-deep .mat-form-field {
    .mat-form-field-wrapper {
        padding-bottom: 0.5em;
    }
    
    .mat-form-field-infix {
        padding: 0.5em 0;
    }
    
    .mat-form-field-label {
        font-size: 0.85rem;
    }
    
    input {
        font-size: 0.85rem;
    }
}


// Tab Info Headers
.tab-info-header {
    padding: 1rem 0;
    
    h5 {
        color: #495057;
        font-weight: 600;
        font-size: 1.1rem;
    }
    
    .fs-4 {
        font-size: 1.5rem !important;
    }
}

// Utility Classes
.fw-semibold {
    font-weight: 600;
}

.text-xs {
    font-size: 0.75rem;
}

.compact-spacing {
    .c-row {
        margin-bottom: 0.5rem;
    }
    
    .c-col {
        padding: 0.25rem;
    }
}

// Responsive tab headers
@media (max-width: 576px) {
    .tab-info-header {
        padding: 0.75rem 0;
        
        h5 {
            font-size: 1rem;
        }
        
        .fs-4 {
            font-size: 1.25rem !important;
        }
        
        .d-flex {
            flex-direction: column;
            text-align: center;
        }
        
        .me-2 {
            margin-right: 0 !important;
            margin-bottom: 0.5rem;
        }
    }
}